iOS UI初级-标签控制器

1.标签控制器  UITabBarController 

UITabBarController一样是管理视图控制器的

UITabBarController是用来管理视图控制器之间的导航，UITabBarController是用来管理固定的几个视图控制器，子控制器是并列的，可以任意切换显示。

2. UITabBarController基本用法

// 创建标签控制器
    UITabBarController *tabBV = [[ UITabBarController alloc ] init ];
    // 创建子控制器
    HomeViewController *homeVC = [[ HomeViewController alloc ] init ];
    homeVC. title = @"Home" ;
    MessageViewController *messageVC = [[ MessageViewController alloc ] init ];
    messageVC. title = @"Message" ;
    SettingViewController *settingVC = [[ SettingViewController alloc ] init ];
    settingVC. title = @"Setting" ;
    SearchViewController *searchVC = [[ SearchViewController alloc ] init ];
    searchVC. title = @"Search" ;
    // 创建一个数组将视图控制器装到数组中
    NSMutableArray *arr = [ NSMutableArray arrayWithObjects :homeVC, messageVC, settingVC, searchVC, nil ];
    // 创建多个控制器
    // 标签只能显示 4 个，第五个以上都会默认显示在表视图里边，并且所有的标签都可以更换位置
    for ( int i = 0 ; i < 5 ; i++) {
        UIViewController *vc = [[ UIViewController alloc ] init ];
        NSString *title = [ NSString stringWithFormat : @" 第 %d 个标签 " , i+ 5 ];
        vc. title = title;
        [arr addObject :vc];
        vc. view . backgroundColor = [ UIColor colorWithRed : arc4random () % 10 * 0.1 green : arc4random () % 10 * 0.1 blue : arc4random () % 10 * 0.1 alpha : 1 ];
    }
    tabBV. viewControllers = arr;
    // 进入 window 时，除了第一个页面的标签的 title 会显示出来，其他的不会显示，是因为还没有加载（生命周期）

    self.window.rootViewController = tabBV;

3. UITabBarController结构图

①一个分栏标签视图控制器控制着若干视图控制器，它是由一个数组进行管理的

②每一个分栏控制器只有一个UITabBar视图，用于显示UITabBarItem实例

③UITabBarItem由当前的视图控制器管理，这一点与导航控制器中的UIBarButtonItem是相同

4.标签控制器的常用属性和代理方法

5.自定义标签控制器

// 使用自定义方式定义 tabbarItem
    UITabBarItem *item1 = [[ UITabBarItem alloc ] initWithTabBarSystemItem : UITabBarSystemItemFavorites tag : 1 ];

    homeVC.tabBarItem = item1;

    //显示红色图标标记

    item1. badgeValue = @"new" ;

   
    UITabBarItem *item2 = [[ UITabBarItem alloc ] initWithTabBarSystemItem : UITabBarSystemItemBookmarks tag : 2 ];
    messageVC. tabBarItem = item2;
   
    // 自定义的图片
    UITabBarItem *item3 = [[ UITabBarItem alloc ] initWithTitle : @" 搜索 " image :[ UIImage imageNamed : @"tabbar_discover.png" ] selectedImage :[ UIImage imageNamed : @"tabbar_discover_highlighted.png" ]];
    searchVC. tabBarItem = item3;
   
    UITabBarItem *item4 = [[ UITabBarItem alloc ] initWithTitle : @" 联系人 " image :[ UIImage imageNamed : @"tabbar_profile.png" ] selectedImage :[ UIImage imageNamed : @"tabbar_profile_highlighted.png" ]];
    settingVC. tabBarItem = item4;

   

    //设置tabber的背景图片

    UIImage *image = [ UIImage imageNamed : @"navbg" ];
    UIGraphicsBeginImageContext ( CGSizeMake ([ UIScreen mainScreen ]. bounds . size . width , 49 ));
    [image drawInRect : CGRectMake ( 0 , 0 , [ UIScreen mainScreen ]. bounds . size . width , 49 )];
    image = UIGraphicsGetImageFromCurrentImageContext ();
    UIGraphicsEndImageContext ();
    tabBV. tabBar . backgroundImage = image;
   
    // 设置点击选中后的背景颜色
    tabBV. tabBar . tintColor = [ UIColor redColor ];
    // 设置 tabbar 的背景颜色
    tabBV. tabBar . barTintColor = [ UIColor grayColor ];
    // 设置选中 item 后，显示在此 item 下的图片

    tabBV.tabBar.selectionIndicatorImage = [UIImage imageNamed:@"选中.png"];

