iOS-UITabBarViewController

一、UITabBarController的初印象

UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例子就是QQ、微信等应⽤。但是.前者其管理的视图一直存在,而后者在pop后会销毁掉,释放内存.

注意:UITabBarController通常作为整个程序的rootViewController,而且不能添加到别的container viewController中。.

二、UITabBarController的使用​:

​1、使用步骤:

(1)初始化UITabBarController

(2)设置UIWindow的rootViewController为UITabBarController

(3)创建相应的子控制器(viewcontroller)

(4)把子控制器添加到UITabBarController

2、代码示例

新建一个空的UITabBarController,在控制器中编码

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
-(void) viewDidLoad {​
MapViewController *v1 = [MapViewControllernew];
v1.tabBarItem.image = [UIImageimageNamed:@"icon_map"];
v1.tabBarItem.title = @"地图";
v1.view.backgroundColor = [UIColororangeColor];
CycleViewController *v2 = [CycleViewControllernew];
v2.tabBarItem.image = [UIImageimageNamed:@"icon_cycle"];
v2.tabBarItem.title = @"运动";
v2.view.backgroundColor = [UIColorgreenColor];
OtherViewController *v3 = [OtherViewControllernew];
v3.tabBarItem.image = [UIImageimageNamed:@"icon_other"];
v3.tabBarItem.title = @"活动";
v3.view.backgroundColor = [UIColoryellowColor];
MineViewController *v4 = [MineViewControllernew];
v4.tabBarItem.image = [UIImageimageNamed:@"icon_user"];
v4.tabBarItem.title = @"我的";
v4.view.backgroundColor = [UIColorredColor];
UINavigationController *n1 = [[UINavigationControlleralloc] initWithRootViewController:v1];
​UINavigationController *n2 = [[UINavigationControlleralloc] initWithRootViewController:v2];
UINavigationController *n3 = [[UINavigationControlleralloc] initWithRootViewController:v3];
UINavigationController *n4 = [[UINavigationControlleralloc] initWithRootViewController:v4];
NSArray *array = @[n1,n2,n3,n4];
self.viewControllers = array;
}

这样就把四个带有导航控制器的tabBarController创建好了,只需在Appdelegate里面把该UITbarBarcontroller控制器​设置为跟视图控制器。

1
self.window.rootViewController = [[UITbarBarcontroller alloc]​ init];

切记,不可在appdeldegate函数里面给UITbarBarcontroller设置导航视图控制器,会影响到之后页面的导航栏的设置.

三、重要说明​

1、UITabBar ​

下方的工具条称为UITabBar ,如果UITabBarController有N个子控制器,那么UITabBar内部就会有N 个UITabBarButton作为子控件与之对应(不过最下边最多显示5个,多了就是隐藏在最后一栏里面,可以点开查看)。

注意:UITabBarButton在UITabBar中得位置是均分的,UITabBar的高度为49。

2、UITabBarButton

UITabBarButton⾥面显⽰什么内容,由对应子控制器的tabBarItem属性来决定

1
2
c1.tabBarItem.title=@"消息";
c1.tabBarItem.image=[UIImage imageNamed:@"tab_recent_nor"];​

UITabBarItem有以下属性影响UITabBarButton的内容:

title(标题)、image(图标)、selectImage(选中时的图标)、badgeValue(提醒数字)

​3、有两种方式可以往UITabBarController中添加子控制器

(1)[tb addChildViewController:c1];

(2)tb.viewControllers=@[c1,c2,c3,c4];

注意:展示的顺序和添加的顺序一致,和导航控制器中不同,展现在眼前的是第一个添加的控制器对应的View。

​3、UITabBarItem
​-

  • UITabBarItemUITabBar上面显示的每一个Tab都对应着一个ViewController,我们可以通过设置viewcontroller.tabBarItem属性来改变tabbar上对应的tab显示内容。

  • 否则系统将会根据viewController的title自动创建一个,该tabBarItem只显示文字,没有图像,但是图像的位置会预留出来

  • 切记标签视图控制器所管理的视图控制器的title,不要直接采用self.title=这个方法设置,而是采用navigationBar的属性设置self.navigationItem.title=,这样就不会影响到tabBarItem的title的展示.
  • 当我们自己创建UITabBarItem的时候,我们可以显示的指定显示的图像和对应的文字描述。
  • 当然还可以通过setFinishedSelectedImage:withFinishedUnselectedImage:方法给选中状态和飞选中状态指定不同的图片。​
