你所不知道的UITabBarButton?

時間  2019-11-08
標籤 所不 知道 uitabbarbutton 简体版
原文   原文鏈接

項目源碼請查看個人GitHub項目地址:

https://github.com/DXSmile/-Usage-of-UITabBarButton-.gitgit

##闡述: 只要有必定開發經驗的iOS攻城獅,只要你作過應用程序APP的開發,不可避免的都會用到UITabBarController, UITabBarController又稱標籤控制器 ,一樣是管理多控制器的,咱們通常的作法都是將多個(通常是4-6個之間)UINavigationController做爲UITabBarController的子控件,添加到UITabBarController的導航標籤欄(也叫工具條)UITabBar上;github

今天在這裏,我要講的,不是怎樣建立一個UITabBarController,由於,這個比較簡單,也是每一個iOS攻城獅所須要必備的技能,那麼問題來了,今天,我要說什麼呢 ?框架

細心的朋友估計已經看出來了, 沒錯, 我要講的是, 在建立UITabBarController的UITabBar標籤欄的時候, 容易困擾也容易被你們忽視的UITabBarButton的問題.ide

1.什麼是UITabBarButton?

&1.

咱們都知道UITabBarController下方的工具條稱爲UITabBar ，若是UITabBarController有N個子控制器,那麼UITabBar內部就會有N 個UITabBarButton做爲子控件與之對應。工具

####也就是說,UITabBarButton是UITabBarController中各個子控制器在工具條中對應的按鈕的稱呼,測試

同時咱們能夠注意到一個現象,那就是咱們建立好UITabBarButton以後,各個UITabBarButton在UITabBar中的位置是均分的，UITabBar的高度爲49。 如: 我這裏有一個建立好的UITabBarControlleratom

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 建立4個子控制器
    [self setupChildViewController];
}

