1月21号 UITabBarController

UITabBarController

UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例子就是QQ、微信、微博等应⽤。

界面就是这个样子的   底部的五个按钮就是通过UITabBarController来实现的

一、文档介绍

The UITabBarController class implements a specialized view controller that manages a radio-style selection interface. This tab bar interface displays tabs at the bottom of the window for selecting between the different modes and for displaying the views for that mode. This class is generally used as-is but may be subclassed in iOS 6 and later.

 

Each tab of a tab bar controller interface is associated with a custom view controller. When the user selects a specific tab, the tab bar controller displays the root view of the corresponding view controller, replacing any previous views. (User taps always display the root view of the tab, regardless of which tab was previously selected. This is true even if the tab was already selected.) Because selecting a tab replaces the contents of the interface, the type of interface managed in each tab need not be similar in any way. In fact, tab bar interfaces are commonly used either to present different types of information or to present the same information using a completely different style of interface. Figure 1 shows the tab bar interface presented by the Clock application, each tab of which presents a type of time based information.

 

大概的意思就是：UITabBarController类实现了一个专门的类似于管理广播方式选择界面视图控制器。这个tab bar interface在窗口的底部展现了一些tabs，这些tabs是用来选择不同的模式并且展示那个模式中的视图。

tab bar controller中的每一个tab都和一个自定义的视图控制器相关联。当用户选择了一个特定的tab，tab bar controller会展现出相关联的视图控制器中的根视图来替换当前的视图。（当用户按下了一个tab,总是展现出这个tab的根视图，不管之前选择的tab是什么，即使这个tab已经被选中了）。因为选择了一个tab来替换interface中的内容，所以在每个tab中的interface的类型不需要任何类似的方式。事实上，tab bar interface通常用来展现不同类型的信息或者展现在不同的接口中所使用的相同的信息。下图展示了tab bar controller在时钟应用中的展现状况，每一个tab都呈现了一种时间类型的信息。

 

 

接下来我们实现上面的微博界面中的UITabBarController

二、UITabBarController的使用

//创建窗口
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    
    //创建TabBarController
    WKYTabController *tabController = [[WKYTabController alloc] init];
    tabController.tabBar.tintColor = [UIColor orangeColor];
    
    //创建tabBar上面管理的每个界面
    //1.创建主页
    HomeViewController *homeVC = [[HomeViewController alloc] init];
    homeVC.view.backgroundColor = [UIColor greenColor];
    homeVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"主页"
                                                      image:[UIImage imageNamed:@"tabbar_home"]
                                              selectedImage:[[UIImage imageNamed:@"tabbar_home_selected"]
                                     imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
    
    //2.消息页面
    MessageViewController *msgVC = [[MessageViewController alloc] init];
    msgVC.view.backgroundColor = [UIColor yellowColor];
    msgVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"消息"
                                                      image:[UIImage imageNamed:@"tabbar_message_center"]
                                              selectedImage:[[UIImage imageNamed:@"tabbar_message_center_selected"]
                                     imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
    
    //3.发现页面
    DiscoverViewController *disVC = [[DiscoverViewController alloc] init];
    disVC.view.backgroundColor = [UIColor orangeColor];
    disVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"发现"
                                                     image:[UIImage imageNamed:@"tabbar_discover"]
                                             selectedImage:[[UIImage imageNamed:@"tabbar_discover_selected"]
                                    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
    
    //4.我页面
    ProfileViewController *profileVC = [[ProfileViewController alloc] init];
    profileVC.view.backgroundColor = [UIColor redColor];
    profileVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"我"
                                                     image:[UIImage imageNamed:@"tabbar_profile"]
                                             selectedImage:[[UIImage imageNamed:@"tabbar_profile_selected"]
                                    imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
    
    
    
    //将创建的homeVC添加到tabBarController上
    tabController.viewControllers = @[homeVC,msgVC,disVC,profileVC];
    
    //设置窗口的根视图控制器
    self.window.rootViewController = tabController;
    
    //显示窗口
    [self.window makeKeyAndVisible];

为什么不用系统的UITabBarController来创建TabBarController   因为在tabBar中间有一个和其他四个TabBarButton不同的TabBarButton  所以要自定义一个WKYTabController  继承于　UITabBarController。

@interface WKYTabController ()<CustomTabBarDelegate>
　　//CustomTabBarController和CustomUITabBar之间是代理关系

@end

@implementation WKYTabController

- (void)viewDidLoad {
    [super viewDidLoad];
    CustomTabBar *tb = [[CustomTabBar alloc] init];
    tb.delegate = self;
    [self setValue:tb forKey:@"tabBar"];
}

- (void)addButtonDidClicked:(UIButton *)sender{
    //显示add界面
    AddViewController *addVC = [[AddViewController alloc] init];
    addVC.view.backgroundColor = [UIColor whiteColor];
    
    [self presentViewController:addVC animated:YES completion:nil];
}

@end

接下去的工作就是自定义一个CustomTabBar  目的就是对下面的TabBar重新布局  为中间的添加按钮空出位置

1.因为点击之后  按钮的图片状态会发生改变   所以需要创建自己添加的按钮  对它的属性进行设置

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        //创建自己添加的按钮
        self.addButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [_addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];//点击之前的按钮背景图片
        [_addButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];//点击之后的按钮背景图片
        [_addButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];//背景图片上面添加的+号图片
        [_addButton addTarget:self action:@selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside];
    }
    return self;
}

2.对tabBar进行重新的布局  中间的button空位置

- (void)layoutSubviews{
    [super layoutSubviews];
    
//    NSLog(@"%@", self.subviews);
    
    //计算每个item的平均宽度
    CGFloat avgWidth = self.frame.size.width/5;
    
    NSInteger index = 0;
    for (UIView *item in self.subviews) {
        if ([item isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            item.frame = CGRectMake(index * avgWidth, item.frame.origin.y, avgWidth, item.frame.size.height);
            
            index ++;
            if (index == 2) {
                _addButton.frame = CGRectMake(index * avgWidth, 3, avgWidth, 44);
                [self addSubview:_addButton];
                index++;
            }
        }
    }
}

最后的实现界面如下

三、注意事项

1.UITabBar 

下方的工具条称为UITabBar ，如果UITabBarController有N个子控制器,那么UITabBar内部就会有N 个UITabBarButton作为子控件与之对应。

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

在上面的程序中，UITabBarController(除了中间的按钮)有4个子控制器,所以UITabBar中有4个UITabBarButton，UITabBar的结构⼤大致如下图所示：

  

2.UITabBarButton 

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

homeVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"主页"
                                                      image:[UIImage imageNamed:@"tabbar_home"]
                                              selectedImage:[[UIImage imageNamed:@"tabbar_home_selected"]
                                     imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];

title是标题的文字

image是未选中时的图片

selectedImage是选中时的图片

imageWithRenderingMode使用图片自带的颜色  不使用系统的颜色

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

（1）[tabController addChildViewController:homeVC];

（2）tabController.viewControllers = @[homeVC,msgVC,disVC,profileVC];

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