6.UITabBarController

UITabBarController

UITabBarController實現底部切換的效果非常方便,如下圖

下面我們學習如何實現這種效果

1. UITabBarController的創建

AppDelegate.swift中,我們創建一個UITabBarController

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    self.window = UIWindow(frame: UIScreen.mainScreen().bounds)

    self.navBarConfig()

    let tabBarController = MainTabBarController()
    window?.rootViewController = tabBarController

    window?.makeKeyAndVisible()

    return true
}

上面的代碼中我們創建了一個MainTabBarController,並且它設置爲rootViewController, 下面我們實現MainTabBarController類

import UIKit

class MainTabBarController: UITabBarController {
    let titles = ["美女", "星座", "笑話"]

    override func viewDidLoad() {
        super.viewDidLoad()

        let vc1 = ViewController()
        let nav1 = UINavigationController(rootViewController: vc1)
        // 設置底部標籤的標題
        vc1.tabBarItem.title = titles[0]
        // 設置底部標籤的圖片
        vc1.tabBarItem.image = UIImage(named: "fa-female")


        let vc2 = ViewController2()
        let nav2 = UINavigationController(rootViewController: vc2)
        vc2.tabBarItem.title = titles[1]
        vc2.tabBarItem.image = UIImage(named: "fa-star")

        let vc3 = ViewController3()
        let nav3 = UINavigationController(rootViewController: vc3)
        vc3.tabBarItem.title = titles[2]
        vc3.tabBarItem.image = UIImage(named: "fa-plane")

        self.viewControllers = [nav1, nav2, nav3]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

上面的代碼中我們設置了UITabBarController的3個內容頁, 並設置了底部標籤的標題和圖片, 其中ViewController和ViewController2使用第5節UINavigationController的代碼.ViewController3中簡單的修改一下背景顏色即可,方便區別其它UIViewController.

import UIKit

class ViewController3: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        self.view.backgroundColor = UIColor.blueColor()
        self.title = "笑話"

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

現在我們看看效果:

2. 設置底部tab欄的顏色,標題和圖片選中顏色

在AppDelegate.swift中我們添加一個方法:

func tabBarConfig() {
    let tabBar = UITabBar.appearance()
    // 設置按鈕和文字的選中顏色
    tabBar.tintColor = UIColor(red: 0xff/255.0, green: 0x52/255.0, blue: 0x56/255.0, alpha: 1.0)
    // 設置底部的tabBar的顏色
    tabBar.barTintColor = UIColor.whiteColor()
    // 底部的tabBar是否半透明
    tabBar.translucent = false
}

然後調用它

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    self.window = UIWindow(frame: UIScreen.mainScreen().bounds)

    self.tabBarConfig()
    self.navBarConfig()

    let tabBarController = MainTabBarController()
    window?.rootViewController = tabBarController

    window?.makeKeyAndVisible()

    return true
}

運行程序, 發現顏色已經變成我們需要的顏色了

3. 使用storyboard

操作的東西用語言描述不清楚,最好找個視頻看看storyboard的使用,也不難!

運行程序:

4. 完整代碼

AppDelegate.swift

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)

        self.tabBarConfig()
        self.navBarConfig()

        let tabBarController = MainTabBarController()
        window?.rootViewController = tabBarController

        window?.makeKeyAndVisible()

        return true
    }


    func navBarConfig() {
        let bar = UINavigationBar.appearance()
        //設置導航欄的顏色
        bar.barTintColor = UIColor(red: 0xff/255.0, green: 0x52/255.0, blue: 0x56/255.0, alpha: 1.0)
        //設置按鈕的顏色
        bar.tintColor = UIColor.whiteColor()
        // 設置標題顏色
        bar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()];
        // 導航欄是否半透明
        bar.translucent = false
    }

    func tabBarConfig() {
        let tabBar = UITabBar.appearance()
        // 設置按鈕和文字的選中顏色
        tabBar.tintColor = UIColor(red: 0xff/255.0, green: 0x52/255.0, blue: 0x56/255.0, alpha: 1.0)
        // 設置底部的tabBar的顏色
        tabBar.barTintColor = UIColor.whiteColor()
        // 底部的tabBar是否半透明
        tabBar.translucent = false
    }

    func applicationWillResignActive(application: UIApplication) {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
        // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
    }

    func applicationDidEnterBackground(application: UIApplication) {
        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
    }

    func applicationWillEnterForeground(application: UIApplication) {
        // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
    }

    func applicationDidBecomeActive(application: UIApplication) {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    }

    func applicationWillTerminate(application: UIApplication) {
        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
    }


}

