天天看點

UITabBarController--頁籤欄控制器

UITabBarController–頁籤欄控制器

繼承關系

NSObject->UIResponder->UIViewController->UITabBarController

術語

UITabBarController: 頁籤欄控制器

tab: 頁籤

tabBar:頁籤欄

TabBarItem: 頁籤标簽元素

簡介

UITabBarController類實作了一個專門的視圖控制器以單選的方式選擇界面。UITabBarController通常作為整個程式的rootViewController,而且不能添加到别的container viewController中。

tabBar中每一個tab都是

TabBarItem

執行個體,并且和自定義的ViewController關聯。

當使用者點選特定的一個tab時,顯示其相關聯的視圖,替換原先的視圖。

UITabBarController--頁籤欄控制器
UITabBarController--頁籤欄控制器

建立UITabBarController

1、建立一個UITabBarController對象

2、建立tabbarcontroller中每一個tab對應的要顯示的對象

3、通過UITabBarController的viewController屬性将要顯示的所有content

viewcontroller添加到UITabBarController中

4、通過設定UITabBarController對象為window.rootViewController,然後顯示window 。

UITabBarItem

 UITabBar上面顯示的每一個Tab都對應着一個ViewController,我們可以通過設定viewcontroller.tabBarItem屬性來改變tabbar上對應的tab顯示内容。否則系統将會根據viewController的title自動建立一個,該tabBarItem隻顯示文字,沒有圖像。當我們自己建立UITabBarItem的時候,我們可以顯示的指定顯示的圖像和對應的文字描述。

Demo

1、AppDelegate中實作代碼

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.

        //定義window
        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
        //顯示window
        self.window!.makeKeyAndVisible()
        let root = RootTabBarController()
        // 設定根視圖
        self.window?.rootViewController = root
        return true
    }
           

2、定義RootTabBarController類

class RootTabBarController: UITabBarController, UITabBarControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
       //建立子視圖控制器
       creatSubViewControllers()
        self.delegate = self
    }
func creatSubViewControllers(){

        //第一個控制器采用預設tabBarItem
        let firstVC = HomeViewController()
        firstVC.tabBarItem.title = "消息"
       //設定圖示
        firstVC.tabBarItem.image =  UIImage(named: "icon_message")
        firstVC.tabBarItem.selectedImage = UIImage(named: "icon_message_selected")
        // 氣泡标記值
        firstVC.tabBarItem.badgeValue = "10"

        //配置多個視圖控制器
        let classArr = [ContactsViewController(), OtherViewController(), UIViewController(),UIViewController(), UIViewController()]
        //标題配置數組
        let titleArr = ["聯系人", "設定", "遊戲", "音樂", "更多"]
        //圖示配置數組
        let iconArr = ["icon_contacts", "icon_set", "icon_games_control", "icon_headphones", "icon_more"]
        //定義可編輯控制器數組
        var customItemArr = [UIViewController]()
        //是以控制器數組
        var tabBarItemArr:Array = [UIViewController]()
        tabBarItemArr.append(firstVC)

        let count = classArr.count
        for var i = ; i < count; i++ {
        //設定圖示的渲染模式為.AlwaysOriginal,不然圖示顯示為色塊
            let defaultImage = UIImage(named: iconArr[i])?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            let selectedImage = UIImage(named: iconArr[i]+"_selected")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            let itemBar = UITabBarItem(title: titleArr[i], image: defaultImage, selectedImage: selectedImage)
            let vc = classArr[i]
            vc.tabBarItem = itemBar
            tabBarItemArr.append(vc)

            if i %   ==  { customItemArr.append(vc)}
        }
        //設定 tabBarController控制器集合
        self.viewControllers = tabBarItemArr
        self.customizableViewControllers = customItemArr

    }
           

3、重要說明

代碼中

firstVC.tabBarItem.image = UIImage(named: “icon_message”)

firstVC.tabBarItem.selectedImage = UIImage(named: “icon_message_selected”)

沒有設定圖示渲染模式,但在Assets.xcassets中設定了渲染模式為Original Image(原圖)如“圖1”所示,是以圖示正常顯示。

UITabBarController--頁籤欄控制器