1
2
3
UITabBarItem *item = [[UITabBarItem alloc] initWithTitle:@"Second" image:nil tag:2];
​[item setFinishedSelectedImage:[UIImage imageNamed:@"second"] withFinishedUnselectedImage:[UIImage imageNamed:@"first"]];
viewController2.tabBarItem = item;

​四、Change SelectedViewcontroller(改变当前选中的控制器)

​改变UITabBarController中当前显示的viewController,可以通过一下两种方法:

​1、selectedIndex属性

  • 通过该属性可以获得当前选中的viewController,设置该属性,可以显示viewControllers中对应的index的viewController。
  • 如果当前选中的是MoreViewController的话,该属性获取出来的值是NSNotFound,而且通过该属性也不能设置选中MoreViewController。设置index超出viewControllers的范围,将会被忽略。

2、selectedViewController属性

  • 通过该属性可以获取到当前显示的viewController,通过设置该属性可以设置当前选中的viewController,同时更新selectedIndex。
  • 可以通过给该属性赋值tabBarController.moreNavigationController可以选中moreViewController。

​3、viewControllers属性

设置viewControllers属性也会影响当前选中的viewController,设置该属性时UITabBarController首先会清空所有旧的viewController,然后部署新的viewController,接着尝试重新选中上一次显示的viewController,如果该viewController已经不存在的话,会接着尝试选中index和selectedIndex相同的viewController,如果该index无效的话,则默认选中第一个viewController。

五、 moreNavigationController

  • UITabBar上最多可以显示5个Tab,当我们往UITabBarController中添加的viewController超过5个时候,最后一个就会自动变成 more ,按照设置的viewControlles的顺序,显示前四个viewController的tabBarItem,后面的tabBarItem将不再显示。当点击more时候将会弹出一个标准的navigationViewController,里面放有其它未显示的的viewController,并且带有一个edit按钮,通过点击该按钮可以进入类似与ipod程序中设置tabBar的编辑界面。
  • 编辑界面中默认所有的viewController都是可以编辑的,我们可以通过设置UITabBarController的customizableViewControllers属性来指定viewControllers的一个子集,即只允许一部分viewController是可以放到tabBar中显示的。但是这块儿要注意一个问题就是每当UITabBarController的viewControllers属性发生变化的时候,customizableViewControllers就会自动设置成跟viewControllers一致,即默认的所有的viewController都是可以编辑的,如果我们要始终限制只是某一部分可编辑的话,记得在每次viewControlles发生改变的时候,重新设置一次customizableViewControllers。

六、UITabBarController的Rotation

  • UITabBarController默认只支持竖屏,当设备方向放生变化时候,它会查询viewControllers中包含的所有ViewController,仅当所有的viewController都支持该方向时,UITabBarController才会发生旋转,否则默认的竖向。
  • 此处需要注意当UITabBarController支持旋转,而且发生旋转的时候,只有当前显示的viewController会接收到旋转的消息。

七、UITabBarControllerDelegate

  • 这两个方法我之前在项目中做过 每次打开APP时,根据后台数据,改变指定的tabbar的image, 点击后改变其image.
1
2
- tabBarController:shouldSelectViewController:
- tabBarController:didSelectViewController:
  • 下面这三个方法主要用于监测对moreViewController中对view controller的edit操作
1
2
3
4
5
- (void)tabBarController:(UITabBarController *)tabBarController willBeginCustomizingViewControllers:(NSArray *)viewControllers;
- (void)tabBarController:(UITabBarController *)tabBarController willEndCustomizingViewControllers:(NSArray *)viewControllers changed:(BOOL)changed;
- (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray *)viewControllers changed:(BOOL)changed;

八 自定义tabbar的四种方法

参考Demo:UITabBarVCDemo

方法一:

很老实的写法,适合新手练习.给item设置选中和非选中状态下的图片 ,并设置显示原图. 基本满足一般的开发需要.

方法二:

是我在项目中的做法,当时不知道title的字体颜色也可以修改,所以直接显示一张图片 ,通过设置 imageInsert挤掉title的位置,此时还是两张图.

方法三:

1
2
self.tabBar.tintColor = [UIColor purpleColor];
// self.tabBar.barTintColor = [UIColor purpleColor];//修改tabBar的背景色

通过这个方法可以直接改变选中时item的图片 和 title的颜色,所以在item选中前后的样式一样只是颜色改变时 ,可以采用此方法,故选中后的图片可以舍弃.

方法四

实现类似 简书 新浪微博那种 tabbar ,这个方法是要记住的,很有用.在tabbar的基础上自定义.

方法五

类似网易音乐 等可爱的tabBar
参考 CuteTabBarDemo

坚持原创技术分享,您的支持将鼓励我继续创作!