---

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor.whiteColor()

        self.title = "美女"

        let button = UIButton(type: .Custom)
        button.frame = CGRect(x: 0, y: 100, width: 100, height: 40)
        // 設置不同狀態文字
        button.setTitle("Normal", forState: .Normal)
        button.setTitle("Highlighted", forState: .Highlighted)
        button.setTitle("Disabled", forState: .Disabled)
        // 設置不同狀態文字顏色
        button.setTitleColor(UIColor.redColor(), forState: .Normal)
        button.setTitleColor(UIColor.blueColor(), forState: .Highlighted)
        button.setTitleColor(UIColor.grayColor(), forState: .Disabled)

        button.setBackgroundImage(UIImage(named: "normal"), forState: .Normal)
        button.setBackgroundImage(UIImage(named: "highlighted"), forState: .Highlighted)
        button.setBackgroundImage(UIImage(named: "disabled"), forState: .Disabled)

        button.addTarget(self, action: "buttonAction:", forControlEvents: .TouchUpInside)

        self.view.addSubview(button)
    }

    func buttonAction(sender: UIButton) {
        // 跳轉到ViewController2
        let vc = ViewController2()
        vc.age = 100

        self.navigationController?.pushViewController(vc, animated: true)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }


}

---

UIViewController2.swift

import UIKit


class ViewController2: UIViewController {

    var age: Int?

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor(red: 0xff/255.0, green: 0x00/255.0, blue: 0xff/255.0, alpha: 1.0)

        self.title = "星座"

        let button = UIButton(type: .Custom)
        button.frame = CGRect(x: 0, y: 200, width: 100, height: 40)
        // 設置不同狀態文字
        button.setTitle("返回", forState: .Normal)
        button.setTitle("返回", forState: .Highlighted)
        button.setTitle("返回", forState: .Disabled)
        // 設置不同狀態文字顏色
        button.setTitleColor(UIColor.redColor(), forState: .Normal)
        button.setTitleColor(UIColor.blueColor(), forState: .Highlighted)
        button.setTitleColor(UIColor.grayColor(), forState: .Disabled)

        button.setBackgroundImage(UIImage(named: "normal"), forState: .Normal)
        button.setBackgroundImage(UIImage(named: "highlighted"), forState: .Highlighted)
        button.setBackgroundImage(UIImage(named: "disabled"), forState: .Disabled)

        button.addTarget(self, action: "backAction:", forControlEvents: .TouchUpInside)

        self.view.addSubview(button)

        // 添加導航欄詳情按鈕
        let detailBtn = UIBarButtonItem(title: "詳情", style: .Plain, target: self, action: "detailAction:")
        self.navigationItem.rightBarButtonItem = detailBtn

    }

    func detailAction(sender: UIBarButtonItem) {
        print("跳轉到詳情\(sender.title)")
    }

    func backAction(sender: UIButton) {
        // 返回
        self.navigationController?.popViewControllerAnimated(true)
    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

}

---

ViewController3.swift

import UIKit

class ViewController3: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        self.view.backgroundColor = UIColor.blueColor()
        self.title = "笑話"

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

---

MainTabBarController.swift

import UIKit

class MainTabBarController: UITabBarController {
    let titles = ["美女", "星座", "笑話"]

    override func viewDidLoad() {
        super.viewDidLoad()

        let vc1 = ViewController()
        let nav1 = UINavigationController(rootViewController: vc1)
        // 設置底部標籤的標題
        vc1.tabBarItem.title = titles[0]
        // 設置底部標籤的圖片
        vc1.tabBarItem.image = UIImage(named: "fa-female")


        let vc2 = ViewController2()
        let nav2 = UINavigationController(rootViewController: vc2)
        vc2.tabBarItem.title = titles[1]
        vc2.tabBarItem.image = UIImage(named: "fa-star")

        let vc3 = ViewController3()
        let nav3 = UINavigationController(rootViewController: vc3)
        vc3.tabBarItem.title = titles[2]
        vc3.tabBarItem.image = UIImage(named: "fa-plane")

        self.viewControllers = [nav1, nav2, nav3]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}