应用场景:
开发中经常需要设置点击控件时要求图片文字同时高亮或者变色,这种情况通常有两种方式设置,一种是使用两个控件监听点击事件去改变这两个控件的状态,另外也可以使用button去改变其内部TitleLabel和ImageView的位置,实现上下和左右的布局,其中左右布局是系统默认的方式,上下布局需要自己去操作布局。
设置button内部控件布局的两种方式
一、通过自定义button控件,重写其中的布局方法
- (CGRect)backgroundRectForBounds:(CGRect)bounds{
NSLog(@"%f----%f",bounds.size.width,bounds.size.height);
return bounds;
}
- (CGRect)contentRectForBounds:(CGRect)bounds{
NSLog(@"%f======%f",bounds.size.width,bounds.size.height);
return bounds;
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
NSLog(@"%f----%f----%f----%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
CGRect rect = CGRectMake(50, contentRect.origin.y+25, contentRect.size.width-50, 30);
return rect;
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
NSLog(@"%f====%f====%f====%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
CGRect rect = CGRectMake(10, contentRect.origin.y+25, 30, 30);
return rect;
}
方法就不介绍了每个方法的方法名描述的都很清楚,你只需设置想要的frame和bounds返回就可以了。
二、第二种方式是通过button内部控件的EdgeInsets属性来设置的,这个属性也很常见可以设置其上左下右的值来改变button内部label和ImageView的布局
button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
我这里提供了一个计算方法可以很快的设置button内部控件的上下布局
计算代码
///计算button中心点imageview最大x的差
CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
///button的label中心点减去上面的差值就是label的到button中心点的偏移量
CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
///计算imageview到button中心点的偏移量
CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
Demo代码
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 120, 80)];
button.backgroundColor = [UIColor yellowColor];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize:12.0];
[button setTitle:@"收藏" forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"button-1"] forState:UIControlStateNormal];
button.titleLabel.backgroundColor = [UIColor redColor];
button.imageView.backgroundColor = [UIColor blueColor];
///计算button中心点imageview最大x的差
CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
///button的label中心点减去上面的差值就是label的到button中心点的偏移量
CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
///计算imageview到button中心点的偏移量
CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
[self.view addSubview:button];
}
这里只是计算了imageView和Label的居中 具体的高度没有计算,所以大家使用时可以自己调整一下高度问题,如果button宽度显示不下可以调整b2的大小例如两边减去某个值。
注意点:
使用上面的计算代码时一定要先设置好图片和标题,不要先计算后设置,否则拿到的iamgeview和label的size可以为nil导致布局失败。