UITabBarController的使用詳解及其自定義

時間  2019-11-08
標籤 uitabbarcontroller 使用 詳解 及其 自定義 简体版
原文   原文鏈接

簡介

UITabBarController - 選項卡控制器，與導航控制器同樣，也被普遍用於各類ios應用程序。顧名思義，選項卡控制器在屏幕底部顯示一系列「選顯卡」，這些選項卡表示爲圖標和文本，用戶觸摸它們將在不一樣的場景間切換。和UINavigationController相似，UITabBarController也能夠用來控制多個頁面導航，用戶能夠在多個視圖控制器之間移動，並能夠定製屏幕底部的選項卡欄。
藉助屏幕底部的選項卡欄，UITabBarController沒必要像UINavigationController那樣以棧的方式推入和推出視圖，而是創建一系列的控制器（這些控制器能夠是UIViewController、UINavigationController、UITableViewController等）並將它們添加到選項卡欄，使每一個選項卡對應一個控制器。每一個場景都呈現了應用程序的一項功能，或是提供了一種查看應用程序的獨特方式。UITabBarController是iOS中很經常使用的一個viewController,例如系統的鬧鐘程序等，QQ也是用的UITabBarController。UITabBarController一般做爲整個程序的rootViewController，並且不能添加到別的container viewController中。ios

 

UITabBarController的View層級圖編程

 

與導航控制器同樣，選項卡控制器會爲咱們處理一切。當用戶觸摸按鈕時會在場景之間進行切換，咱們無需以編程的方式處理選項卡欄事件，也無需手工在視圖控制器之間切換。app

UITabBarController的使用步驟

  • 初始化UITabBarController控制器
  • 設置UIwindow的rootViewController爲這個UITabBarController
  • 在UITabBarController中添加子控制器

示例代碼

#import "AppDelegate.h"


@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    
    // 建立窗口
    self.window = [[UIWindow alloc]init];
    self.window.frame = [UIScreen mainScreen].bounds;
    
    
    // 設置窗口的跟控制器
    UITabBarController * tabbarVC = [[UITabBarController alloc]init];

    // 添加子控制器
    UIViewController * VC01 = [[UIViewController alloc]init];
    // 設置標題
    VC01.tabBarItem.title = @"精華";
    // 設置默認圖片
    VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    // 設置選中圖片
    VC01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
    VC01.view.backgroundColor = [UIColor yellowColor];
    [tabbarVC addChildViewController:VC01];
    
    UIViewController * VC02 = [[UIViewController alloc]init];
    VC02.tabBarItem.title = @"新帖";
    VC02.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
    VC02.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_new_click_icon"];
    VC02.view.backgroundColor = [UIColor redColor];
    [tabbarVC addChildViewController:VC02];
    
    UIViewController * VC03 = [[UIViewController alloc]init];
    VC03.tabBarItem.title = @"關注";
    VC03.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
    VC03.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_friendTrends_click_icon"];

    VC03.view.backgroundColor = [UIColor blueColor];
    [tabbarVC addChildViewController:VC03];
    
    UIViewController * VC04 = [[UIViewController alloc]init];
    VC04.tabBarItem.title = @"我";
    VC04.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
    VC04.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_me_click_icon"];

    VC04.view.backgroundColor = [UIColor greenColor];
    [tabbarVC addChildViewController:VC04];
    

    
    
    self.window.rootViewController = tabbarVC;
    
    // 顯示窗口
    [self.window makeKeyAndVisible];
    
    return YES;
}

效果圖佈局

 

可是這樣在appdelegate裏面進行設置會有不少缺點：優化

  • 底部tabbaritem都是默認的藍色
  • 添加子控制器的代碼暴露在了外面

以自定義的方式實現UITabBarController

步驟：

  • 新建一個繼承自UITabBarController的子類
  • 將這個子類設置爲根控制器
  • 在這個子類裏面實現添加子控制器的方法

可是在這種狀況下由於有系統默認的藍色渲染，會致使選中圖標selectedImage不是圖片原來的樣子，能夠經過如下兩種方式解決：

  • 方法1：設置選中圖片的渲染模式
