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的更多相关文章

  1. 布局包含Image和Title的UIButton

    UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局. 如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是 ...

  2. duilib各种布局的作用,相对布局与绝对布局的的意义与用法

    大多数刚使用duilib的朋友时候非常依赖duilib自带的设计器,用他可以拖拉控件,可视化的做出自己想要的界面.可是用一段时间就会发现原带的设计器有很多bug,时不时会崩溃,支持的控件数量有限,属性 ...

  3. 【转】在Android布局中使用include和merge标签

    内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...

  4. 深入浅出ExtJS 第六章 布局

       6.1 布局的用途 6.1 布局的用途 //决定把什么东西放到什么位置; var vieport = new Ext.Viewport({ layout:'border', //使用Border ...

  5. 二,WPF的布局

    所有WPF布局窗口都派生自System.WIndows.Controls.Panel抽象类的面板. 不能在布局容器中放置字符串内容,而是需要一个继承自UIElement的类对字符串进行包装,如Text ...

  6. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  7. bootstrap栅格布局

    <!DOCTYPE html> <html lang="en"> <head> <!-- //简介:boststrap内置了一套响应式,移 ...

  8. 学习 ExtJS 4 面板与布局

    原文 http://www.cnblogs.com/codealone/archive/2013/06/04/3091325.html 面板Panel Ext.panel.Panel拓展自Ext.co ...

  9. Ext布局篇

      EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.E ...

随机推荐

  1. Apache Commons Collections

    http://commons.apache.org/proper/commons-collections/userguide.html 1. Utilities SetUtils Collection ...

  2. 【oracle】 oracle学习笔记1--安装与登录

    由于机器配置原因,加上也是自学,所以就没必要安装专业版的oracle,于是就安装的oracle xe版本 下载地址:http://www.oracle.com/technetwork/database ...

  3. 根据大小生成对应尺寸网络图片的网址(mark)

    当开发程序时,需要用到一些临时图片替代时,需要快速生成的话,以下的几个网址可提供帮助.mark一下,方便以后使用. http://lorempixel.com/http://placehold.it/ ...

  4. Java主函数定义

    public static void main(String[] args){} public: main主方法是由jvm来调用的,jvm实际也是一个程序,为了保证jvm能够在任何情况下来调用主函数. ...

  5. 转载:ViewHolder为什么声明为static

    转自:http://www.cnblogs.com/bluestorm/p/5867061.html ListView优化中ViewHolder要不要定义为static静态内部类?   给学生讲课的时 ...

  6. PHP5.3.3+Apache2.2.16+MySQL5.1.49

    轻松配置PHP5.3.3+Apache2.2.16+MySQL5.1.49,下面是有详细的步骤说明.   第一步:下载安装的文件 1. MySQL:下载地址mysql-5.1.49-win32.msi ...

  7. thinkPHP的用法之M

    M方法 //添加 $res = M('comment')->add($data); //成功返回新增ID,失败返回false //删除 M('myop_myinvite')->where( ...

  8. gulp教程之gulp-uglify

    简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1. ...

  9. php知识案列1

    用PHP,在1-20间随机产生5个不重复的值,如何做 复制代码 代码如下: <?php function NoRand($begin=0,$end=20,$limit=5){ $rand_arr ...

  10. 虚拟机解决Device eth0 does not seem to be present 问题。

    Device eth0 does not seem to be present... 出现这个问题基本上是因为虚拟机是克隆的导致机器的mac网卡不一致,所以系统识别网卡失败: