我们知道,在UIButton中有一个UILabel和一个UIImageView,同时还有属性: titleEdgeInsets,imageEdgeInsets。介绍下 imageEdgeInsets 和 titleEdgeInsets 的用法。
UIEdgeInsets
首先,titleEdgeInsets 和 imageEdgeInsets 都是 UIEdgeInsets类型。UIEdgeInsets 是一个结构体,定义如下:
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right;
} UIEdgeInsets;
四个值依次是:上、左、下、右,代表的是距离上边界、左边界、下边界、右边界的位移,默认都是0。
示例
首先创建一个button,button有image和title,代码如下:
UIButton *searchBtn = [[UIButton alloc] initWithFrame:CGRectMake(,,,)];
searchBtn.backgroundColor = [UIColor yellowColor];
[self.view addSubview:searchBtn];
UIImage *searchImage = [UIImage imageNamed:@"search"];
[searchBtn setImage:searchImage forState:UIControlStateNormal];
[searchBtn setTitle:@"测试" forState:UIControlStateNormal];
[searchBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
此时,button的形状是默认的,如下:
设置一下button 的 imageEdgeInsets:
[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(, , , )];
含义是:image距离上侧的边距增加20,也就是image向下偏移20,此时button的形状如下:
[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(, -, , )];
含义:image距左侧的边距减少20,也就是image向左偏移20,此时button的形状如下:
[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(, , , -)];
含义:image距右侧的距离减少20,也就是image向右偏移20,此时button的形状如下:
[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(,,,)];
含义:距离下侧的距离增加20,也就是image向上偏移20,此时button的形状如下:
至此,UIButton 的 imageEdgeInsets 里面的四个参数代表的含义已经非常清楚了,同理,titleEdgeInsets的四个参数代表的含义也是一样的。
文字和图片位置互换
理解了 imageEdgeInsets 和 titleEdgeInsets,现在实现将文字和图片位置互换。
第一步:把image移到右面,相当于上侧和下侧不变,左侧增加一段距离,右侧减少一段距离;
第二步:把title移到左面,相当于上侧和下侧不变,左侧减少一段距离,右侧增加一段距离;
首先算出图片和文字的宽度:
CGFloat imageWidth = searchImage.size.width;
[searchBtn.titleLabel sizeToFit];
CGFloat titleWidth = searchBtn.titleLabel.frame.size.width;
把image 移到右面:
[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(,titleWidth,,-titleWidth)];
把title 移到左面:
[searchBtn setTitleEdgeInsets:UIEdgeInsetsMake(,-imageWidth,,imageWidth)];
最后的效果图: