UIButton的titleEdgeInsets和imageEdgeInsets属性
转:http://www.cnblogs.com/huichun/p/3419596.html
uiButton控件上自带了一个uiLabel类型的子控件和一个uiImageView类型的子控件,如果可以正确使用他们的edgeInsets属性,就能把button设置成我们想要的样子。
关于titleEdgeInsets,苹果文档的解释是:The inset or outset margins for the rectangle around the button’s title text,而且imageEdgeInsets也是类似,都没有讲怎么设。事实上,这两个东西是有联系的,常常会造成困惑:我只设了其中一个的edgeInsets,为什么button上的图片和文字布局都变了?
这里是一个同事花一个下午的时间,专门写一段button的代码,分析数据,总结出来的小规律,并不权威,但是挺好用的,总结出来分享一下。
默认情况下,imageEdgeInsets和titleEdgeInsets都是0。先不考虑height,
if (button.width小于imageView上image的width){图像会被压缩,文字不显示}
if (button.width < imageView.width + label.width){图像正常显示,文字显示不全}
if (button.width >= imageView.width + label.width){图像和文字都居中显示,imageView在左,label在右,中间没有空隙}
实际app应用中,通常会已知如下参数,布局button
button的width:BUTTON_WIDTH
button上控件imageView的的图片为image
label上的文字为:@“这是一个测试”
为了不看着头疼,不写那么多的常量了,以具体的数字来举例吧,我们想让imageView在前,label在后,居中显示,imageView在button上离左边界至少为距离10,label离button右边界为距离为至少为10,imageView和label之间的距离为5,代码可以如下写:
NSString *title = @"这是一个测试";
[button setTitle:title forState:UIControlStateNormal];
[button setImage:image forState:UIControlStateNormal];
CGSize strSize = [title sizeWithFont:button.titleLabel.font];
CGFloat totalLen = strSize.width + 5 + image.size.width;
CGFloat edgeLen = (TAGS_BUTTON_WIDTH - totalLen) / 2;
if (edgeLen < 10) {
edgeLen = 10;
}
[button setImageEdgeInsets:UIEdgeInsetsMake(0, edgeLen, 0, edgeLen + 5)];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, edgeLen + 5, 0, edgeLen)];
设置edgeInsets要始终记住的一个原则是:将label和imageView看成一个整体,imageView在前,label在后,中间没有空隙。。这段代码中,设置imageEdgeInsets时,imageView与左边距离为计算好的edgeLen,右边距是按照button的默认布局,label的右边与button右边的距离,就是label实际的右边应当与button右边的距离再向左移动5(实际中imageView与label有间距5,默认布局下可没有这个5,得把这个5让出来),就是edgeLen + 5。设置titleEdgeInset时,label与右边为计算好的edgeLen,想象imageView还在label的左边,与label没有空隙的话,那这个整体与左边的距离应该是多少呢?就是edgeLen+5,把间隙的5让出来嘛。
我们再想一个稍复杂的情况:如果label在左,imageView在右,imageView在button上离右边界为固定值10,label离button左边界也为固定值10,应该怎么设呢?可以如下写代码:
NSString *title = @"这是一个测试";
[button setTitle:title forState:UIControlStateNormal];
[button setImage:image forState:UIControlStateNormal];
CGSize strSize = [title sizeWithFont:button.titleLabel.font];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, BUTTON_WIDTH - 10 - image.size.width, 0, (10 - strSize.width))];
CGFloat titleRightInset = BUTTON_WIDTH - 10 - strSize.width;
if (titleRightInset < 10 + image.size.width) {
titleRightInset = 10 + image.size.width;
}
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, (10 - image.size.width), 0, titleRightInset)];
解释这段代码之前再强调一下UIButton控件的默认布局:imageView在左,label在右,中间没有空隙。imageView的左侧与button的左边界距离为button的width,去掉右侧留出的10,再去掉imageView的width,想像imageView后面还接着有一个label,那么label的右侧与button的右边界距离为10 - strSize.width,所以button的imageEdgeInsets属性就如上面代码的设置值了。再看label,它的右侧与button右边界的距离为button的width,去掉左侧留出的10,再去掉label的width,为保证label后面能放下一个图片,图片后面还有10的空白,故对titleRightInset做了如上的一些调整。想象label的左侧还有一个imageView,那么这个整体离button左边界的距离为10 - image.size.width。
以上只考虑了width方向,height方向与width是独立的,比width更容易一些。
设button的height:BUTTON_HEIGHT,如果imageView在上,与button上边界距离为10,label在下,与button下边界距离为10,可写如下代码。
NSString *title = @"这是一个测试";
[button setTitle:title forState:UIControlStateNormal];
[button setImage:image forState:UIControlStateNormal];
[button setImageEdgeInsets:UIEdgeInsetsMake(10, 0, BUTTON_HEIGHT - 10 - image.size.height , 0)];
[button setTitleEdgeInsets:UIEdgeInsetsMake(BUTTON_HEIGHT - 10 - button.titleLabel.frame.size.height, 0, 10, 0)];
可以看到height方向上,imageView与label独立变化,不用考虑彼此。
UIButton的titleEdgeInsets和imageEdgeInsets属性的更多相关文章
- UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列
button可以设置 titleEdgeInsets属性和 imageEdgeInsets属性来调整其image和label相对位置,具体参考http://stackoverflow.com/ques ...
- iOS:UIView、UIControl、UIButton、UILabel简单的属性和方法常识
常见属性和方法 一 .UIVIew 常见属性 1.frame 位置和尺寸(以父控件的左上角为原点(0,0)) 2.center 中点 (以父控件的左上角为原点(0,0)) 3.bounds 位置和尺寸 ...
- UIButton中的三个UIEdgeInsets属性
接着昨天的 UIButton中的三个UIEdgeInsets属性 ,今天我们具体谈谈UIButton的contentEdgeInsets.titleEdgeInsets.imageEdgeInsets ...
- UIButton的imageEdgeInsets 和 titleEdgeInsets
我们知道,在UIButton中有一个UILabel和一个UIImageView,同时还有属性: titleEdgeInsets,imageEdgeInsets.介绍下 imageEdgeInsets ...
- IOS(二)基本控件UIButton、简易动画、transform属性、UIImageView
UIButton //1.设置UIButton 的左右移动 .center属性 获得 CGPoint 来修改x y //1.设置UIButton 的放大缩小 bounds属性 获得CGRect 然后通 ...
- UIkit框架之UIbutton的使用
1.UIbutton的继承关系:UIcontroller:UIview:UIresponder:NSObject: 2.添加按钮的步骤: (1)创建按钮的时候首先设置类型 (2)添加标题或者图片,设置 ...
- UIButton 解析
IOS之按钮控件--Button全解析及使用 转载自:forget IOS开发中伴随我们始终的 最常用的几个空间之一 -- UIButton 按钮,对于button今天在此做一些浅析,并介绍下主流用 ...
- Object-C知识点 (二) 控件的实用属性
开发过程中的组件不常用但是很实用的属性!!!!!! p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Menlo; color: #78492a ...
- [iOS]详解调整UIButton的title和image的位置
UIButton的默认布局是:title在右,image在左; 很多时候我们需要的是title在左边,或者title在下面,这时就需要调整UIButton的TitleLabel和ImageView的位 ...
随机推荐
- SAP 设置周期性的后台程序,SM36,图解操作 (转)
SM36是设置SAP周期性运行的事务码 来测试一下,首先先写一个程序: 我有一个zzp_people2的数据表. DATA : INT1 TYPE I. DATA : ITAB LIKE ZZP_PE ...
- 快速排序(java实现)
快速排序 算法思想:基于分治的思想,是冒泡排序的改进型.首先在数组中选择一个基准点(该基准点的选取可能影响快速排序的效率,后面讲解选取的方法),然后分别从数组的两端扫描数组,设两个指示标志(lo指向起 ...
- JavaScript 中2个等号与3个等号的区别
首先,== equality 等同,=== identity 恒等. ==, 两边值类型不同的时候,要先进行类型转换,再比较. ===,不做类型转换,类型不同的一定不等. 下面分别说明: 先说 === ...
- 利用ManualResetEvent来来控制异步调用的打印的线程的暂停和恢复(转)
利用ManualResetEvent来来控制异步调用的打印的线程的暂停和恢复 打印过程可能很长,这时候有可能需要暂停下来做一些事情,然后回来继续接着打印 打印过程中有2个线程:一个是程序运行的主线程, ...
- whatweb
WhatWeb是一款网站指纹识别工具,主要针对的问题是:“这个网站使用的什么技术?”WhatWeb可以告诉你网站搭建使用的程序,包括何种CMS系统.什么博客系统.Javascript库.web服务器. ...
- Javascript 添加自定义静态方法属性JS清除左右空格
例如加trim()清除左右空格 String.prototype.trim=function() { return this.replace(/(^\s*)|(\s*$)/g,''); } 调用 va ...
- 状态伪类选择器(E::selection)
E::selection选择器: E::selection{background:#FF6600; color:#fff;} //当文字被选中时,背景是红色,文字是白色 E::-moz-s ...
- 使用MyBatis Generator自动创建代码
SSM框架--使用MyBatis Generator自动创建代码 1. 目录说明 使用自动生成有很多方式,可以在eclipse中安装插件,但是以下将要介绍的这种方式我认为很轻松,最简单,不需要装插件, ...
- bootstrap中的Tooltips工具提示的使用问题
在使用bootstrap中的Tooltips时,官方文档中的实例代码若直接放在.container 或 .container-fluid类中时,四个button悬停之后会把button之间的margi ...
- winpcap usb山寨网卡识别
买了个沐阳的JP-1081 USB外置有线网卡 装上RD9700的驱动 WINPCAP 4.1.3 运行程序发现没有找到这个网卡 后来才发现 winpcap4.1之后 获取的网卡信息是该次随系统启动 ...