前言:在移动 APP 的设计中,我们会经常看到同时带有图片和文字的按钮,这些按钮在 UI 设计师眼中,可能不值一提,但是在 iOS 开发中,由于 Apple 的 SDK 的局限性,实现起来却并不那么愉快。

关键字UIButton,按钮,图文按钮,图片和文字的位置
相关源码地址:ButtonLayoutDemo

目录

  • 需求
  • 现实
  • 问题
  • 解决方案
  • 小结
  • 延伸阅读

一、需求

根据以往的经验来看,我们常见的图文按钮样式一般是以下几种的组合:

  • 图文布局
    • 上图下文
    • 上文下图
    • 左图右文
    • 右图左文
  • 对齐方式
    • 居左
    • 居右
    • 居中
    • 居上
    • 居下
  • 对图片做圆角处理

上图下文(图片带圆角).png

上图下文(整体靠底部对齐).png

上文下图(整体靠底部对齐).png

系统默认支持的左图右文(整体居中).png

左文右图.png

二、现实

然而,Cocoa Touch 框架中的 UIButton 只支持左图右文的布局方式,而且还不能直接设置图文间距。

代码如下:

1
2
3
4
5
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 50, 50, 30)];
[button setTitle:@"title" forState:UIControlStateNormal];
[button setImage:icon forState:UIControlStateNormal];
button.contentVerticalAlignment = UIControlContentHorizontalAlignmentCenter;
[self addSubview:button];

效果如下:
系统默认支持的左图右文(整体居中).png

三、问题

所以,我们首先要解决的问题是,怎样才能轻松加愉快地实现:

  • 图文布局(可设置图文间距)
  • 对齐方式

我们所期望的是,只需要简单地设置两个属性就能实现想要的效果:

1
2
3

button.interTitleImageSpacing = 4;
button.imagePosition = UIButtonImagePositionRight;

四、解决方案

我们先来看看 UIButton 的 API ,发现跟内容布局相关的有这些:

1
2
3
4
5
6
7
8
9
10
11
@interface UIButton : UIControl
...
@property(nonatomic) UIEdgeInsets contentEdgeInsets; // 用来调整按钮整体内容区域的位置和尺寸
@property(nonatomic) UIEdgeInsets titleEdgeInsets; // 用来调整按钮文字区域的位置和尺寸
@property(nonatomic) UIEdgeInsets imageEdgeInsets; // 用来调整按钮图片区域的位置和尺寸

- (CGRect)contentRectForBounds:(CGRect)bounds; // 用来计算按钮整体内容区域的大小和位置
- (CGRect)titleRectForContentRect:(CGRect)contentRect; // 用来计算按钮文字区域的大小和位置
- (CGRect)imageRectForContentRect:(CGRect)contentRect; // 用来计算按钮图片区域的大小和位置
...
@end

UIButton 继承于 UIControl,再来看看 UIControl 中的跟布局相关的 API:

1
2
@property(nonatomic) UIControlContentVerticalAlignment contentVerticalAlignment;     // 设置内容在竖直方向的对齐方式
@property(nonatomic) UIControlContentHorizontalAlignment contentHorizontalAlignment; // 设置内容在水平方向的对齐方式

UIControl 继承于 UIViewUIView 是所有视图控件的根类,UIView 中的跟布局相关的 API 有:

1
2
3
4
5
// 手动触发 layout 的两个方法,其中 - layoutIfNeeded 会强制 layout
- (void)setNeedsLayout;
- (void)layoutIfNeeded;

- (void)layoutSubviews; // layout 时该方法会被调用,调用 -layoutIfNeeded 方法会自动触发这个方法

找来找去,就是系统提供给我们的就是这些工具了,看菜下饭吧。

方案一:设置 titleEdgeInsets 属性和 imageEdgeInsets 属性的值

如果你想要直接看最终实现的代码,请戳这里UIButton+Layout.m

titleEdgeInsets :用来调整按钮文字区域的位置和尺寸。
imageEdgeInsets:用来调整按钮图片区域的位置和尺寸。

titleEdgeInsetsimageEdgeInsets 这两个属性都是 UIEdgeInsets 类型,UIEdgeInsets 类型有四个成员变量 topleftbottomright,分别表示上左下右四个方向的偏移量,正值代表往内缩进,也就是往按钮中心靠拢,负值代表往外扩张,就是往按钮边缘贴近。

1
2
3
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;

具体怎么用呢?
要点:

  • 系统默认的布局是内容整体居中,图片在左,文字在右,图片和文字间距为 0。
  • 不论是 titleEdgeInsets,还是 imageEdgeInsets,只设置一个方向的偏移量 A 时,实际效果得到的偏移量是 A / 2。比如想通过
    button.titleEdgeInsets = UIEdgeInsetsMake(0, 2, 0, 0); 设置按钮标题往右偏移 2 pt, 实际上得到的效果是按钮文字只往右偏移了 1 pt。