6.用户定制UITabBar(二)

①// 隐藏自己的 tabbarView

    self.tabBar.hidden = YES;

②// 先设置自定义的 tabbarView 的样式
    _tabbarView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , height - 49 , width, 49 )];
    _tabbarView . image = [ UIImage imageNamed : @"navbg.png" ];
     [ self . view addSubview : _tabbarView ];
    // 点击事件打开

    _tabbarView.userInteractionEnabled = YES;

  ③ // 设置选中的图标

    UIImage *selectedImage = [ UIImage imageNamed : @" 选中 .png" ];
    UIImageView *selectedImageView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , 0 , 53 , 45 )];
    selectedImageView. image = selectedImage;

    selectedImageView.tag = 100;

 ④// 将 5 个图标放到 tabbar 上

    for ( int i = 0 ; i < 5 ; i++) {
        NSString *imageName = [ NSString stringWithFormat : @"%d.png" , i+ 1 ];
        UIButton *tabBarBtn = [ UIButton buttonWithType : UIButtonTypeCustom ];
        [tabBarBtn setImage :[ UIImage imageNamed :imageName] forState : UIControlStateNormal ];
        tabBarBtn. frame = CGRectMake (width / 5 * i, 0 , width/ 5 , 49 );
        tabBarBtn. tag = 200 + i;
        // 添加点击事件
        [tabBarBtn addTarget : self action : @selector (btnClick:) forControlEvents : UIControlEventTouchUpInside ];
        // 第一个图标默认被选中
        if (i == 0 ) {
            selectedImageView. center = tabBarBtn. center ;
        }
        [ _tabbarView addSubview :tabBarBtn];
       

    }

⑤将选中的按钮放在TabBar上

[ _tabbarView addSubview :selectedImageView];

//设置选中的图标有滑动的效果

- ( void )btnClick:( UIButton *)btn
{
    // 取出此标签控制器中的视图控制器
    self . selectedIndex = btn. tag - 200 ;
    UIView *selectedView = [ _tabbarView viewWithTag : 100 ];
    // 将选中的图片放到点击的图片上
    [ UIView animateWithDuration : 0.2 animations :^{
        selectedView. center = btn. center ;
    }];

}

//创建子控制器

- ( void )_initWithController
{
    // 创建子控制器
    // 三级控制器
    HomeViewController *homeVC = [[ HomeViewController alloc ] init ];
    homeVC. title = @"Home" ;
    MessageViewController *messageVC = [[ MessageViewController alloc ] init ];
    messageVC. title = @"Message" ;
    SettingViewController *settingVC = [[ SettingViewController alloc ] init ];
    settingVC. title = @"Setting" ;
    SearchViewController *searchVC = [[ SearchViewController alloc ] init ];
    searchVC. title = @"Search" ;
    // 将控制器装到数组中
    NSArray *arr = @[ homeVC, messageVC, settingVC, searchVC ] ;
//    self.viewControllers = arr;
    // 二级控制器
    // 创建可变的数组用来装导航控制器
    NSMutableArray *muarr = [ NSMutableArray array ];
    for ( int i = 0 ; i < 4 ; i++) {
        // 创建导航控制器
        UINavigationController *nc = [[ UINavigationController alloc ] initWithRootViewController :arr[i]];
        [muarr addObject :nc];
        // 取得导航控制器的代理
        nc. delegate = self ;
       
    }
   
    // 一级控制器

    self.viewControllers = muarr;  

}

// 当从标签控制器控制的页面进入到导航控制器控制的页面时，将 TabBar 隐藏，出来时，自动恢复 TabBar

#pragma mark---UINavigationControllerDelegate

- ( void )navigationController:( UINavigationController *)navigationController willShowViewController:( UIViewController *)viewController animated:( BOOL )animated
{
    CGFloat width = [ UIScreen mainScreen ]. bounds . size . width ;
    CGFloat height = [ UIScreen mainScreen ]. bounds . size . height ;
    // 测试导航控制器中的数量
    NSInteger count = navigationController. viewControllers . count ;
    NSLog ( @"%ld" , count);
    if (count == 2 ) {
        [ UIView animateWithDuration : 0.2 animations :^{
            _tabbarView . frame = CGRectMake (-width, height - 49 , width, 49 );
        }];
    } else if (count == 1 ){
        [ UIView animateWithDuration : 0.25 animations :^{
            _tabbarView . frame = CGRectMake ( 0 , height - 49 , width, 49 );
        }];
    }
}