在小编整理过的文章ios项目基本框架搭建中，我们详细说明了如何对tabbaritem的图片属性以及文字属性进行一些自定义配置。但是，很多时候，我们需要修改tabbaritem的图片和文字属性之外，还需要自定义tabbaritem的位置，这样系统自带的tabbar的样式并不能满足我们的项目需求，所以我们需要对系统的uitabbar进行自定义，以达到我们的项目需求。例如新浪微博app的底部tab的item就无法用自带的tabbaritem进行实现，最中间那个【+】发布微博并不是用来切换tab的，而是在当前的页面上覆盖一个编辑发布页面，发布完成或者取消发布之后又回到之前的页面，并没有进行切换，这时候我们就需要对tabbar进行自定义，在最中间空出一个tabbar的空间进行布置这个【+】发布按钮。
我们的项目是仿写“百思不得姐”app的功能模块进行学习和提高，其tabbar的样式与微博的样式基本相似（如上图右边的图），最中间的tab按钮也是发帖功能，也是在直接当前的页面上覆盖一个编辑发布页面，发布完成或者取消发布之后又回到之前的页面，并没有进行切换。
解决方案
对于类似新浪微博和我们项目中这种情况有两种解决思路：
定义5个tabbaritem，然后在tabbar上添加一个与tabbaritem等大小的发布按钮在最中间，并添加点击事件，这样因为大小相等，所以新按钮完全覆盖了最中间的tabbaritem，最中间的tabbaritem的响应事件也会被屏蔽，因为按钮会先响应自定义tabbar，重写其 layoutsubviews 方法，将所有4个tabbaritem的布局和大小进行修改，将中间空出来，然后添加一个自定义的【发布】按钮，实现其点击事件即可 1 覆盖控件实现方案
这种方案的思路在上面已经说到了，就是先占一个位置，然后用一个按钮覆盖到其上面。主要缺点就是需要先申请一个位置和控制器来占位比较浪费，而且这种也只适用于各控件的大小是均匀的情况，当我们需求中每个tabbaritem的规格和尺寸不一样时，我们就无法使用这种方案实现。
有几点值得说明一下：
设置所有uitabbaritem的文字属性在上一篇文章ios项目——基本框架搭建中已经提到了，这里就不详细介绍了【发布】按钮的初始化应该使用单例模式进行创建，因为我们项目中只有一个【发布】按钮，所以使用单例模式更合理，本文采用懒加载的方式进行单例模式的创建在 viewwillappear: 中添加【发布】按钮 [self.tabbar addsubview:self.publishbutton]; 。至于为什么要在 viewwillappear: 中添加【发布】按钮而不是在 viewdidload 中添加？根本原因就是tabbaritem加载到tabbar上是在 viewdidload 之后执行的，后面在第2部分中有验证这一点， 在上一文章我们就说过，tabbarcontroller是在一创建控制器的时候就进行加载viewdidload。所以，如果添加【发布】按钮在viewdidload中会造成【发布】按钮在tabbar中是第一个添加的，这样会导致【发布】按钮会被tabbaritem覆盖了，这样我们就达到我们的目的。
|
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
74
75
|
#import "xmgtabbarcontroller.h"@interface xmgtabbarcontroller ()/** 中间的发布按钮 */@property (nonatomic, strong) uibutton *publishbutton;@end@implementation xmgtabbarcontroller#pragma mark - 初始化- (void)viewdidload { [super viewdidload]; /**** 设置所有uitabbaritem的文字属性 ****/ uitabbaritem *item = [uitabbaritem appearance]; // 普通状态下的文字属性 nsmutabledictionary *normalattrs = [nsmutabledictionary dictionary]; normalattrs[nsfontattributename] = [uifont systemfontofsize:14]; normalattrs[nsforegroundcolorattributename] = [uicolor graycolor]; [item settitletextattributes:normalattrs forstate:uicontrolstatenormal]; // 选中状态下的文字属性 nsmutabledictionary *selectedattrs = [nsmutabledictionary dictionary]; selectedattrs[nsforegroundcolorattributename] = [uicolor darkgraycolor]; [item settitletextattributes:normalattrs forstate:uicontrolstateselected]; /**** 添加子控制器 ****/ [self setuponechildviewcontroller:[[uitableviewcontroller alloc] init] title:@"精华" image:@"tabbar_essence_icon" selectedimage:@"tabbar_essence_click_icon"]; [self setuponechildviewcontroller:[[uitableviewcontroller alloc] init] title:@"新帖" image:@"tabbar_new_icon" selectedimage:@"tabbar_new_click_icon"]; // 中间用来占位的子控制器 [self setuponechildviewcontroller:[[uiviewcontroller alloc] init] title:nil image:nil selectedimage:nil]; [self setuponechildviewcontroller:[[uiviewcontroller alloc] init] title:@"关注" image:@"tabbar_friendtrends_icon" selectedimage:@"tabbar_friendtrends_click_icon"]; [self setuponechildviewcontroller:[[uitableviewcontroller alloc] init] title:@"我" image:@"tabbar_me_icon" selectedimage:@"tabbar_me_click_icon"];}/** * 为什么要在viewwillappear:方法中添加发布按钮? * 当viewwillappear:方法被调用的时候, tabbar内部已经添加了5个uitabbarbutton * 就可以实现一个效果 : [发布按钮]盖在其他uitabbarbutton上面 */- (void)viewwillappear:(bool)animated{ [super viewwillappear:animated]; /**** 增加一个发布按钮 ****/ [self.tabbar addsubview:self.publishbutton];}#pragma mark - 懒加载/** 发布按钮 */- (uibutton *)publishbutton{ if (!_publishbutton) { _publishbutton = [uibutton buttonwithtype:uibuttontypecustom]; _publishbutton.backgroundcolor = xmgrandomcolor; [_publishbutton setimage:[uiimage imagenamed:@"tabbar_publish_icon"] forstate:uicontrolstatenormal]; [_publishbutton setimage:[uiimage imagenamed:@"tabbar_publish_click_icon"] forstate:uicontrolstatehighlighted]; _publishbutton.frame = cgrectmake(0, 0, self.tabbar.frame.size.width / 5, self.tabbar.frame.size.height); _publishbutton.center = cgpointmake(self.tabbar.frame.size.width * 0.5, self.tabbar.frame.size.height * 0.5); [_publishbutton addtarget:self action:@selector(publishclick) forcontrolevents:uicontroleventtouchupinside]; } return _publishbutton;}#pragma mark - 监听/** * 发布按钮点击 */- (void)publishclick{ xmglogfunc xmgtestviewcontroller *test = [[xmgtestviewcontroller alloc] init]; [self presentviewcontroller:test animated:yes completion:nil];}@end |
2 自定义tabbar
自定义tabbar可以完全按照我们的需求来布局和配置tabbar中各子控件的属性和布局。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@interface xmgtabbarcontroller ()@end@implementation xmgtabbarcontroller#pragma mark - 初始化- (void)viewdidload { [super viewdidload]; /**** 设置所有uitabbaritem的文字属性 ****/ //省略 /**** 添加子控制器 ****/ [self setuponechildviewcontroller:[[uitableviewcontroller alloc] init] title:@"精华" image:@"tabbar_essence_icon" selectedimage:@"tabbar_essence_click_icon"]; [self setuponechildviewcontroller:[[uitableviewcontroller alloc] init] title:@"新帖" image:@"tabbar_new_icon" selectedimage:@"tabbar_new_click_icon"]; [self setuponechildviewcontroller:[[uiviewcontroller alloc] init] title:@"关注" image:@"tabbar_friendtrends_icon" selectedimage:@"tabbar_friendtrends_click_icon"]; [self setuponechildviewcontroller:[[uitableviewcontroller alloc] init] title:@"我" image:@"tabbar_me_icon" selectedimage:@"tabbar_me_click_icon"]; /**** 更换tabbar ****/ [self setvalue:[[xmgtabbar alloc] init] forkeypath:@"tabbar"];}@end |
下面的代码是我们自定义tabbar的.m文件的主要内容，主要是重写其 layoutsubviews 方法，在该方法中我们是将四个按钮的大小和布局进行了调整，然后在最中间添加一个【发布】按钮。同样的，也有几点需要注意的：
【发布】按钮的初始化还是和上面一样，应该采用单例模式进行初始化，具体就不展开；重写 layoutsubviews 方法时，应该先调用其父类的此方法 [super layoutsubviews]; ，这样可以先对tabbaritem进行布局，然后在此布局的基础上进行布局调整。调用父类布局方法的语句不能放在后面，更不能省略，因为此方法除了对tabbaritem进行布局之外还有很多其他的配置；通过 self.subviews 来获取当前的子控件，我们可以先进行打印了解当前子控件的类型和数量，然后进行适当的筛选出我们需要修改的控件进行布局，我们一般这里采用kvc的方法进行获取和修改，例如上面我们修改当前的tabbar [self setvalue:[[xmgtabbar alloc] init] forkeypath:@"tabbar"]; ，关于如何获取属性和成员变量可以参见：runtime获取属性和成员变量
|
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
|
#import "xmgtabbar.h"@interface xmgtabbar()/** 中间的发布按钮 */@property (nonatomic, weak) uibutton *publishbutton;@end@implementation xmgtabbar#pragma mark - 懒加载/** 发布按钮 */- (uibutton *)publishbutton{ if (!_publishbutton) { uibutton *publishbutton = [uibutton buttonwithtype:uibuttontypecustom]; publishbutton.backgroundcolor = xmgrandomcolor; [publishbutton setimage:[uiimage imagenamed:@"tabbar_publish_icon"] forstate:uicontrolstatenormal]; [publishbutton setimage:[uiimage imagenamed:@"tabbar_publish_click_icon"] forstate:uicontrolstatehighlighted]; [publishbutton addtarget:self action:@selector(publishclick) forcontrolevents:uicontroleventtouchupinside]; [self addsubview:publishbutton]; _publishbutton = publishbutton; } return _publishbutton;}#pragma mark - 初始化/** * 布局子控件 */- (void)layoutsubviews{ [super layoutsubviews]; /**** 设置所有uitabbarbutton的frame ****/ // 按钮的尺寸 cgfloat buttonw = self.frame.size.width / 5; cgfloat buttonh = self.frame.size.height; cgfloat buttony = 0; // 按钮索引 int buttonindex = 0; for (uiview *subview in self.subviews) { // 过滤掉非uitabbarbutton// if (![@"uitabbarbutton" isequaltostring:nsstringfromclass(subview.class)]) continue; if (subview.class != nsclassfromstring(@"uitabbarbutton")) continue; // 设置frame cgfloat buttonx = buttonindex * buttonw; if (buttonindex >= 2) { // 右边的2个uitabbarbutton buttonx += buttonw; } subview.frame = cgrectmake(buttonx, buttony, buttonw, buttonh); // 增加索引 buttonindex++; } /**** 设置中间的发布按钮的frame ****/ self.publishbutton.frame = cgrectmake(0, 0, buttonw, buttonh); self.publishbutton.center = cgpointmake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);}#pragma mark - 监听- (void)publishclick{ xmglogfunc}@end |
3 添加红点提示
现在很多app的tabbaritem在有新消息时在右上角会有一个红点提示，有的甚至还会有具体数目的提醒，类似我们常用的qq、微信、微博、头条等都会有类似的功能，这个提示在ios中的学名叫做badge（其实是一般都这么命名而已）。在ios的tabbaritem是自带该属性和控件的，我们可以根据自己的需求进行配置，下图是ios11中的配置文档，可以对提示数量、颜色进行自定义设置，还可以对提示文字的属性进行不同状态下的配置。
据说在ios10之前对badge的提示颜色是不能进行配置的，这时候如果需要，我们就只能进行自定义tabbaritem，然后对自定义的badge进行配置。本文就不对这一点进行详细说明了，有需要的小伙伴可以自行求助度娘。
