UI初级连载八------------标签控制器

【1】标签控制器的基本概念和用法

1.导航栏的基本概念

UITabBarController与UINavigationController一样都是管理视图控制器的。

UINavigationController用来管理视图之间的导航

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

许多应用程序都使用UITabBarController来做整体的布局

2.UITabBarController的基本用法

创建标签控制器：

    self . window = [[ UIWindow alloc ] initWithFrame :[ UIScreen mainScreen ]. bounds ];

    self . window . backgroundColor = [ UIColor whiteColor ];
    [ self . window makeKeyAndVisible ];
   
    HomeViewController *home = [[ HomeViewController alloc ] init ];
    home. title = @"home" ;
   
    SearchViewController *search = [[ SearchViewController alloc ] init ];
    search. title = @"search" ;
   
    SettingViewController *setting = [[ SettingViewController alloc ] init ];
    setting. title = @"setting" ;
   
    MessageViewController *message = [[ MessageViewController alloc ] init ];
    message. title = @"message" ;
   
    NSMutableArray *arr = [[ NSMutableArray alloc ] initWithObjects :home, search, setting, message, nil ];
   
    for ( int i = 0 ; i < 5 ; i++) {
        UIViewController *vc = [[ UIViewController alloc ] init ];
        vc. view . backgroundColor   = [ UIColor colorWithRed : arc4random () % 10 * 0.1 green : arc4random () % 10 * 0.1 blue : arc4random () % 10 * 0.1 alpha : 1 ];
        vc. title = [ NSString stringWithFormat : @" 视图 %d" , i + 5 ];

        [arr addObject:vc];

    }

    UITabBarController *tabbar = [[ UITabBarController alloc ] init ];
    tabbar. viewControllers = arr;

    [self.window setRootViewController:tabbar];

自定义标签控制器的样式：

    // 使用自定义方式定义 tabbarItem
    // 前三个是系统里的样式， UITabBarSystemItemFavorites 是五角星， UITabBarSystemItemBookmarks 是书本样式， UITabBarSystemItemSearch 是搜索样式
    UITabBarItem *item1 = [[ UITabBarItem alloc ] initWithTabBarSystemItem : UITabBarSystemItemFavorites tag : 1 ];
    homeVC. tabBarItem = item1;
   
    UITabBarItem *item2 = [[ UITabBarItem alloc ] initWithTabBarSystemItem : UITabBarSystemItemBookmarks tag : 2 ];
    messageVC. tabBarItem = item2;
   
    UITabBarItem *item3 = [[ UITabBarItem alloc ] initWithTabBarSystemItem : UITabBarSystemItemSearch tag : 3 ];
    searchVC. tabBarItem = item3;
   
    // 用自定义图片
    UITabBarItem *item4 = [[ UITabBarItem alloc ] initWithTitle : @"Profile" image :[ UIImage imageNamed : @"tabbar_profile.png" ] selectedImage :[ UIImage imageNamed : @"tabbar_profile_highlighted.png" ]];
    settingVC. tabBarItem = item4;
   

    // 设置 tabbar 的背景图片

    UIImage *img = [UIImage imageNamed:@"navbg.png"];

    UIGraphicsBeginImageContext ( CGSizeMake (scrrenWidth, 49 ));
    [img drawInRect : CGRectMake ( 0 , 0 , scrrenWidth, 49 )];
    img = UIGraphicsGetImageFromCurrentImageContext ();

    UIGraphicsEndImageContext();

    tabCtrl. tabBar . backgroundImage = img;

    // 设置 tabbar 的背景颜色

//    tabCtrl.tabBar.barTintColor = [UIColor cyanColor];

    // 设置选中图片的颜色

    tabCtrl.tabBar.tintColor = [UIColor cyanColor];

    // 设置选中 item 后，显示在此 item 下面的图片

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

简单的作业创建方法：

1.先创建一个继承自UITabBarController的类，如Main TabBarController

2.在 Main TabBarController中创建该标签控制器的子视图控制器，以及自定义标签控制器的样式

MainTabBarController.m文件：

#import "MainTabBarController.h"

#import "HomeViewController.h"

