可能有些看到这篇文章的朋友会觉得很不屑：“按钮谁不会自定义？还需要看你的？” 也确实，按钮是我们项目中最常见的控件之一，天天在使用。对于不同类型的按钮，我们是否有更加简便的方法来实现需求是我们需要做的。这里我提出自己的两种方法，您可以对你自己平时自定义按钮的方法做一下对比，看看哪种方法更加简单。
多说一句，千万不要觉得知识简单，觉得自己会了，没必要学习。'往往简单的东西存在大智慧'(这个比给满分)，知识都是慢慢积累出来的。
按钮是应用中最常见的,最基本的一个控件。按钮的样式多种多样，系统默认样式为左右结构，图片在左边，文字在右边。系统按钮完全无法满足开发的需求，我们只能自己定制出想要的样式。既包含文字又包含图片的按钮有下面四种样式：
- 图片在上，文字在下
- 图片在左，文字在右
- 图片在下，文字在上
- 图片在右，文字在左
我们都知道，在按钮中可以通过设置图片和文字的内边距(uiedgeinsetsmake)来改变图片和文字的位置来满足我们的需求。当然这只是其中一个方法。还有一种方法是使用继承，创建一个类继承自uibutton，通过重写layoutsubviews方法，来改变按钮内部子控件的位置，从而达到我们的需求。 话不多说， 开整。
方法一：通过分类的方式实现
新建一个uibutton的分类，下面是具体声明和实现
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#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 |
再来看看实现文件
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
#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 |
使用方法：只需要新建一个分类将上面的代码拷贝，直接导入到需要使用的类中，调用方法就可以了，具体见下
|
1
2
3
4
|
// 导入头文件#import "uibutton+imagetitlespacing.h"// 我们随意创建一个按钮比如button，在设置完按钮的图片、标题和frame后，只需要加上如下代码：[button layoutbuttonwithedgeinsetsstyle: 这里填样式 imagetitlespace: 这里填写图片和文字的间距]; |
这样是不是很方便呢？
方法二：通过继承的方式实
新建一个继承自uibutton的类，重写layoutsubviews 方法，自己设置图片和文字的位置。
|
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
31
|
#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<br> |
两种方式运行结果
总结：
至此，设置图片的两种方法就已经讲完了。对比一下：
第一种通过分类的方式设置按钮非常方便，只需要一行代码就足够了，不需要我们自己计算uiengeinsetsmake，适用于纯代码创建的按钮。 如果是xib创建的按钮就用不了了。
第二种通过继承的方式重写layoutsubviews的方式设置按钮好处是既适用于纯代码创建的按钮，也适用于xib创建的按钮，但是这种方法有一定的局限性，它只适用于同一类型的按钮。一类比如我一个界面中有几种不同类型的按钮，这时候就需要我们创建不同的继承uibutton 的按钮类，在layoutsubviews设置不同的位置关系。这样就相对复杂了。
两种方法各有利弊，各位可以根据自己的实际情况来选择使用。当然设置按钮图片和文字的位置并不止这两种方法，还有其他更好的方法等着我们去发现。如果你有什么更好的建议，也可以联系我，我们一同探讨学习。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：http://www.open-open.com/lib/view/open1482115852677.html
