iOS UITabBarController基本使用

底部TabBar能夠說每一個App的標配了,大部分一個Tab就是App的一個模塊的功能首頁。在Android中,底部TabBar通常用RadioGroup和RadioButton來自定義,就是單選組和單選按鈕。而iOS上則提供了UITabBarController。Android上的TabBar切換通常爲Fragment,而iOS上的TabBar切換是切換ViewController。數組

Android直觀感受就是給你一堆控件,你本身自由發揮,而iOS則是封裝好了給你讓你直接用,還把建議給你,按照他來作就行了。bash

UITabBarController示例.png

UITabBarController建立和基本配置

UITabBarController就是多個ViewController的容器,他們之間的層級是平行的,它會在底部添加一個TabBar的UIView,經過點擊TabBar上的按鈕tabBarItem來切換對應的ViewController。app

  • UITabBarController通常配合UINavigationController來使用,這樣能夠實現多Tab,多棧跳轉頁面視圖。

分爲4步走:ui

  1. 建立Tab所屬的ViewController。
  2. 建立一個數組,將控制器放到數組中。
  3. 建立UITabBarController,將控制器數組設置給它。
  4. 將UITabBarController設置爲Window的rootViewController。
  5. 顯示Window。
@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:UIScreen.mainScreen.bounds];
    //1.建立Tab所屬的ViewController
    //首頁
    HomeViewController *homeVC = [[HomeViewController alloc] init];
    UINavigationController *homeNav = [[UINavigationController alloc] initWithRootViewController:homeVC];
    homeNav.navigationBar.translucent = NO;
    
    //工做
    WorkViewController *workVC = [[WorkViewController alloc] init];
    UINavigationController *workNav = [[UINavigationController alloc] initWithRootViewController:workVC];
    workNav.navigationBar.translucent = NO;
    
    //通知
    NoticeViewController *noticeVC = [[NoticeViewController alloc] init];
    UINavigationController *noticeNav = [[UINavigationController alloc] initWithRootViewController:noticeVC];
    noticeNav.navigationBar.translucent = NO;
    
    //個人
    MineViewController *mineVC = [[MineViewController alloc] init];
    UINavigationController *mineNav = [[UINavigationController alloc] initWithRootViewController:mineVC];
    mineNav.navigationBar.translucent = NO;
    
    //二、建立一個數組,放置多有控制器
    NSArray *vcArray = [NSArray arrayWithObjects:homeNav, workNav, noticeNav, mineNav, nil];
    
    //三、建立UITabBarController,將控制器數組設置給UITabBarController
    UITabBarController *tabBarVC = [[UITabBarController alloc] init];
    //設置多個Tab的ViewController到TabBarViewController
    tabBarVC.viewControllers = vcArray;
    
    //四、將UITabBarController設置爲Window的RootViewController
    self.window.rootViewController = tabBarVC;
    //顯示Window
    [self.window makeKeyAndVisible];
    return YES;
}

@end
複製代碼

TabBar樣式和紅點氣泡

通過上面的設置,3個Tab的ViewController能顯示也能切換。可是TabBar上沒有控件顯示,TabBar的控件經過UITabBarItem來設置,每一個ViewController都有一個self.tabBarItem屬性,經過設置一個屬性來設置TabBar上的Tab。下面演示的方法都在ViewContoller中使用。spa

  • 以Tab文字和非選中、選中圖片來建立Tab,按鈕的UIImage默認會受TabBar的tintColor屬性影響而着色,通常但願不跟隨tintColor屬性,會使用imageWithRenderingMode設置UIImageRenderingModeAlwaysOriginal來保持圖片原有的顏色。
//根據標題、非選中圖片、選中圖片來構建一個Tab
UITabBarItem *tabItem = [[UITabBarItem alloc] initWithTitle:@"首頁" image:[[UIImage imageNamed:@"home_icon_home_normal"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] selectedImage:[[UIImage imageNamed:@"home_icon_home_selected"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]];
//設置Tab
self.tabBarItem = tabItem;
複製代碼
  • 以系統圖標風格來構建一個Tab
UITabBarItem* tabItem = [[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:1];
//設置Tab
self.tabBarItem = tabItem;
複製代碼
  • 設置未讀紅點
//設置未讀數量字符串
tabItem.badgeValue = @"99+";
複製代碼

TabBar風格

  • 設置TabBar是否透明,默認爲透明
tabBarVC.tabBar.translucent = NO;
複製代碼
  • 設置TabBar的顏色
tabBarVC.tabBar.barTintColor = [UIColor redColor];
複製代碼
  • 設置TabBar的風格顏色,會將圖片和文字都設置,除非圖片設置了imageWithRenderingMode爲UIImageRenderingModeAlwaysOriginal。
tabBarVC.tabBar.tintColor = [UIColor redColor];
複製代碼

UITabBarController的Api和代理方法

  • 設置默認選擇控制器的索引
//選中第三個Tab
tabBarVC.selectedIndex = 2;
複製代碼
  • 獲取當前選中的Tab的索引
NSUInteger curSelectIndex = tabBarVC.selectedIndex;
NSLog(@"當前選中的Tab角標:%lu", curSelectIndex);
複製代碼
  • 獲取當前選中的Tab的ViewController
UIViewController *curSelectVC = tabBarVC.selectedViewController;
複製代碼
  • 設置UITabBarController代理
//1.遵循協議UITabBarControllerDelegate
@interface AppDelegate : UIResponder <UIApplicationDelegate, UITabBarControllerDelegate>

@end

//2.設置代理
tabBarVC.delegate = self;

/**
 * 當選中控制器時回調
 */
- (void) tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    //選中的ViewController實例
    UIViewController *selectVC = tabBarController.selectedViewController;
    NSLog(@"選中的index: %zd, 選中的ViewController: %@", tabBarController.selectedIndex, selectVC);
}
複製代碼
相關文章
相關標籤/搜索