moreNavigationController

  UITabBar上最多可以顯示5個Tab,當我們往UITabBarController中添加超過的viewController超過5個時候,最後一個一個就會自動變成 More(圖2所示),按照設定的viewControlles的順序,顯示前四個viewController的tabBarItem,後面的tabBarItem将不再顯示。

UITabBarController--頁籤欄控制器

當點選more時候将會彈出一個标準的navigationViewController,裡面放有其它未顯示的的viewController,并且帶有一個edit按鈕,通過點選該按鈕可以進入類似與ipod程式中設定tabBar的編輯界面。

UITabBarController--頁籤欄控制器

編輯界面,可操作互換tab 位置

UITabBarController--頁籤欄控制器

編輯界面中預設所有的viewController都是可以編輯的,我們可以通過設定UITabBarController的customizableViewControllers屬性來指定viewControllers的一個子集,即隻允許一部分viewController是可以放到tabBar中顯示的。

demo中代碼

self.customizableViewControllers = customItemArr

但是這塊兒要注意一個問題就是每當UITabBarController的viewControllers屬性發生變化的時候,customizableViewControllers就會自動設定成跟viewControllers一緻,即預設的所有的viewController都是可以編輯的,如果我們要始終限制隻是某一部分可編輯的話,記得在每次viewControlles發生改變的時候,重新設定一次customizableViewControllers。

  

Change Selected Viewcontroller

  改變UITabBarController中目前顯示的viewController,可以通過一下兩種方法:

  1、selectedIndex屬性

  

通過該屬性可以獲得目前選中的viewController,設定該屬性,可以顯示viewControllers中對應的index的viewController。如果目前選中的是MoreViewController的話,該屬性擷取出來的值是NSNotFound,而且通過該屬性也不能設定選中MoreViewController。設定index超出viewControllers的範圍,将會被忽略。

  2、selectedViewController屬性

通過該屬性可以擷取到目前顯示的viewController,通過設定該屬性可以設定目前選中的viewController,同時更新selectedIndex。可以通過給該屬性指派

tabBarController.moreNavigationController可以選中moreViewController。

  3、viewControllers屬性

設定viewControllers屬性也會影響目前選中的viewController,設定該屬性時UITabBarController首先會清空所有舊的viewController,然後部署新的viewController,接着嘗試重新選中上一次顯示的viewController,如果該viewController已經不存在的話,會接着嘗試選中index和selectedIndex相同的viewController,如果該index無效的話,則預設選中第一個viewController。

UITabBarControllerDelegate

代理方法,可進行自定義配置,這裡有些方法具體功能待了解後再做詳細的記錄。

//MARK: - UITabBarControllerDelegate

    //使用者點選标簽所屬的控制器是否處于活動狀态: true表示點選時控制器的tab可以被選中,false:不能選中
    func tabBarController(tabBarController: UITabBarController, shouldSelectViewController viewController: UIViewController) -> Bool {
        print("shoudSelectViewControlelr")
        return true
    }
    //tabBar被選中調用
    func tabBarController(tabBarController: UITabBarController, didSelectViewController viewController: UIViewController) {
       print("didSelectedViewController")
    }
    //tabBarController支援的方向集
    func tabBarControllerSupportedInterfaceOrientations(tabBarController: UITabBarController) -> UIInterfaceOrientationMask {
        return UIInterfaceOrientationMask.PortraitUpsideDown
    }
    //設定tabBarController的首選方向(橫向,縱向等)
    func tabBarControllerPreferredInterfaceOrientationForPresentation(tabBarController: UITabBarController) -> UIInterfaceOrientation {
        return UIInterfaceOrientation.PortraitUpsideDown
    }
    //轉場動畫控制
    func tabBarController(tabBarController: UITabBarController, animationControllerForTransitionFromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return nil
    }
    //将要定義視圖控制器
    func tabBarController(tabBarController: UITabBarController, willBeginCustomizingViewControllers viewControllers: [UIViewController]) {

    }
    // 将要結束定義視圖控制器
    func tabBarController(tabBarController: UITabBarController, willEndCustomizingViewControllers viewControllers: [UIViewController], changed: Bool) {

    }
    //結束定義視圖控制器
    func tabBarController(tabBarController: UITabBarController, didEndCustomizingViewControllers viewControllers: [UIViewController], changed: Bool) {

    }
           

繼續閱讀