#import "MessageViewController.h"
#import "SearchViewController.h"
#import "SettingViewController.h"

#import "MoreViewController.h"

@interface MainTabBarController ()

@end

@implementation MainTabBarController

- ( void )viewDidLoad {
    [ super viewDidLoad ];
    // Do any additional setup after loading the view.

    // 隐藏自己的 tabbarView

    self.tabBar.hidden = true;

    // 创建自定义的 tabbarView

    [self _initViews];

    // 创建子控制器
    [ self _initViewControllers ];

}

- ( void )_initViews
{
    CGFloat scrrenWidth = [ UIScreen mainScreen ]. bounds . size . width ;

    CGFloat scrrenHeight = [UIScreen mainScreen].bounds.size.height;

     // _tabbarView是全局变量

    _tabbarView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , scrrenHeight - 49 , scrrenWidth, 49 )];
    _tabbarView . image = [ UIImage imageNamed : @"navbg.png" ];

    [self.view addSubview:_tabbarView];

    _tabbarView . userInteractionEnabled = true ;
   
    // 创建选中视图
    UIImageView *selectedView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , 0 , 53 , 45 )];
    selectedView. tag = 100 ;
    selectedView. image = [ UIImage imageNamed : @" 选中 .png" ];
   
    // 创建 5 个按钮
    for ( int i = 0 ; i < 5 ; i++) {
        UIButton *btn = [ UIButton buttonWithType : UIButtonTypeCustom ];
        btn. tag = 200 + i;
        btn. frame = CGRectMake (scrrenWidth / 5 * i, 0 , scrrenWidth / 5 , 49 );
        [btn addTarget : self action : @selector (btnClick:) forControlEvents : UIControlEventTouchUpInside ];
        NSString *imgName = [ NSString stringWithFormat : @"%d.png" , i + 1 ];
        [btn setImage :[ UIImage imageNamed :imgName] forState : UIControlStateNormal ];

        [_tabbarView addSubview:btn];

        if (i == 0 ) {
            selectedView. center = btn. center ;
        }

    }

    [_tabbarView addSubview:selectedView];  

}

- (void)btnClick:(UIButton *)btn

{

    // 设置选择的控制器
    self . selectedIndex = btn. tag - 200 ;
   
    UIView *selectedView = [ _tabbarView viewWithTag : 100 ];
   
   
    [ UIView animateWithDuration : 0.3
                     animations :^{
                         selectedView. center = btn. center ;
                     }];
   

}

- ( void )_initViewControllers
{
    HomeViewController *homeVC = [[ HomeViewController alloc ] init ];
    MessageViewController *messageVC = [[ MessageViewController alloc ] init ];
    SearchViewController *searchVC = [[ SearchViewController alloc ] init ];
    SettingViewController *settingVC = [[ SettingViewController alloc ] init ];
    MoreViewController *moreVC = [[ MoreViewController alloc ] init ];
   
    self . viewControllers = @[ homeVC, messageVC, searchVC, settingVC, moreVC ] ;
   

}

@end

在项目中创建标签控制器的常用方法：与导航控制器相结合

1.先创建一个继承自UITabBarController的类，如Main TabBarController

2.在 Main TabBarController中创建该标签控制器的子视图控制器，以及自定义标签控制器的样式

#import "MainTabBarController.h"
#import "HomeViewController.h"
#import "MessageViewController.h"
#import "SearchViewController.h"
#import "SettingViewController.h"

#import "MoreViewController.h"

@interface MainTabBarController ()
{
    CGFloat scrrenWidth;
    CGFloat scrrenHeight;

}

@end

@implementation MainTabBarController