知道以上两个要点之后,我们就可以开始干活了,如果要想通过设置 titleEdgeInsetsimageEdgeInsets 来达到我们的要求,该怎么做呢?

1. 左图右文

1
2
3
4
5
6
7
8
9
// 目标图文间距
CGFloat interImageTitleSpacing = 5;
// 获取默认的图片文字间距
CGFloat originalSpacing = button.titleLabel.frame.origin.x - (button.imageView.frame.origin.x + button.imageView.frame.size.width);
// 调整文字的位置
button.titleEdgeInsets = UIEdgeInsetsMake(0,
-(originalSpacing - interImageTitleSpacing),
0,
(originalSpacing - interImageTitleSpacing));

2. 左文右图

1
2
3
4
5
6
7
8
9
10
11
12
// 目标图文间距
CGFloat interImageTitleSpacing = 5;
// 图片右移
button.imageEdgeInsets = UIEdgeInsetsMake(0,
button.titleLabel.frame.size.width + interImageTitleSpacing,
0,
-(button.titleLabel.frame.size.width + interImageTitleSpacing));
// 文字左移
button.titleEdgeInsets = UIEdgeInsetsMake(0,
-(button.titleLabel.frame.origin.x - button.imageView.frame.origin.x),
0,
button.titleLabel.frame.origin.x - button.imageView.frame.origin.x);

3.上图下文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 目标图文间距
CGFloat interImageTitleSpacing = 5;

// 图片上移,右移
button.imageEdgeInsets = UIEdgeInsetsMake(0,
0,
button.titleLabel.frame.size.height + interImageTitleSpacing,
-(button.titleLabel.frame.size.width));

// 文字下移,左移
button.titleEdgeInsets = UIEdgeInsetsMake(button.imageView.frame.size.height + interImageTitleSpacing,
-(button.imageView.frame.size.width),
0,
0);

4.上文下图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 目标图文间距
CGFloat interImageTitleSpacing = 5;

// 图片下移,右移
button.imageEdgeInsets = UIEdgeInsetsMake(button.titleLabel.frame.size.height + interImageTitleSpacing,
0,
0,
-(button.titleLabel.frame.size.width));

// 文字上移,左移
button.titleEdgeInsets = UIEdgeInsetsMake(0,
-(button.imageView.frame.size.width),
button.imageView.frame.size.height + interImageTitleSpacing,
0);

注意: 实际上,直接按照上面这么写是不行的,因为设置 titleEdgeInsetsimageEdgeInsets 属性时,button 的 titleLabelimageView 的 frame 还没有真正计算好,所以这个时候获取到的 frame 是不准确的,要想拿到布局好的 titleLabelimageView 的 frame ,我们需要先调用 - layoutIfNeeded 方法。

1
2
3
[button layoutIfNeeded];
// 然后设置 button 的 titleEdgeInsets 和 imageEdgeInsets
// ...

优雅的实现方式:直接在创建 button 的地方去调用 layoutIfNeeded 进行布局,再去计算 titleEdgeInsetsimageEdgeInsets,并不是一个好的做法,比较推荐的做法是,写一个 category 或者 自定义一个 UIButton 的子类,来实现上面的计算,并提供图片文字的布局样式和图文间距的接口。

接口应该长得像这样:

1
2
3
4
5
6
7
8
9
10
11
12
typedef NS_ENUM(NSInteger, SCButtonLayoutStyle) {
SCButtonLayoutStyleImageLeft,
SCButtonLayoutStyleImageRight,
SCButtonLayoutStyleImageTop,
SCButtonLayoutStyleImageBottom,
};

@interface UIButton (Layout)

- (void)sc_setLayoutStyle:(SCButtonLayoutStyle)style spacing:(CGFloat)spacing;

@end

使用起来应该像这样:

1
2
3
button.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;  // 竖直方向整体居上
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter; // 水平方向整体居中
[button sc_setLayoutStyle:SCButtonLayoutStyleImageBottom spacing:20]; // 图片在底部,图文间距 20 pt

具体的代码实现见 UIButton+Layout.m

方案二:自定义一个 UIButton 的子类,重写以下两个方法:

1
2
- (CGRect)titleRectForContentRect:(CGRect)contentRect;   // 设置文字区域的位置和大小
- (CGRect)imageRectForContentRect:(CGRect)contentRect; // 设置图片区域的位置和大小

使用这两个方法可以直接指定 titleLabelimageView 的大小和位置,参数 contentRect 是由 -contentRectForBounds: 方法返回值决定的,如果该方法没有被重写,contentRect 就跟 bounds 的值是一样的。

使用案例:
例如我们要实现一个上图下文、整体靠顶部对齐、图文间距 20pt 的图案:

上图下文(整体靠顶部对齐).png

我们先自定义一个 UIButton 的子类,实现 -titleRectForContentRect:-imageRectForContentRect: 方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@interface CustomButton : UIButton

@property (assign, nonatomic) CGFloat interTitleImageSpacing; ///< 图片文字间距


