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. hub config

    @echo off title Selenium_Hub cd /d %~dp0 java -jar selenium-server-standalone-2.48.2.jar -role hub - ...

  2. 【OS】分页和分段

    在网上找到了一个比较形象的比喻   打个比方,比如说你去听课,带了一个纸质笔记本做笔记.笔记本有100张纸,课程有语文.数学.英语三门,对于这个笔记本的使用,为了便于以后复习方便,你可以有两种选择. ...

  3. CSS3--box-shadow

    box-shadow:属性向框添加一个或多个阴影: 语法:box-shadow:h-shadow v-shadow blur pread color inset; h-shadow:必需,水平阴影的位 ...

  4. C#基础

    .net/dotnet:一般指.NetFramework框架,一种平台,一种技术. c#(sharp):一种编程语言,可以开发基于.net平台的应用. Java:是一种技术,又是一门语言: .net应 ...

  5. mysql 重置root密码

    最近又项目用到mysql 由于电脑上mysql是很久以前安装的root密码忘记了, 百度一下重置密码 Windows: 1.以系统管理员登陆: 2.停止MySQL服务: 3.进入CMD,进入MySQL ...

  6. eclipse导入外部jar包

    首先在项目下创建一个文件夹,保存我们的jar包. 在项目名上右击,依次点击[New]-->[Floder],打开新建文件夹窗口输入文件夹名称[lib],点击[ok].我们通常在lib文件夹中存放 ...

  7. sql数据库获取表名称和表列名

    select * from sysobjects where xtype='u' SELECT COLUMN_NAME,DATA_TYPE FROM INFORMATION_SCHEMA.column ...

  8. Hibernate实体关系映射(OneToMany单边)——完整实例

    单边一对多关系:电子邮件管理 单边一对多关系:指一方有集合属性,包含多个多方,而多的一方没有一方的引用. 比如:用户(一)与电子邮件(多).一个用户可以有多个电子邮件记录. 目的:通过OneToMan ...

  9. 获取数据库表详细信息、存储过程、视图、的sql

    select s.[name] + '.' + t.[name] as tablename from sys.tables as t,sys.schemas as s where t.schema_i ...

  10. Add listitem with javascript 分类: Sharepoint 2015-07-16 20:23 4人阅读 评论(0) 收藏

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createListItem);//makes sure sp.js is loaded and the ...