iOS开发：关于UIButton内部文字和图片的调整问题

在iOS开发过程中，想给一个控件设置图文并茂的效果，或者是UI设计的项目需求上面需要在一个控件上面即要添加图标又要设置标题，首先想到使用的控件就是UIButton，使用UIButton是最省时省力的一种选择。那么，本节就来说说怎么给UIButton设置图文并茂的效果。
项目开发中常常遇到个种需求情况：文字在左，图片在右；图片在左，文字在右；图片在上，文字在下等等。先举个例子，分享一下项目需求的效果图，具体如下所示：

   一、UIButton手动布局情况下设置左右对齐的图文并茂的设置
   首先来说手动设置坐标的情况下，UIButton的设置图标和标题的对齐方法。因为手动布局和自动布局的设置，UIButton的处理方法不一样，所以一定要区别清楚，不然就不能实现预期的效果，废话不多说，上代码，具体如下所示：
   1、首先初始化UIButton的代码：
   UIButton *leftBtn = [[UIButton alloc]initWithFrame:CGRectMake(40, 100, 150, 45)];
   [leftBtn setTitle:@“向左转” forState:UIControlStateNormal];
   UIImage *leftArrow = [UIImage imageNamed:@"left_arrow"];
   [leftBtn setImage:leftArrow forState:UIControlStateNormal];
   [self.view addSubview:leftBtn];
   效果如下图所示：

   2、对于设置UIButton内容的对齐（左右对齐）方法，这里是图标在左侧、标题在右侧的情况，具体属性，操作如下所示：
    leftBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft; //(官方API文档有六种效果，常用的就是居左、居中、居右，根据实际情况自行选择使用)
   效果如下图所示：

   3、UIButton图标在右侧、标题在左侧的情况
   上面那种情况只是简单的设置内容的左右对齐，如果需要对图片和文字的位置进行相互调换的话，把默认的图标在左、标题文字在右，修改为图标在右、标题文字在左，具体设置如下所示：
   UIButton *leftBtn = [[UIButton alloc]initWithFrame:CGRectMake(40, 100, 150, 45)];
[leftBtn setTitle:@“向右转” forState:UIControlStateNormal];
   UIImage *leftArrow = [UIImage imageNamed:@"left_arrow"];
   [leftBtn setImage:leftArrow forState:UIControlStateNormal];
   [self.view addSubview:leftBtn];
[leftBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -leftArrow.size.width, 0, leftArrow.size.width)];
[leftBtn setImageEdgeInsets:UIEdgeInsetsMake(0, leftBtn.titleLabel.bounds.size.width, 0, -leftBtn.titleLabel.bounds.size.width)];
[self.view addSubview:leftBtn];
   效果如下图所示：

   4、UIButton图标在上、标题在下的情况
   首先要获取图标和文字的高度，然后再设置图标左边收缩、右边扩展，标题左边扩展、右边收缩，具体代码如下所示：
   //需要先获取图片和文字的高度
CGFloat    space = 5;// 图片和文字的间距
   CGFloat    imageHeight = leftArrow.size.height;
CGFloat   titleHeight = [titleString sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14]}].height;

//图片左边收缩、右边扩展的距离是：(titleWidth + imageWidth) * 0.5 - imageWidth * 0.5 即是titleWidth * 0.5;
   //文字左边扩展、右边收缩的距离是：(titleWidth + imageWidth) * 0.5 - titleWidth * 0.5 即是imageWidth * 0.5;

   //按钮设置
   [leftBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -(imageWidth+space*0.5), 0, (imageWidth+space*0.5))];
   [leftBtn setImageEdgeInsets:UIEdgeInsetsMake(0, (titleWidth + space*0.5), 0, -(titleWidth + space*0.5))];

   二、UIButton自动布局情况下设置左右对齐的图文并茂的设置
   1、首先初始化UIButton的代码：
    UIButton *leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:leftBtn];
    leftBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
[leftBtn setTitle:@"向左转" forState:UIControlStateNormal];
[leftBtn addTarget:self action:@selector(leftBtnClick) forControlEvents:UIControlEventTouchUpInside];
UIImage *leftArrow = [UIImage imageNamed:@"left_arrow"];
[leftBtn setImage:leftArrow forState:UIControlStateNormal];
leftBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
leftBtn.backgroundColor = [UIColor whiteColor];
[leftBtn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateNormal];
leftBtn.layer.masksToBounds = YES;
leftBtn.layer.cornerRadius = 3;
leftBtn.layer.borderWidth = 1.0;
leftBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
[leftBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).offset(100);
make.left.equalTo(self.view).offset(20);
make.height.mas_equalTo(50); //设置高度，宽度自适应
}];
   设置按钮的左边图标、右边文字标题的方式，这种方式除了坐标设置不一样之外，其他设置和手动设置的方式一样。
   2、UIButton自动布局情况下设置图标在右侧、标题在左侧的方法
UIButton自动布局设置图标在右、标题在左，这种情况和手动布局的设置有区别，这也是自动布局和手动布局最大的不同之处，上面介绍的手动布局的设置图标在右、标题在左的方法，下面就来介绍一下自动布局的同种情况的设置方法。
leftBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:leftBtn];
[leftBtn setTitle:@"向右转" forState:UIControlStateNormal];
UIImage *leftArrow = [UIImage imageNamed:@“left_arrow"];
//自动布局需要手动获取文本长度
CGFloat titleWidth = [leftBtn.currentTitle sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]}].width;
[leftBtn setImage:rightArrow forState:UIControlStateNormal];
//主要是下面这两句设置
[leftBtn setTitleEdgeInsets:UIEdgeInsetsMake(0, -leftArrow.size.width, 0, leftArrow.size.width)];
[leftBtn setImageEdgeInsets:UIEdgeInsetsMake(0, titleWidth, 0, -titleWidth)];
leftBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
leftBtn.backgroundColor = [UIColor whiteColor];
[leftBtn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateNormal];
leftBtn.layer.masksToBounds = YES;
leftBtn.layer.cornerRadius = 3;
leftBtn.layer.borderWidth = 1.0;
leftBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
[leftBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).offset(100);
make.left.equalTo(self.view).offset(20);
make.height.mas_equalTo(50); //设置高度，宽度自适应
}];
   自动布局设置按钮标题和图标的情况，主要就是要首先获得到标题的长度，然后根据文字的长度来设置图标和文字之间的距离关系，这就是大概思路，然后根据具体的坐标和位置来设置图标在右、标题文字在左。

接着贴一下文章开头需求的效果图的实现效果，如下所示：

以上就是本章全部内容，欢迎关注三掌柜的微信公众号，欢迎关注！

iOS开发：关于UIButton内部文字和图片的调整问题

猜你喜欢