// 添加子控制器
    UIViewController * VC01 = [[UIViewController alloc]init];
    // 設置標題
    VC01.tabBarItem.title = @"精華";
    // 設置默認圖片
    VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    
    UIImage * image = [UIImage imageNamed:@"tabBar_essence_click_icon"];
    
    // 設置渲染模式 - 保持原始的渲染
    image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    // 設置選中圖片
    VC01.tabBarItem.selectedImage =image;
    VC01.view.backgroundColor = [UIColor yellowColor];
    [self addChildViewController:VC01]

  • 方法2：直接在圖片文件夾的屬性裏面進行設置 - 將render as設置成original imageui

     

因爲文字和圖片同樣是默認的藍色，因此也要進行設置才能達到本身想要的效果

方案一：經過setTitleTextAttributes屬性設置(可是這個方法很麻煩，每次設置的時候都須要寫不少代碼)
- setTitleTextAttributes設置的時候是經過字典設置的，因此先搞一個字典atom

// 添加子控制器
   UIViewController * VC01 = [[UIViewController alloc]init];
   // 設置標題
   VC01.tabBarItem.title = @"精華";
   // 設置默認圖片   
   VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
   //設置選中圖片
   VC01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
   
   // 設置文字屬性
   NSMutableDictionary * attrs = [NSMutableDictionary dictionary];
   attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12.0];
   // 設置文字的前景色
   attrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
   
   [VC01.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
   
   VC01.view.backgroundColor = [UIColor yellowColor];
   [self addChildViewController:VC01];

優化方案(appearance)

  • 因爲文字屬性每次設置的時候代碼不少很煩，因此要進行簡化
  • 當方法方法後面有UI_APPERANCE宏的時候，就能夠經過appearance對象一次性設置
- (void)setTitleTextAttributes:(nullable NSDictionary<NSString *,id> *)attributes forState:(UIControlState)state NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
  • 步驟：
    • 拿到那個item的apperance
    • 對這個item進行設置、
    • 以後全部的item都會是這個屬性
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 經過appearance統一設置UITabbarItem的文字屬性
    NSMutableDictionary * attrs = [NSMutableDictionary dictionary];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12.0];  // 設置文字大小
    attrs[NSForegroundColorAttributeName] = [UIColor grayColor];  // 設置文字的前景色
    
    NSMutableDictionary * selectedAttrs = [NSMutableDictionary dictionary];
    selectedAttrs[NSFontAttributeName] = attrs[NSFontAttributeName];
    selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
    
    UITabBarItem * item = [UITabBarItem appearance];  // 設置appearance
    [item setTitleTextAttributes:attrs forState:UIControlStateNormal];
    [item setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];
    
    
    
    // 添加子控制器
    UIViewController * VC01 = [[UIViewController alloc]init];
    // 設置標題
    VC01.tabBarItem.title = @"精華";
    // 設置默認圖片   
    VC01.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    //設置選中圖片
    VC01.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
    
    
    [VC01.tabBarItem setTitleTextAttributes:attrs forState:UIControlStateNormal];
    
    VC01.view.backgroundColor = [UIColor yellowColor];
    [self addChildViewController:VC01];
    
    UIViewController * VC02 = [[UIViewController alloc]init];
    VC02.tabBarItem.title = @"新帖";
    VC02.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
    VC02.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_new_click_icon"];
    VC02.view.backgroundColor = [UIColor redColor];
    [self addChildViewController:VC02];
    
    UIViewController * VC03 = [[UIViewController alloc]init];
    VC03.tabBarItem.title = @"關注";
    VC03.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
    VC03.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_friendTrends_click_icon"];
    VC03.view.backgroundColor = [UIColor blueColor];
    [self addChildViewController:VC03];
    
    UIViewController * VC04 = [[UIViewController alloc]init];
    VC04.tabBarItem.title = @"我";
    VC04.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
    VC04.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_me_click_icon"];
    VC04.view.backgroundColor = [UIColor greenColor];
    [self addChildViewController:VC04];
}

