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这些参数时都是不停的尝试得到的结果。目前这是我理解后,代码实现最后的答案,希望可以帮到大家。

5分钟 搞定UIButton的文本与图片的布局的更多相关文章

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

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

  2. IOS-UIButton的文本与图片的布局

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

  3. JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  4. 五分钟搞定Go.js

    五分钟搞定Go.js  1.基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库,所以需要确保您的页面声明它是一个HTML5文档,当然需要加载库 <!DOCTYPE ...

  5. 一分钟搞定AlloyTouch图片轮播

      一分钟搞定AlloyTouch图片轮播 轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,A ...

  6. Spring Boot 返回 XML 数据,一分钟搞定!

    Spring Boot 返回 XML 数据,前提必须已经搭建了 Spring Boot 项目,所以这一块代码就不贴了,可以点击查看之前分享的 Spring Boot 返回 JSON 数据,一分钟搞定! ...

  7. zookeeper-架构设计与角色分工-《每日五分钟搞定大数据》

    本篇文章阅读时间5分钟左右 点击看<每日五分钟搞定大数据>完整思维导图   zookeeper作为一个分布式协调系统,很多组件都会依赖它,那么此时它的可用性就非常重要了,那么保证可用性的同 ...

  8. zookeeper核心-zab协议-《每日五分钟搞定大数据》

    上篇文章<paxos与一致性>说到zab是在paxos的基础上做了重要的改造,解决了一系列的问题,这一篇我们就来说下这个zab. zab协议的全称是ZooKeeper Atomic Bro ...

  9. windows+mysql集群搭建-三分钟搞定集群

    注:本文来源:  陈晓婵   <  windows+mysql集群搭建-三分钟搞定集群   > 一:mysql集群搭建教程-基础篇 计算机一级考试系统要用集群,目标是把集群搭建起来,保证一 ...

随机推荐

  1. Innodb 锁系列2 事务锁

    上一篇介绍了Innodb的同步机制锁:Innodb锁系列1 这一篇介绍一下Innodb的事务锁,只所以称为事务锁,是因为Innodb为实现事务的ACID特性,而添加的表锁或者行级锁. 这一部分分两篇来 ...

  2. 完全用xml实现imageview点击换一张图片

    <ImageView android:layout_width="60dp" android:layout_height="60dp" android:b ...

  3. webstorm使用教程--主题设置

    1. 代码字体设置 :注意需要另存为 Scheme name一个才可以修改Editor Font. 字体设置:Editor->Color & Fonts->Font 2. 界面字体 ...

  4. 【持续更新】D3 的学习资料

    经常有朋友问哪里有关于 D3 的比较好的学习资料,现整理成此文.以后找到更多更好的,会不断更新本文. 我是在2013年开始接触 D3 的,当时就觉得这个工具很好玩.至今,学习资料整理了不少.如果有朋友 ...

  5. Java泛型类与类型擦除

    转载自:http://blog.csdn.net/lonelyroamer/article/details/7868820 一.Java泛型的实现方法:类型擦除 前面已经说了,Java的泛型是伪泛型. ...

  6. dataguard 日志传输服务

    1.日志传输可以分为 lgwr和ARCH,默认是arch,其中lgwr传输可以分为async和syncsync:同步服务,只有在事物参数的日志成功的传输到备库的目的地,事物才能提交.虽然同步服务没有限 ...

  7. MYSQL select时锁定记录问题

    在使用SQL时,大都会遇到这样的问题,你Update一条记录时,需要通过Select来检索出其值或条件,然后在通过这个值来执行修改操作. 但当以上操作放到多线程中并发处理时会出现问题:某线程selec ...

  8. 什么是MBeanServer

    什么是MBeanServer MBeanServer是一个包含所有注册MBean的仓库.它是JMX代理层的核心.JMX1.0规范提供一个接口叫 javax.management.MBeanServer ...

  9. HDU 5624 KK's Reconstruction 最小生成树

    题意:这是bc round 71 div 1 的 1004 直接去看中文题意 分析: 首先,一种合法方案对应了原图的一棵生成树. 我们知道,最小生成树有一个性质是最大边最小. 因此,我们可以枚举生成树 ...

  10. Linux Oracle碰到错误:ORA-27101: shared memory realm does not exist

    从ITPUB上摘抄并已验证 1.实例没有启动 sqlplus /nologconnect / as sysdbastartup