如何布局包含Image和Title的UIButton
UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。
如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是能试出来的,但是如果改变了图片大小或文字长度,又要再来一遍。
作为程序猿,我们不应该放弃任何一个偷懒的机会。
- 默认情况下,是图片在左,文字在右,垂直居中显示,如下图:
button.titleEdgeInsets = UIEdgeInsetsZero;
button.imageEdgeInsets = UIEdgeInsetsZero;

- 设置如下布局后,图片和文字都居中显示。
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width);

- 如果想图片在上,文字在下,水平居中显示,则按下面设置即可:
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width);

如果觉得图片和文字离的太近了,稍微分开一点:
CGFloat offset = 40.0f;
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height-offset/2, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height-offset/2, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size为0,用上面这样设置有问题,修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height-offset/2, 0, 0, -button.titleLabel.intrinsicContentSize.width);

- 文字左对齐,图片右对齐
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width - button.frame.size.width + button.titleLabel.intrinsicContentSize.width, 0, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.frame.size.width - button.frame.size.width + button.imageView.frame.size.width);

如何布局包含Image和Title的UIButton的更多相关文章
- 布局包含Image和Title的UIButton
UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局. 如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是 ...
- duilib各种布局的作用,相对布局与绝对布局的的意义与用法
大多数刚使用duilib的朋友时候非常依赖duilib自带的设计器,用他可以拖拉控件,可视化的做出自己想要的界面.可是用一段时间就会发现原带的设计器有很多bug,时不时会崩溃,支持的控件数量有限,属性 ...
- 【转】在Android布局中使用include和merge标签
内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...
- 深入浅出ExtJS 第六章 布局
6.1 布局的用途 6.1 布局的用途 //决定把什么东西放到什么位置; var vieport = new Ext.Viewport({ layout:'border', //使用Border ...
- 二,WPF的布局
所有WPF布局窗口都派生自System.WIndows.Controls.Panel抽象类的面板. 不能在布局容器中放置字符串内容,而是需要一个继承自UIElement的类对字符串进行包装,如Text ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- bootstrap栅格布局
<!DOCTYPE html> <html lang="en"> <head> <!-- //简介:boststrap内置了一套响应式,移 ...
- 学习 ExtJS 4 面板与布局
原文 http://www.cnblogs.com/codealone/archive/2013/06/04/3091325.html 面板Panel Ext.panel.Panel拓展自Ext.co ...
- Ext布局篇
EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.E ...
随机推荐
- Swift函数的定义
//: Playground - noun: a place where people can play import Cocoa //基本的函数 //************************ ...
- RedHat下Bugzilla的安装和配置
Bugzilla 是一个开源的缺陷跟踪系统(Bug-Tracking System). OS:RedHat Linux 软件类型:开源 架构:B/S server端模块开发语言:perl(c/c++) ...
- Missing (Mono Script), Missing Prefab
开始研究Google Cardboard SDK,下载了一份gvr-unity-sdk,用Unity打开里面的Samples: CastleDefense,导出XCode项目在iPhone上面运行,出 ...
- 改善C#程序,提高程序运行效率的50种方法
改善C#程序,提高程序运行效率的50种方法 转自:http://blog.sina.com.cn/s/blog_6f7a7fb501017p8a.html 一.用属性代替可访问的字段 1..NET ...
- FPGA 相同模块 VIVADO synthesis综合后
显示所用的LUT as Memory结果不一致可能是什么原因导致的?
- Ajax&Java
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML) 是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技 ...
- G:数字三角形
总时间限制: 1000ms 内存限制: 65536kB描述73 88 1 02 7 4 44 5 2 6 5 (图1) 图1给出了一个数字三角形.从三角形的顶部 ...
- 测试一下Word发布刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了。
刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了. 刚刚发现通过Word 可以直接发Blog 感觉很新奇,先看看,如果可以呢,将发通知的改了. ...
- 在windows 10中使用pip安装psutil 4.3.0
环境版本:windows + python 2.7/3.5共存 使用的python是使用exe安装的,默认已经有pip并确保PATH设置正确,默认安装psutil 4.3.0 1:使用cmd安装2.7 ...
- UIScrollView内容缩放
•有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对其内容进行缩放处理 也就是说,要完成缩放功能的话,只需要将需要缩放的内容添加到UIScr ...