- ( void )viewDidLoad {
    [ super viewDidLoad ];
    // Do any additional setup after loading the view.
    // 隐藏自己的 tabbarView
    self . tabBar . hidden = true ;
    // 创建自定义的 tabbarView
    [ self _initViews ];
    // 创建子控制器
    [ self _initViewControllers ];
}
- ( void )_initViews
{
    scrrenWidth = [ UIScreen mainScreen ]. bounds . size . width ;
    scrrenHeight = [ UIScreen mainScreen ]. bounds . size . height ;

    _tabbarView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , scrrenHeight - 49 , scrrenWidth , 49 )];
    _tabbarView . image = [ UIImage imageNamed : @"navbg.png" ];
    [ self . view addSubview : _tabbarView ];
    // 设置为可点击
    _tabbarView . userInteractionEnabled = true ;
   
    // 创建选中视图
    UIImageView *selectedView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 0 , 0 , 53 , 45 )];
    selectedView. tag = 100 ;
    selectedView. image = [ UIImage imageNamed : @" 选中 .png" ];
   
    // 创建 5 个按钮
    for ( int i = 0 ; i < 5 ; i++) {
        UIButton *btn = [ UIButton buttonWithType : UIButtonTypeCustom ];
        btn. tag = 200 + i;
        btn. frame = CGRectMake ( scrrenWidth / 5 * i, 0 , scrrenWidth / 5 , 49 );
        [btn addTarget : self action : @selector (btnClick:) forControlEvents : UIControlEventTouchUpInside ];
        NSString *imgName = [ NSString stringWithFormat : @"%d.png" , i + 1 ];
        [btn setImage :[ UIImage imageNamed :imgName] forState : UIControlStateNormal ];
        [ _tabbarView addSubview :btn];
        if (i == 0 ) {
            selectedView. center = btn. center ;
        }
    }
   
    [ _tabbarView addSubview :selectedView];

  
}

- ( void )btnClick:( UIButton *)btn
{
   
    // 设置选择的控制器
    self . selectedIndex = btn. tag - 200 ;
   
    UIView *selectedView = [ _tabbarView viewWithTag : 100 ];
   
   
    [ UIView animateWithDuration : 0.3
                     animations :^{
                         selectedView. center = btn. center ;
                     }];
   
}


- ( void )_initViewControllers
{
   
    // 三级控制器
    HomeViewController *homeVC = [[ HomeViewController alloc ] init ];
    MessageViewController *messageVC = [[ MessageViewController alloc ] init ];
    SearchViewController *searchVC = [[ SearchViewController alloc ] init ];
    SettingViewController *settingVC = [[ SettingViewController alloc ] init ];
    MoreViewController *moreVC = [[ MoreViewController alloc ] init ];
   

    NSArray *viewControllers = @[ homeVC, messageVC, searchVC, settingVC, moreVC ] ;

   // 装导航控制器

    NSMutableArray *navs = [ NSMutableArray array ];
    // 二级控制器
    for ( int i = 0 ; i < viewControllers. count ; i ++) {
        UINavigationController *nav = [[ UINavigationController alloc ] initWithRootViewController :viewControllers[i]];
        nav. delegate = self ;

        [navs addObject:nav];

    }

    // 一级控制器
    self . viewControllers = navs;
   
}

#pragma mark -UINavigationControllerDelegate
- ( void )navigationController:( UINavigationController *)navigationController willShowViewController:( UIViewController *)viewController animated:( BOOL )animated

{

   // 设置当进入导航空器非第一个页面时，页面中的标签控制器消失，在第一个页面时，标签控制器存在

    NSInteger count = navigationController. viewControllers . count ;
    NSLog ( @"%ld" , count);
   
    if (count == 2 ) {
//        _tabbarView.hidden = YES;
        [ UIView animateWithDuration : 0.25
                         animations :^{
                             _tabbarView . frame = CGRectMake (- scrrenWidth , scrrenHeight - 49 , scrrenWidth , 49 );
                         }];
    } else if (count == 1 ) {
//        _tabbarView.hidden = NO;
        [ UIView animateWithDuration : 0.25
                         animations :^{
                             _tabbarView . frame = CGRectMake ( 0 , scrrenHeight - 49 , scrrenWidth , 49 );
                         }];
    }

}

@end

3.UITabBarController的系统样式

TabBar只能显示5个Tab Item,如果超过5个，则会自动生成个More的标签显示剩余的Tab，这些Tab可以通过编辑显示在UITabBar上。如果将视图添加到导航控制器中，默认出现编辑按钮，可以自由移动item实例