如何布局包含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);

时间: 2024-10-19 11:18:09

如何布局包含Image和Title的UIButton的相关文章

布局包含Image和Title的UIButton

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

清除浮动——让包围元素包含浮动元素的四种方法

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 有一段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta

深入浅出ExtJS 第六章 布局

1 6.1 布局的用途 2 //决定把什么东西放到什么位置; 3 var vieport = new Ext.Viewport({ 4 layout:'border', //使用BorderLayout的布局方式(边界布局);可以自动检测浏览器的大小变化和自动调整布局中每个部分的大小; 5 items:[{ 6 region:'north', //指定组件的具体位置; 7 height:40, 8 html:'<h1>顶部</h1>' 9 },{ 10 region:'west',

[译]Polymer官方文档-布局元素

原文链接: Layout elements(注:有时需翻墙或换hosts)翻译日期: 2014年8月2日翻译人员: 铁锚 译注: 点击下载本教程的示例代码: Polymer布局元素Demo相关的代码文件在 layout 目录下. 0. 准备- Chrome浏览器模拟移动设备Chrome浏览器(要求最新版,如34以上版本)模拟移动设备的方法: 打开一个标签页,按 F12,(或者在页面空白区域点鼠标右键,审查元素),打开调试窗口. 然后在将光标移动到调试窗口中, 按 ESC键,或者点击右上角的 dr

Ext布局篇

  EXT标准布局类 收藏 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:     ContainerLayout(容器布局)     FitLayout(自适应布局)     AccordionLayout(折叠布局)     CardLayout(卡片式布局)     AnchorLayout(锚点布局)

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

内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多的布局是相同的,这个时候我们可以通过<include/>和<merge/>标签实现将复杂的布局包含在需要的布局中,减少重复代码的编写. 1. 创建一个可以重复使用的布局: 如下代码描述在应用中每个acitivity都出现的顶栏titlebar.xml 1 <FrameLayout

ExtJS 页面布局

EXT标准布局类 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:     ContainerLayout(容器布局)     FitLayout(自适应布局)     AccordionLayout(折叠布局)     CardLayout(卡片式布局)     AnchorLayout(锚点布局)    

EXTJS常用布局详解

ExtJS的容器组件都可以通过设置layout参数来选择布局改变显示风格, 它的有效值有: absolute:控制位置,accordion:手风琴布局,anchor:控制大小,border:边界式布局,card:卡片布局,column:列布局,fit:填充式布局,form:表单布局,table:表格式布局 一共9种,在这里简单总结一下 absolute:Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用 accordion:accordion布局也称手风琴布局,在accordio

布局 - 嵌套

以面板为"画布",嵌套三层layout制作复杂的布局 <div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;"> <div class="