UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢

其实很简单,今天总结下,目前主要用两种方式,一种就是重写按钮,另一种就是通过setTitleEdgeInsets和setImageEdgeInsets方法解决

下图是按钮默认情况下的图文布局

左边文本,右边图片
首先介绍重写按钮吧,新建一个按钮继承UIButton,

- (void)layoutSubviews
{    [super layoutSubviews];     
     CGRect imageRect = self.imageView.frame;
     imageRect.size = CGSizeMake(30, 30);    
     imageRect.origin.x = (self.frame.size.width - 30) ;    
     imageRect.origin.y = (self.frame.size.height  - 30)/2.0f;          
     CGRect titleRect = self.titleLabel.frame;       
     titleRect.origin.x = (self.frame.size.width - imageRect.size.width- titleRect.size.width);       
     titleRect.origin.y = (self.frame.size.height - titleRect.size.height)/2.0f;       
     self.imageView.frame = imageRect;    self.titleLabel.frame = titleRect; }

效果如下:

上面图片,下面文本
同样用重写按钮的方法

- (void)layoutSubviews{
    [super layoutSubviews];    CGRect imageRect = self.imageView.frame;     imageRect.size = CGSizeMake(30, 30);
    imageRect.origin.x = (self.frame.size.width - 30) * 0.5;
    imageRect.origin.y = self.frame.size.height * 0.5 - 40;    CGRect titleRect = self.titleLabel.frame;     titleRect.origin.x = (self.frame.size.width - titleRect.size.width) * 0.5;     titleRect.origin.y = self.frame.size.height * 0.5 ;    self.imageView.frame = imageRect;    self.titleLabel.frame = titleRect;
}

