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)];

最后的效果图:

posted @ 2016-07-14 21:22  acBool  阅读(6993)  评论(0编辑  收藏  举报