UIButton是开发过程中最常用的控件，可以设置各种样式，也可以自定义添加图片、标题。
一个同时带有图片和标题的button
但是，实际设计中往往与上图的默认样式不一致。比如图片和文字间距为10，图片距离左边的间距为10，标题距离右边为10，这就需要我们使用一些方法来实现效果。
1. 使用imageEdgeInsets和titleEdgeInsets
btn.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 10);
上述方式可以实现需求效果，但由于特殊的计算方式，使得代码不太直观。具体内容可参考文章 iOS UIButton之UIEdgeInsets详解
2.渲染时给出imageView和titleLabel的frame
重写以下两个方法，返回需要的frame，使imageView和titleLabel分开渲染。
- -(CGRect)titleRectForContentRect:(CGRect)contentRect;
- -(CGRect)imageRectForContentRect:(CGRect)contentRect;
所以我们创建一个QiShareButton继承自UIButton，并定义两个属性
@interface QiShareButton : UIButton
@property (nonatomic, assign) CGRect imageRect;
@property (nonatomic, assign) CGRect titleRect;
@end
在.m中重写两个方法
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
if (!CGRectIsEmpty(self.titleRect) && !CGRectEqualToRect(self.titleRect, CGRectZero)) {
return self.titleRect;
} else {
return [super titleRectForContentRect:contentRect];
}
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect {
if (!CGRectIsEmpty(self.imageRect)&&!CGRectEqualToRect(self.imageRect, CGRectZero)) {
return self.imageRect;
} else {
return [super imageRectForContentRect:contentRect];
}
}
关于使用：
QiShareButton *btn = [[QiShareButton alloc]initWithFrame:CGRectZero];
btn.backgroundColor = [UIColor cyanColor];
[btn addTarget:self action:@selector(test) forControlEvents:UIControlEventTouchUpInside];
[btn setTitle:@"QiShareBtn" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"icon_presonal_sign"] forState:UIControlStateNormal];
btn.titleRect = CGRectMake(60.0 , 10.0, 100.0, 40.0);
btn.imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0);
[self.view addSubview:btn];
在上述代码中，以CGRectZero初始化button，然后分别设置titleRect和imageRect属性，观察到虽然imageView和titleLabel正常绘制，但是button的frame依然是Zero，在橙色的大背景下看不到青色（cyanColor）的button。
button的父视图背景橙色，显示不出button
我们设置button的frame不足以显示imageView和titleLabel
QiShareButton *btn = [[QiShareButton alloc] initWithFrame:CGRectMake(100.0, 100.0, 20.0, 20.0)];
button的frame不足以显示imageView和titleLabel
我们希望button能够根据titleRect和imageRect属性的值自动适配合适的frame。即：设置titleRect和imageRect便可以算出button的大小。
所以重写UIButton的layoutSubViews方法：
- (void)layoutSubviews {
[super layoutSubviews];
BOOL hasSetTitleRect = !(CGRectIsEmpty(self.titleRect) || CGRectEqualToRect(self.titleRect, CGRectZero));
BOOL hasSetImageRect = !(CGRectIsEmpty(self.imageRect) || CGRectEqualToRect(self.imageRect, CGRectZero));
if (hasSetImageRect || hasSetTitleRect) {
CGRect rect = self.frame;
CGRect curentRect = CGRectUnion(hasSetImageRect ? self.imageRect : CGRectZero, hasSetTitleRect ? self.titleRect : CGRectZero);
rect.size.width = curentRect.size.width + curentRect.origin.x * 2;
rect.size.height = curentRect.size.height + curentRect.origin.y * 2;
self.frame = rect;
}
}
使用效果（未给定button的frame或者宽高不正确）
btn.titleRect = CGRectMake(60.0 , 10.0, 100.0, 40.0);
btn.imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0);
左右分布 图片在左
btn.imageRect = CGRectMake(110.0 , 10.0, 40.0, 40.0);
btn.titleRect = CGRectMake(10.0, 10.0, 100.0, 40.0);
左右分布 图片在右边
btn.titleRect = CGRectMake(10.0 , 10.0, 100, 40);
btn.imageRect = CGRectMake(40, 60, 40, 40);
上下分布 图片在下
btn.titleRect = CGRectMake(10 , 60, 100, 40);
btn.imageRect = CGRectMake(40, 10, 40, 40);
上下分布 图片在上
源码：Demo源码
小编微信：可加并拉入《QiShare技术交流群》。
关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章：
iOS 指定初始化方法
UIView中的hitTest方法
iOS关于tabBar的几处笔记
A的女儿是B的女儿的妈妈，A是B的谁？
算法小专栏：选择排序
iOS Runloop（一）
奇舞周刊
网友评论