效果如下:
![屏幕快照 2016-05-30 10.23.11.png](//upload-images.jianshu.io/upload_images/616981-34430e2f6f66b344.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

另一种方法就是通过setTitleEdgeInsets和setImageEdgeInsets方法解决
这种方法的最大好处,就是不要在重写UIButton,直接在新建的UIButton中改变上面两个属性的值就可以达到我们想要的结果
左边文本右边图片
代码如下:

UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(50, 100, 80, 40);
    [btn1 setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
    [btn1 setTitle:@"首页" forState:UIControlStateNormal];
    [btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    btn1.backgroundColor = [UIColor redColor];    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(50, 50, 80, 40);
    [btn setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
    [btn setTitle:@"首页" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    btn.backgroundColor = [UIColor redColor];    //上左下右     btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.frame.size.width - btn.imageView.frame.origin.x - btn.imageView.frame.size.width, 0, 0);
    btn.titleEdgeInsets = UIEdgeInsetsMake(0, -(btn.frame.size.width - btn.imageView.frame.size.width ), 0, 0);
    [self.view addSubview:btn1];
    [self.view addSubview:btn];

完全颠倒的效果

上面图片下面文本
代码如下:

 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(50, 50, 80, 60);
    [btn setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
    [btn setTitle:@"首页的事" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    btn.backgroundColor = [UIColor redColor];     btn.imageEdgeInsets = UIEdgeInsetsMake(- (btn.frame.size.height - btn.titleLabel.frame.size.height- btn.titleLabel.frame.origin.y),(btn.frame.size.width -btn.titleLabel.frame.size.width)/2.0f -btn.imageView.frame.size.width, 0, 0);
    btn.titleEdgeInsets = UIEdgeInsetsMake(btn.frame.size.height-btn.imageView.frame.size.height-btn.imageView.frame.origin.y, -btn.imageView.frame.size.width, 0, 0);
    [self.view addSubview:btn];

效果图:

关于setTitleEdgeInsets和setImageEdgeInsets下面进行一些解释:
UIButton内有两个控件titleLabel和imageView,可以用来显示一个文本和图片,这里的图片区别于背景图片。给UIButton设置了title和image后,它们会图片在左边,文本在图片右边显示。它们两个做为一个整体依赖于button的contentHorizontalAlignment居左居右或居中显示。

显示格式区分:
1.当button.width < image.width时,只显示被压缩后的图片,图片是按照fillXY的方式压缩。
2.当button.width > image.width,且button.width < (image.width+text.width)时,图片正常显示,文本被压缩。
3.当button.width > (image.width+text.width)时,两者并列默认居中显示,可通过button的属性contentHorizontalAlignment改变对齐方式。

想改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。对titleLabel和imageView设置偏移是针对他当前的位置起作用的,并不是针对距离button边框的距离的。

typedefNS_ENUM(NSInteger, UIControlContentHorizontalAlignment) {
   UIControlContentHorizontalAlignmentCenter =0,//居中
   UIControlContentHorizontalAlignmentLeft   =1,//居左
   UIControlContentHorizontalAlignmentRight  =2,//居右
   UIControlContentHorizontalAlignmentFill   =3,//

想两改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。需要注意的是,对titleLabel和imageView设置偏移,是针对它当前的位置起作用的,并不是针对它距离button边框的距离的。感觉设置不设置UIControlContentHorizontalAlignmentCenter居中都没有影响,这个网上也找了些相关的信息,感觉都没有说到重点,我这里也没有完全理解透彻,之前都是在设置setTitleEdgeInsets和setImageEdgeInsets这些参数时都是不停的尝试得到的结果。目前这是我理解后,代码实现最后的答案,希望可以帮到大家。

文章转自 Migi000的简书

IOS-UIButton的文本与图片的布局的更多相关文章

  1. UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  2. 5分钟 搞定UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  3. iOS开发富文本制作 图片和文字/NSMutableParagraphStyle/NSMutableAttributedString

    /NSMutableParagraphStyle/NSMutableAttributedString 组合使 NSString * titlestr=@"日产GT-R"; NSMu ...

  4. iOS·UIButton如何文字在下图片在上

    创建子类继承自UIButton,在layoutSubviews方法中改变文字和图片的位置就可以了,同理,稍作改变,可以写出文字在上图片在下.本文只给出文字在下图片在上的代码 -(void)layout ...

  5. ios UIButton 选中后背景图片变化发灰问题

    UIButton的类型如果选择了System类型,那么设置背景图后,点击的效果是图片发灰,而不是默认的那种图片变淡黑色效果,需要用customer类型就好了.

  6. iOS UIButton 图片文字上下垂直布局 解决方案

    实现如图所示效果: 这是一个UIButton,需要改变image和title相对位置. 解决如下: //设置文字偏移:向下偏移图片高度+向左偏移图片宽度 (偏移量是根据[图片]大小来的,这点是关键)b ...

  7. iOS UIButton文字和图片间距随意调整

    代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...

  8. iOS View自定义窍门——UIButton实现上显示图片,下显示文字

    “UIButton实现上显示图片,下显示文字”这个需求相信大家在开发中都或多或少会遇见.比如自定义分享View的时候.当然,也可以封装一个item,上边imageView,下边一个label.但是既然 ...

  9. IOS UIButton用法详解

    这段代码动态的创建了一个UIButton,并且把相关常用的属性都列举了.希望对大家有用.   //这里创建一个圆角矩形的按钮UIButton *button1 = [UIButton buttonWi ...

随机推荐

  1. fork和multiprocessing

    多任务理解 单核cpu完成多个cpu的切换 时间片轮转 优先级调度 并发看上去一起执行 并行一起执行 调度算法 什么样的情况下用什么样的规则让谁去执行. 一般情况下电脑都是并发的 进程的创建-fork ...

  2. Linux系统——磁盘管理

    磁盘结构 (1)硬盘的物理结构 磁头:每面一个磁盘 盘片:硬盘有多个盘片,每个盘片2面 (2)硬盘的数据结构 扇区:盘片被分为多个扇形区域,每个扇形区存放512字节的数据 磁道:统一盘片不同半径的同心 ...

  3. JAVA中的反射机制 (转)

    反射,当时经常听他们说,自己也看过一些资料,也可能在设计模式中使用过,但是感觉对它没有一个较深入的了解,这次重新学习了一下,感觉还行吧! 一,先看一下反射的概念: 主要是指程序可以访问,检测和修改它本 ...

  4. Mybatis 一对一、一对多、多对多

    一对一返回resultType <!-- 查询订单关联查询用户信息 resultType --> <select id="findOrderCustom" res ...

  5. Spring AOP (事务管理)

    一.声明式事务管理的概括 声明式事务(declarative transaction management)是Spring提供的对程序事务管理的方式之一. Spring的声明式事务顾名思义就是采用声明 ...

  6. Druid学习之路 (一)Druid初识

    作者:Syn良子 出处:https://www.cnblogs.com/cssdongl/p/9588079.html 转载请注明出处 最近在学习和使用Druid.觉得一些章节有必要按照自己的理解翻译 ...

  7. DevOps简单介绍

    jenkins作为测试环境代码发布工具,sonar作为静态代码检查工具,idea作为开发工具,jira作为缺陷管理平台,upstream作为code review工具(正在研究).DevOps最近比较 ...

  8. ABP官方文档翻译 1.1 介绍

    介绍 介绍 快速示例 其他 启动模板 如何使用 介绍 我们通常会根据不同的需求来创建不同的应用程序.但是对于一些通用相似的结构总是一遍又一遍的实现,至少在某种程度上是这样的.常见的通用模块如授权.验证 ...

  9. 【Python】模块

    廖雪峰教程笔记. [使用模块有什么好处?] 1.使用模块可以避免函数名和变量名冲突. 2.大大提高了代码的可维护性. [使用模块的注意点] 1.每一个.py文件就是一个模块. 2.每一个包目录下面必须 ...

  10. Nginx 部署HTTPS

    Nginx 部署HTTPS 系统:Linux Centos 7.4 x64 软件:Nginx 1.12.2 注:需要阿里云申请本地域名与证书并添加下载到本地. 注:证书文件为 xxxx.pem 与 x ...