UIButton的imageEdgeInsets 和 titleEdgeInsets

我们知道，在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(50,100,100,50)];
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(20, 0, 0, 0)];

含义是：image距离上侧的边距增加20，也就是image向下偏移20，此时button的形状如下：

[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(0, -20, 0, 0)];

含义：image距左侧的边距减少20，也就是image向左偏移20，此时button的形状如下：

[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -20)];

含义：image距右侧的距离减少20，也就是image向右偏移20，此时button的形状如下：

[searchBtn setImageEdgeInsets:UIEdgeInsetsMake(0,0,20,0)];

含义：距离下侧的距离增加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(0,titleWidth,0,-titleWidth)];

把title 移到左面：

[searchBtn setTitleEdgeInsets:UIEdgeInsetsMake(0,-imageWidth,0,imageWidth)];

最后的效果图：

来源：CSDN

作者：弯弯的小溪

链接：https://blog.csdn.net/a18339063397/article/details/103563230

标签

uibutton

edg战队