IOS 开发之自定义按钮实现文字图片位置随意定制

可能有些看到这篇文章的朋友会觉得很不屑：“按钮谁不会自定义？还需要看你的？” 也确实，按钮是我们项目中最常见的控件之一，天天在使用。对于不同类型的按钮，我们是否有更加简便的方法来实现需求是我们需要做的。这里我提出自己的两种方法，您可以对你自己平时自定义按钮的方法做一下对比，看看哪种方法更加简单。

多说一句，千万不要觉得知识简单，觉得自己会了，没必要学习。'往往简单的东西存在大智慧'(这个比给满分)，知识都是慢慢积累出来的。

按钮是应用中最常见的,最基本的一个控件。按钮的样式多种多样，系统默认样式为左右结构，图片在左边，文字在右边。系统按钮完全无法满足开发的需求，我们只能自己定制出想要的样式。既包含文字又包含图片的按钮有下面四种样式：

• 图片在上，文字在下
• 图片在左，文字在右
• 图片在下，文字在上
• 图片在右，文字在左

我们都知道，在按钮中可以通过设置图片和文字的内边距(UIEdgeInsetsMake)来改变图片和文字的位置来满足我们的需求。当然这只是其中一个方法。还有一种方法是使用继承，创建一个类继承自UIButton，通过重写layoutSubviews方法，来改变按钮内部子控件的位置，从而达到我们的需求。 话不多说， 开整。

方法一：通过分类的方式实现

新建一个UIButton的分类，下面是具体声明和实现

#import <UIKit/UIKit.h>
// 定义一个枚举（包含了四种类型的button）
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
  MKButtonEdgeInsetsStyleTop, // image在上，label在下
  MKButtonEdgeInsetsStyleLeft, // image在左，label在右
  MKButtonEdgeInsetsStyleBottom, // image在下，label在上
  MKButtonEdgeInsetsStyleRight // image在右，label在左
};

@interface UIButton (ImageTitleSpacing)

/**
 * 设置button的titleLabel和imageView的布局样式，及间距
 *
 * @param style titleLabel和imageView的布局样式
 * @param space titleLabel和imageView的间距
 */
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
            imageTitleSpace:(CGFloat)space;

@end

再来看看实现文件

#import "UIButton+ImageTitleSpacing.h"

@implementation UIButton (ImageTitleSpacing)

- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
            imageTitleSpace:(CGFloat)space {
  /**
   * 知识点：titleEdgeInsets是title相对于其上下左右的inset，跟tableView的contentInset是类似的，
   * 如果只有title，那它上下左右都是相对于button的，image也是一样；
   * 如果同时有image和label，那这时候image的上左下是相对于button，右边是相对于label的；title的上右下是相对于button，左边是相对于image的。
   */

  // 1. 得到imageView和titleLabel的宽、高
  CGFloat imageWith = self.imageView.frame.size.width;
  CGFloat imageHeight = self.imageView.frame.size.height;

  CGFloat labelWidth = 0.0;
  CGFloat labelHeight = 0.0;
  if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
    // 由于iOS8中titleLabel的size为0，用下面的这种设置
    labelWidth = self.titleLabel.intrinsicContentSize.width;
    labelHeight = self.titleLabel.intrinsicContentSize.height;
  } else {
    labelWidth = self.titleLabel.frame.size.width;
    labelHeight = self.titleLabel.frame.size.height;
  }

  // 2. 声明全局的imageEdgeInsets和labelEdgeInsets
  UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
  UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;

  // 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值
   /**
    MKButtonEdgeInsetsStyleTop, // image在上，label在下
    MKButtonEdgeInsetsStyleLeft, // image在左，label在右
    MKButtonEdgeInsetsStyleBottom, // image在下，label在上
    MKButtonEdgeInsetsStyleRight // image在右，label在左
   */
  switch (style) {
    case MKButtonEdgeInsetsStyleTop:
    {
      imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
      labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
    }
      break;
    case MKButtonEdgeInsetsStyleLeft:
    {
      imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
      labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
    }
      break;
    case MKButtonEdgeInsetsStyleBottom:
    {
      imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
      labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
    }
      break;
    case MKButtonEdgeInsetsStyleRight:
    {
      imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
      labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
    }
      break;
    default:
      break;
  }

  // 4. 赋值
  self.titleEdgeInsets = labelEdgeInsets;
  self.imageEdgeInsets = imageEdgeInsets;
}

@end

使用方法：只需要新建一个分类将上面的代码拷贝，直接导入到需要使用的类中，调用方法就可以了，具体见下

// 导入头文件
#import "UIButton+ImageTitleSpacing.h"
// 我们随意创建一个按钮比如button，在设置完按钮的图片、标题和frame后，只需要加上如下代码：
[button layoutButtonWithEdgeInsetsStyle: 这里填样式 imageTitleSpace: 这里填写图片和文字的间距];