@end

@implementation CustomButton


- (CGRect)titleRectForContentRect:(CGRect)contentRect {

CGSize titleSize = CGSizeMake(contentRect.size.width, 25);

CGRect imageFrame = [self imageRectForContentRect:contentRect];

return CGRectMake((contentRect.size.width - titleSize.width) * 0.5,
imageFrame.origin.y + imageFrame.size.height + self.interTitleImageSpacing,
titleSize.width,
titleSize.height);
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect {

CGSize imageSize = CGSizeMake(25, 24);

return CGRectMake((contentRect.size.width - imageSize.width) * 0.5, 0, imageSize.width, imageSize.height);
}

@end

然后再在外面使用定义好的 CustomButton,然后就得到上图中的效果了:

1
2
3
4
5
6
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 75, 75)];
[button setImage:[UIImage imageNamed:@"like"] forState:UIControlStateNormal];
[button setTitle:@"title" forState:UIControlStateNormal];
button.interTitleImageSpacing = 20;
button.titleLabel.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:button];

注意:但是,在这两个方法中不能使用 self.titleLabelself. imageView,否则会出现无限递归,造成死循环。也就是说这里面的尺寸和位置计算,都是基于 contentRect 参数的独立逻辑,所以一般只在我们知道图片和文字的具体参数后才会这样做,所以,这种方式使用起来并不灵活。

方案三:自定义一个 UIButton 的子类,重写 layoutSubviews 计算位置

这个方案的启发来源于腾讯 QMUI 团队开源的 QMUIKit,其主要思想是,所有的 view 在布局时都会调用 -layoutSubviews 方法,你只要告诉我整体内容对齐方式是如何,图文布局什么样,图文间距多大,我就可以在 -layoutSubviews 方法中帮你全部算好。

这种方式的好处在于可控性好,直接对 titleLabelimageView 的 frame 进行操作,不用担心系统实现会不会改动,其次,由于是直接操作 frame,计算起来就比较直观简单,不用像使用titleEdgeInsetsimageEdgeInsets 那样把 titleLabelimageView 挪来挪去。唯一不太好的地方在于计算量比较多,光计算布局就写了差不多 150 行代码。

因为 QMUIKit 中的 QMUIButton 太过于庞杂,其中有很多我们并不需要的功能,维护起来也复杂,所以我针对我们自己项目的需求实现了一个更简洁的 SCCustomButton,主要支持以下功能:

  • 设置图文布局方式
  • 设置图文间距
  • 设置图片圆角大小
  • 设置内容整体对齐方式

这是 SCCustomButton 提供的接口:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/// 图片和文字的相对位置
typedef NS_ENUM(NSInteger, SCCustomButtonImagePosition) {
SCCustomButtonImagePositionTop, // 图片在文字顶部
SCCustomButtonImagePositionLeft, // 图片在文字左侧
SCCustomButtonImagePositionBottom, // 图片在文字底部
SCCustomButtonImagePositionRight // 图片在文字右侧
};

/**
自定义按钮,可控制图片文字间距

使用方法:
@code
SCCustomButton *button = [[SCCustomButton alloc] initWithFrame:CGRectMake(50, 50, 50, 30)];
button.imagePosition = SCCustomButtonImagePositionLeft; // 图文布局方式
button.interTitleImageSpacing = 5; // 图文间距
button.imageCornerRadius = 15; // 图片圆角半径
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter; // 内容对齐方式
[self addSubview:button];
@endcode
*/
@interface SCCustomButton : UIButton

@property (assign, nonatomic) CGFloat interTitleImageSpacing; ///< 图片文字间距
@property (assign, nonatomic) SCCustomButtonImagePosition imagePosition; ///< 图片和文字的相对位置
@property (assign, nonatomic) CGFloat imageCornerRadius; ///< 图片圆角半径

@end

使用起来也非常简单,正好符合我们期望的效果:

1
2
3
4
5
6
SCCustomButton *button = [[SCCustomButton alloc] initWithFrame:CGRectMake(50, 50, 50, 30)];
button.imagePosition = SCCustomButtonImagePositionLeft; // 图文布局方式
button.interTitleImageSpacing = 5; // 图文间距
button.imageCornerRadius = 15; // 图片圆角半径
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter; // 内容对齐方式
[self addSubview:button];

另辟蹊径:自定义一个 UIView 或者 UIControl 的子类,实现所要求的样式

当然也可以不使用 UIButton,自己去实现一个继承于 UIView 或者 UIControl 的子类,这是完全可以满足我们所要求的样式的,但是这样就需要自己添加和管理 imageView 和 label,并实现一些 UIButton 的功能(比如点击按钮时的高亮效果),显然是比前面提到的几种方式更复杂,成本也更高。

五、小结

以上几种调整 UIButton 的文字和图片位置的方法,都有各自的优缺点,综合起来看,方案三的自由度更高,可控性更好,也易于维护,使用起来更是轻松加愉快。

六、延伸阅读