封裝 - 封裝添加自定義子控制器的方法

  • 因爲自定義子控制器的代碼很類似，因此能夠進行抽取
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 經過appearance統一設置UITabbarItem的文字屬性
    NSMutableDictionary * attrs = [NSMutableDictionary dictionary];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:12.0];  // 設置文字大小
    attrs[NSForegroundColorAttributeName] = [UIColor grayColor];  // 設置文字的前景色
    
    NSMutableDictionary * selectedAttrs = [NSMutableDictionary dictionary];
    selectedAttrs[NSFontAttributeName] = attrs[NSFontAttributeName];
    selectedAttrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
    
    UITabBarItem * item = [UITabBarItem appearance];  // 設置appearance
    [item setTitleTextAttributes:attrs forState:UIControlStateNormal];
    [item setTitleTextAttributes:selectedAttrs forState:UIControlStateSelected];
    
    
    // 添加子控制器
    [self setupChildVC:@"精華" andImage:@"tabBar_essence_icon" andSelectImage:@"tabBar_essence_click_icon"];
    [self setupChildVC:@"新帖" andImage:@"tabBar_new_icon" andSelectImage:@"tabBar_new_click_icon"];
    [self setupChildVC:@"關注" andImage:@"tabBar_friendTrends_icon" andSelectImage:@"tabBar_friendTrends_click_icon"];
    [self setupChildVC:@"我" andImage:@"tabBar_me_icon" andSelectImage:@"tabBar_me_click_icon"];
}

/**
 * 初始化子控制器
 */
- (void)setupChildVC:(NSString * )title andImage:(NSString * )image andSelectImage:(NSString *)selectImage{
    UIViewController * VC = [[UIViewController alloc]init];
    VC.tabBarItem.title = title;
    VC.tabBarItem.image = [UIImage imageNamed:image];
    VC.tabBarItem.selectedImage = [UIImage imageNamed:selectImage];
    VC.view.backgroundColor = [UIColor greenColor];
    [self addChildViewController:VC];
}

自定義底部tabbar樣式

經過上面的方法設置以後tabbar的樣式spa

 

若是想要在這個tabbar上面添加一個按鈕(注意不是item，tabbaritem是圖片在上，文字在下的格式)，這個按鈕和item樣式不同，佔據了和item上文字加上圖片的大小。因爲添加到tabbar上面的item是從左到右順序排列的，若是是直接添加一個item，那麼不能達到咱們想要的樣式（固然，若是你是添加一個item的話，直接按照之前的方法就好了），這個時候能夠經過自定義tabbar來實現。code

 

想要實現的效果orm

  • 因爲tabbar是read-only屬性，因此只能經過KVC模式跟換tabbar

步驟：

  • 新建一個繼承自UITabbar的類
  • 在這個類裏面實現初始化
  • 在layoutSubviews方法裏面從新佈局
  • 在TabbarController裏面跟換tabbar
  • 雖然咱們在TabbarController裏面換成了自定義的tabbar，可是由於這個tabbar繼承自uitabbar，因此它原來的屬性和內容還在
#import "LMHTabbar.h"

@interface LMHTabbar()
/** 發佈按鈕 */
@property (nonatomic, weak) UIButton * publishBtn;

@end

@implementation LMHTabbar

/**
 * 初始化
 */
- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        
        // 設置tabbar的子控件
        UIButton * publishBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [publishBtn setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
        [publishBtn setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
        [publishBtn sizeToFit];
        
        [self addSubview:publishBtn];
        self.publishBtn = publishBtn;
    }
    return self;
}

/**
 * 重寫佈局子控件的方法進行佈局
 */
- (void)layoutSubviews{
    [super layoutSubviews];
    
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    
    // 設置發佈按鈕的frame
    self.publishBtn.center = CGPointMake(width  * 0.5, height * 0.5);
    
    
    
    // 設置其餘的UITabBar的frame
    CGFloat buttonY = 0;
    CGFloat buttonW = width /5;
    CGFloat buttonH = height;
    NSInteger index = 0;
    for (UIView  * button in self.subviews) {
        
        // 判斷 - 只有是UITabBarButton的button才進行佈局（也就是tabbar上面的精華、新帖、關注、我這四個按鈕） 而發佈按鈕不是UITabBarButton，就不進行佈局
        // 因爲UITabBar是蘋果官方私有的， 因此不能直接設置
        if (![button isKindOfClass:NSClassFromString(@"UITabBarButton")])  continue;
        
        //  計算按鈕的x值
        CGFloat buttonX = buttonW * ((index > 1) ? (index + 1): (index));
        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
        
        // 索引增長
        index ++;
    }
    
    
}
@end

 

做者：STzen 連接：https://www.jianshu.com/p/2f74a5d93faa 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程