码迷,mamicode.com
首页 > 其他好文 > 详细

UIButton的imageEdgeInsets 和 titleEdgeInsets

时间:2016-07-14 23:51:09      阅读:452      评论:0      收藏:0      [点我收藏+]

标签:

我们知道,在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)];

最后的效果图:

技术分享

UIButton的imageEdgeInsets 和 titleEdgeInsets

标签:

原文地址:http://www.cnblogs.com/acBool/p/5671806.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!