#pragma mark - 建立TabBarController的4個子控制器
// 封裝建立TabBarController的4個子控制器的方法
- (void)setupChildViewController {
    
    // 添加四個TabBarController的子控制器UINavigationController
    // 首頁Home
    UINavigationController *navHome = [self navigationControllerWithStoryboardName:@"DXHome"];
    [self setupOneChildViewController:navHome image:[UIImage imageNamed:@"tabbar_home"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_home_selected"] title:@"首頁"];
    
    // 消息message
    UINavigationController *navMessage = [self navigationControllerWithStoryboardName:@"DXMessage"];
    [self setupOneChildViewController:navMessage image:[UIImage imageNamed:@"tabbar_message_center"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_message_center_selected"] title:@"消息"];

    // 發現discover
    UINavigationController *navDiscover = [self navigationControllerWithStoryboardName:@"DXDiscover"];
    [self setupOneChildViewController:navDiscover image:[UIImage imageNamed:@"tabbar_discover"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_discover_selected"] title:@"發現"];

    // 我profile
    UINavigationController *navProfile = [self navigationControllerWithStoryboardName:@"DXProfile"];
    [self setupOneChildViewController:navProfile image:[UIImage imageNamed:@"tabbar_profile"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_profile_selected"] title:@"我"];
    
    // 添加到tabBar
    self.viewControllers = @[navHome, navMessage, navDiscover, navProfile];

}

#pragma mark - 建立一個子控制器的方法
// 封裝建立一個子控制器的方法
- (void)setupOneChildViewController:(UIViewController *)vc image:(UIImage *)image selectedImage:(UIImage *)selectedImage title:(NSString *)title {
  
    vc.tabBarItem.image = image;
    vc.tabBarItem.selectedImage = selectedImage;
    vc.tabBarItem.badgeValue = @"10";
    vc.tabBarItem.title = title;
}

#pragma mark - 封裝經過storyboard建立NavigationController的方法
// 封裝經過storyboard建立NavigationController的方法
- (UINavigationController *)navigationControllerWithStoryboardName:(NSString *)name {
    // 1. 加載storyboard文件
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:name bundle:nil];
    // 2. 建立Storyboard中的初始化控制器
    return [storyboard instantiateInitialViewController];
}

運行出來以後,效果是這樣的: 效果圖code

經過這個實例,能夠看出,在上面的程序中，UITabBarController有4個子控制器,因此UITabBar中有4個UITabBarButton，UITabBar的結構⼤大體以下圖所示：orm

UITabBar結構

&2 UITabBarButton⾥面顯⽰什麼內容,由對應子控制器的tabBarItem屬性來決定

代碼:繼承

// 封裝建立一個子控制器的方法
- (void)setupOneChildViewController:(UIViewController *)vc image:(UIImage *)image selectedImage:(UIImage *)selectedImage title:(NSString *)title {
  
    vc.tabBarItem.image = image;
    vc.tabBarItem.selectedImage = selectedImage;
    vc.tabBarItem.badgeValue = @"10";
    vc.tabBarItem.title = title;
}


  // 首頁Home
    UINavigationController *navHome = [self navigationControllerWithStoryboardName:@"DXHome"];
    [self setupOneChildViewController:navHome image:[UIImage imageNamed:@"tabbar_home"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_home_selected"] title:@"首頁"];

UITabBarButton的顯示內容

2. 如何查看UITabBarButton

##闡述: 只要有必定開發經驗的iOS攻城獅,只要你作過應用程序APP的開發,不可避免的都會用到UITabBarController, UITabBarController又稱標籤控制器 ,一樣是管理多控制器的,咱們通常的作法都是將多個(通常是4-6個之間)UINavigationController做爲UITabBarController的子控件,添加到UITabBarController的導航標籤欄(也叫工具條)UITabBar上;

今天在這裏,我要講的,不是怎樣建立一個UITabBarController,由於,這個比較簡單,也是每一個iOS攻城獅所須要必備的技能,那麼問題來了,今天,我要說什麼呢 ?

細心的朋友估計已經看出來了, 沒錯, 我要講的是, 在建立UITabBarController的UITabBar標籤欄的時候, 容易困擾也容易被你們忽視的UITabBarButton的問題.

1.什麼是UITabBarButton?

&1.

咱們都知道UITabBarController下方的工具條稱爲UITabBar ，若是UITabBarController有N個子控制器,那麼UITabBar內部就會有N 個UITabBarButton做爲子控件與之對應。

####也就是說,UITabBarButton是UITabBarController中各個子控制器在工具條中對應的按鈕的稱呼,

同時咱們能夠注意到一個現象,那就是咱們建立好UITabBarButton以後,各個UITabBarButton在UITabBar中的位置是均分的，UITabBar的高度爲49。 如: 我這裏有一個建立好的UITabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // 建立4個子控制器
    [self setupChildViewController];
}

#pragma mark - 建立TabBarController的4個子控制器
// 封裝建立TabBarController的4個子控制器的方法
- (void)setupChildViewController {
    
    // 添加四個TabBarController的子控制器UINavigationController
    // 首頁Home
    UINavigationController *navHome = [self navigationControllerWithStoryboardName:@"DXHome"];
    [self setupOneChildViewController:navHome image:[UIImage imageNamed:@"tabbar_home"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_home_selected"] title:@"首頁"];
    
    // 消息message
    UINavigationController *navMessage = [self navigationControllerWithStoryboardName:@"DXMessage"];
    [self setupOneChildViewController:navMessage image:[UIImage imageNamed:@"tabbar_message_center"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_message_center_selected"] title:@"消息"];

    // 發現discover
    UINavigationController *navDiscover = [self navigationControllerWithStoryboardName:@"DXDiscover"];
    [self setupOneChildViewController:navDiscover image:[UIImage imageNamed:@"tabbar_discover"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_discover_selected"] title:@"發現"];

    // 我profile
    UINavigationController *navProfile = [self navigationControllerWithStoryboardName:@"DXProfile"];
    [self setupOneChildViewController:navProfile image:[UIImage imageNamed:@"tabbar_profile"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_profile_selected"] title:@"我"];
    
    // 添加到tabBar
    self.viewControllers = @[navHome, navMessage, navDiscover, navProfile];

}

#pragma mark - 建立一個子控制器的方法
// 封裝建立一個子控制器的方法
- (void)setupOneChildViewController:(UIViewController *)vc image:(UIImage *)image selectedImage:(UIImage *)selectedImage title:(NSString *)title {
  
    vc.tabBarItem.image = image;
    vc.tabBarItem.selectedImage = selectedImage;
    vc.tabBarItem.badgeValue = @"10";
    vc.tabBarItem.title = title;
}

#pragma mark - 封裝經過storyboard建立NavigationController的方法
// 封裝經過storyboard建立NavigationController的方法
- (UINavigationController *)navigationControllerWithStoryboardName:(NSString *)name {
    // 1. 加載storyboard文件
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:name bundle:nil];
    // 2. 建立Storyboard中的初始化控制器
    return [storyboard instantiateInitialViewController];
}

運行出來以後,效果是這樣的: 效果圖

經過這個實例,能夠看出,在上面的程序中，UITabBarController有4個子控制器,因此UITabBar中有4個UITabBarButton，UITabBar的結構⼤大體以下圖所示：

UITabBar結構

&2 UITabBarButton⾥面顯⽰什麼內容,由對應子控制器的tabBarItem屬性來決定

代碼:

// 封裝建立一個子控制器的方法
- (void)setupOneChildViewController:(UIViewController *)vc image:(UIImage *)image selectedImage:(UIImage *)selectedImage title:(NSString *)title {
  
    vc.tabBarItem.image = image;
    vc.tabBarItem.selectedImage = selectedImage;
    vc.tabBarItem.badgeValue = @"10";
    vc.tabBarItem.title = title;
    
}


  // 首頁Home
    UINavigationController *navHome = [self navigationControllerWithStoryboardName:@"DXHome"];
    [self setupOneChildViewController:navHome image:[UIImage imageNamed:@"tabbar_home"] selectedImage:[UIImage imageWithOriginalName:@"tabbar_home_selected"] title:@"首頁"];

具體表現爲: 如圖 UITabBarButton的顯示的是tabBarItem屬性內容

2. 如何自定義UITabBarButton

首先咱們須要明確的是UITabBarButton是私有屬性private的, 怎樣驗證它是私有屬性呢? 你們能夠測試一下, 當咱們在代碼中想輸入 UITabBarButton的時候,是沒有提示的,並且到蘋果官方提供的框架中,和幫助文檔中, 都是找不到UITabBarButton的, 代碼輸入結果 幫助文檔查詢結果

那麼問題來了? 咱們如何能看見UITabBarButton呢? 或者說UITabBarButton是否是不存在呢? 這裏我能夠告訴你們的是, UITabBarButton確定存在!!

接下來我就把調出UITabBarButton的方法告訴你們: 看代碼:

在繼承自UITabBarController的類中

// 系統view控件準備好以後調用這個方法
- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    
    // 打印查看tabBar的全部子控件
     NSLog(@"----%@", self.tabBar.subviews);
}

輸出結果爲: 輸出結果 經過結果能夠看出: ** ** 經過打印self.tabBar.subviews的全部子控件的方法,就能夠輸出查看UITabBarButton; 能夠明顯的看出, 這個案例裏面的tabBar是由6個子控件的,其中有4個UITabBarButton控件,

3. 知道了UITabBarButton,那咱們能作什麼?

一旦咱們知道了UITabBarButton在哪裏,是什麼, 那麼咱們就能夠作不少事情了, 如:

&1. 能夠直觀的實時的檢測UITabBarButton的狀況,實時監控tabBar的狀態;
&2. 咱們能夠在不所有推倒tabBar重來的狀況下,自定義UITabBarButton的位置,
&3 ...... 固然還有其餘的功能,因爲時間關係,我這裏就不在贅述了, 你們能夠本身去嘗試....

一般來講,咱們主要是使用第2點, 好比, 新浪微博的tabBar,就是這樣使用的, 在不改變tabBar自己,不使用圖片代替tabBarItem的狀況下, 添加一個自定義的按鈕到tabBar工具條中, 同時,調整按鈕的位置,

4 效果演示:

咱們先來看看,新浪微博的tabBar工具條的效果圖: 新浪微博首頁效果 新浪微博首頁效果

tabBar工具條的效果圖: tabBar工具條的效果圖:

那這樣的效果, 須要怎樣來實現?

很簡單, 可是,又有很多值得注意的地方:

直接上代碼:

先建立一個自定義的TabBar類:

//  DXTabBar.h
//  DXSWeibo
//  Created by xiongdexi on 16/2/19.
//  Copyright © 2016年 DXSmile. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface DXTabBar : UITabBar

@end
//  DXTabBar.m
//  DXSWeibo
//  Created by xiongdexi on 16/2/19.
//  Copyright © 2016年 DXSmile. All rights reserved.
//

#import "DXTabBar.h"

@implementation DXTabBar
@end

返回DXTabBarController中, 建立自定義的tabBar

- (void)viewDidLoad {
    [super viewDidLoad];
    // 建立4個子控制器
    [self setupChildViewController];

    // 自定義tabBar
    // 1. 先建立一個自定義tabBar
    DXTabBar *tabBar = [[DXTabBar alloc] initWithFrame:self.tabBar.frame];
    
    NSLog(@"%@", self.tabBar);

    // 2. 利用KVC把readonly權限改過來
    [self setValue:tabBar forKeyPath:@"tabBar"];
    NSLog(@"%@", self.tabBar);
    
}

注意點: 以下

// tabBar的底層 權限是readonly(只讀)
@property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0); // Provided for -[UIActionSheet showFromTabBar:]. Attempting to modify the contents of the tab bar directly will throw an exception.
 /**
     *  分析: tabBar底層是隻讀的readonly權限,那咱們要自定義tabBar,如何來修改這個權限呢?
     *
     *  @return 能夠用KVC的方法
     */
// 2. 利用KVC把readonly權限改過來
    [self setValue:tabBar forKeyPath:@"tabBar"];

上面的測試輸出爲:

自定義tabBar

經過,輸出結果,能夠看出, 咱們已經成功的更改了tabBar的權限,改成了,咱們自定義的tabBar, 那麼此時咱們須要來驗證一下,是否還能夠拿到UITabBarButton;

一樣調用以前的方法: 這裏咱們在另外一個方法中來測試,

// 系統在即將開始爲view準備控件的時候調用這個方法
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    NSLog(@"%@", self.tabBar.subviews);
}

輸出結果爲:

自定義以後從新驗證UITabBarButton 那麼接下來,咱們就能夠開始寫代碼了:

//  DXTabBar.m
//  DXSWeibo
//  Created by xiongdexi on 16/2/19.
//  Copyright © 2016年 DXSmile. All rights reserved.
//

#import "DXTabBar.h"
@interface DXTabBar ()
// 定義中間按鈕的屬性
@property (nonatomic, weak) UIButton *plusButton;
@end

@implementation DXTabBar
#pragma mark - 懶加載設置中間按鈕 保證只有一個
- (UIButton *)plusButton {
   if (_plusButton == nil) {
       // 1.根據自定義類型初始化一個button
       UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
       // 2.設置btn的各狀態的圖片屬性
       [btn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
       [btn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
       [btn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
       [btn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
       // 3. 設置btn按鈕的尺寸和圖片的默認大小同樣大
       [btn sizeToFit];
       
       // 4. 把按鈕賦值給_plusButton
       _plusButton = btn;
       
       // 5. 把按鈕添加到tabBar中 ,創建強引用
       [self addSubview:_plusButton];
   } 
   return _plusButton;
}

#pragma mark - 調整子控件的位置和尺寸
// 調整子控件的位置和尺寸
- (void)layoutSubviews {
   [super layoutSubviews];
   CGFloat w = self.bounds.size.width;
   CGFloat h = self.bounds.size.height;
   
   CGFloat butX = 0;  // x 是不肯定的,能夠初始化爲0
   CGFloat butY = 0;  // y 就是0
   CGFloat butW = w / (self.items.count + 1); // 有幾個UITabBarButton就有幾個items模型
   CGFloat butH = h;
   
   int i = 0; // 定義角標,初始化爲0
   // 調整系統自帶的tabBar上面的按鈕的位置
   for (UIView *tabBarButton in self.subviews) {
       // 判斷是不是UITabBarButton
       if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
           
           // 由於中間須要預留一個位置,因此,當i到中間的是,就跳過
           if (i == 2) {
               i = 3;
           }
           butX = i * butW;  
           tabBarButton.frame = CGRectMake(butX, butY, butW, butH);
           i++;
       }
   }

   // 設置中間按鈕的位置
   self.plusButton.center = CGPointMake(w * 0.5, h * 0.5);
}

效果圖:

中間按鈕效果圖

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