这样是不是很方便呢？

方法二：通过继承的方式实

新建一个继承自UIButton的类，重写layoutSubviews 方法，自己设置图片和文字的位置。

#import "TSSquareButton.h"

@implementation TSSquareButton

- (instancetype)initWithFrame:(CGRect)frame {
  if (self = [super initWithFrame:frame]) {
    // 设置图片的其他属性
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:12.0];
    [self setBackgroundColor:[UIColor whiteColor]];
    [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  }
  return self;
}

// 重写layoutSubviews方法，手动设置按钮子控件的位置
- (void)layoutSubviews {
  [super layoutSubviews];

  self.imageView.TS_width = self.TS_width * 0.4;
  self.imageView.TS_height = self.imageView.TS_width;
  self.imageView.TS_y = self.TS_height * 0.25;
  self.imageView.TS_centerX = self.TS_width * 0.5;

  self.titleLabel.TS_width = self.TS_width;
  self.titleLabel.TS_y = self.imageView.TS_buttom ;
  self.titleLabel.TS_height = 25;
  self.titleLabel.TS_x = 0;
}

@end

两种方式运行结果

总结：

至此，设置图片的两种方法就已经讲完了。对比一下：

第一种通过分类的方式设置按钮非常方便，只需要一行代码就足够了，不需要我们自己计算UIEngeInsetsMake，适用于纯代码创建的按钮。 如果是Xib创建的按钮就用不了了。

第二种通过继承的方式重写layoutSubviews的方式设置按钮好处是既适用于纯代码创建的按钮，也适用于Xib创建的按钮，但是这种方法有一定的局限性，它只适用于同一类型的按钮。一类比如我一个界面中有几种不同类型的按钮，这时候就需要我们创建不同的继承UIButton 的按钮类，在layoutSubviews设置不同的位置关系。这样就相对复杂了。

两种方法各有利弊，各位可以根据自己的实际情况来选择使用。当然设置按钮图片和文字的位置并不止这两种方法，还有其他更好的方法等着我们去发现。如果你有什么更好的建议，也可以联系我，我们一同探讨学习。

 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# IOS  # 自定义按钮  # 自定义按钮实例代码  # 自定义按钮详解及示例  # 详解iOS中Button按钮的状态和点击事件  # 关于iOS导航栏返回按钮问题的解决方法  # IOS UITableViewCell详解及按钮点击事件处理实例  # iOS开发中UISwitch按钮的使用方法简介  # 详解iOS应用中自定义UIBarButtonItem导航按钮的创建方法  # 详解iOS-按钮单选与多选逻辑处理  # iOS应用开发中导航栏按钮UIBarButtonItem的添加教程  # iOS App中UITableView左滑出现删除按钮及其cell的重用  # 学习iOS开关按钮UISwitch控件  # iOS实现悬浮按钮  # 在上  # 相对于  # 两种  # 适用于  # 重写  # 自己的  # 自定义  # 只需要  # 都是  # 新建一个  # 上下左右  # 四种  # 多说  # 最常见  # 创建一个  # 不同类型  # 这时候  # 有什么  # 如果你  # 一句 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  使用spring连接及操作mongodb3.0实例  🚀拖拽式CMS建站能否实现高效与个性化并存？  Laravel如何操作JSON类型的数据库字段？（Eloquent示例）  详解MySQL数据库的安装与密码配置  如何在宝塔面板中修改默认建站目录？  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  JS弹性运动实现方法分析  Edge浏览器怎么启用睡眠标签页_节省电脑内存占用优化技巧  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  LinuxCD持续部署教程_自动发布与回滚机制  公司门户网站制作流程,华为官网怎么做？  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  深圳网站制作培训,深圳哪些招聘网站比较好？  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  JavaScript中的标签模板是什么_它如何扩展字符串功能  创业网站制作流程,创业网站可靠吗？  Laravel怎么为数据库表字段添加索引以优化查询  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  北京的网站制作公司有哪些,哪个视频网站最好？  如何选择PHP开源工具快速搭建网站？  微信小程序 wx.uploadFile无法上传解决办法  太平洋网站制作公司,网络用语太平洋是什么意思？  图册素材网站设计制作软件,图册的导出方式有几种？  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  高防服务器租用指南：配置选择与快速部署攻略  详解Huffman编码算法之Java实现  如何用IIS7快速搭建并优化网站站点？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  Laravel如何使用Gate和Policy进行授权？（权限控制）  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  JavaScript数据类型有哪些_如何准确判断一个变量的类型  如何在万网利用已有域名快速建站？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  Mybatis 中的insertOrUpdate操作  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  Laravel如何实现用户密码重置功能？（完整流程代码）  JS碰撞运动实现方法详解  如何快速选择适合个人网站的云服务器配置？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  Bootstrap整体框架之JavaScript插件架构  做企业网站制作流程,企业网站制作基本流程有哪些？