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. Beta版总结会议

    一,设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的app要解决一个令人头痛但无人具体来实现的这一社会困扰现象.因为学生或者社会人士在参加竞 ...

  2. Linux PXE无盘工作站

    • 关于PXE无盘工作站系统的简介 PXE无盘工作站系统是指由一台或多台“系统服务器”和多台“PXE客户端(无盘工作站)”通过 交换机 相连组成的局域网系统. (图1:无盘工作站系统部署拓扑图) • ...

  3. AVPlayer

    AVPlayer     AVPlayerLayer是CALayer的一个子类,由于AVPlayer这个播放器只能安置在AVPlayerLayer 这个图层之上,所以我们需要实例化一个UIView,并 ...

  4. C语言位域

    转载自 http://tonybai.com/2013/05/21/talk-about-bitfield-in-c-again/ 再谈C语言位域 五 21 bigwhite技术志 bitfield, ...

  5. es6中的promise对象

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  6. Sicily 1151: 简单的马周游问题(DFS)

    这道题嘛,直接使用DFS搜索,然后莫名其妙地AC了.后来看了题解,说是move的顺序不同的话可能会导致超时,这时便需要剪枝,真是有趣.原来自己是误打误撞AC了,hhh.题解还有另一种解法是先把一条完整 ...

  7. gulp自动刷新和css、js压缩

    之前搭建过Grunt,但是用起来有点繁琐,后来有人跟我说gulp更多简单.所以今天又搭建一个gulp.在使用gulp前应该有nodeJs环境,安装完nodejs后,就可以开始gulp的搭建了. 先新建 ...

  8. BZOJ 2160: 拉拉队排练

    Description 问长度前 \(k\) 大的奇长度回文子串的乘积. Sol Manacher. 直接马拉车跑一边,统计一下答案,每次将长度-2就可以了. Code /************** ...

  9. oracle 学习笔记(四)

    1. SQL(高级查询) 1.1. 子查询 1.1.1. 子查询在WHERE子句中 在SELECT查询中,在WHERE查询条件中的限制条件不是一个确定的值,而是来自于另外一个查询的结果.为了给查询提供 ...

  10. 图片根据需要突出div

    1.当代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...