簡要

每個APP最基本都會運用到 TabBar+NavigationBar
外送平台也不例外 基本上底層架構都差不多
上下的Bar 有時有 有時隱藏的運用
為了必免全都寫在AppDelegate太過雜亂
我們這邊分為更細 TabBarController+TabBar+NavigationController
然後再給AppDelegate做呼叫
這樣應該整理的不錯

環境

麻煩先把TabBarController+TabBar+NavigationController
三個class先建立好
名稱可以取自己要的

https://ithelp.ithome.com.tw/upload/images/20190917/20112271SwBjCi492n.png

AppDelegate

宣告剛剛建立好的TabBarController
並且讓rootViewController等於TabBarController

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let tabBarController = JGTabBarController()
    self.window?.rootViewController = tabBarController
    return true
}

UITabBar

UITabBar 在設置backgroundColor
如果直接使用self.backgroundColor這個變數
得出的顏色與設定的有所不同
後面使用self.backgroundImage
顏色才恢復正常

self.backgroundColor

self.backgroundColor = UIColor(displayP3Red: 0.1, green: 0.4, blue: 0.9, alpha: 0.8)

呈現圖
https://ithelp.ithome.com.tw/upload/images/20190917/20112271Vv66L5oyMk.png

self.backgroundImage

let transperentBlackColor = UIColor(displayP3Red: 0.1, green: 0.4, blue: 0.9, alpha: 0.8)
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
transperentBlackColor.setFill()
UIRectFill(rect)
if let image = UIGraphicsGetImageFromCurrentImageContext() {
    self.backgroundImage = image
}
UIGraphicsEndImageContext()

呈現圖
https://ithelp.ithome.com.tw/upload/images/20190917/20112271oCNeWbXHGM.png

self.backgroundColor上面會有一層透明白色蓋在上面
應該是有其他變數要設定或是物件需要隱藏
這下次有時間再回來處理這個

UITabBar 其他進階

如果想讓TabBar豐富點
特效多一點 或是有其他點擊事件特殊處理
可以在’UITabBar裡的layoutSubviews做控制
譬如讓點擊時Button會微微跳動
讓APP更生動 添加觸擊回饋讓使用者體驗更好

layoutSubviews

控制每一個Button新增點擊事件

override func layoutSubviews() {
    super.layoutSubviews()
    var tabBarBtnIndex = 0;
    for subView in self.subviews {
        if let navButtonClass = NSClassFromString("UITabBarButton") {
            if subView.isKind(of: navButtonClass) {
                tabBarBtnIndex += 1
                print(tabBarBtnIndex)

                let tabBarBtn = subView as? UIControl
                tabBarBtn!.addTarget(self, action: #selector(buttonClicked(tabBarButton:)), for: UIControl.Event.touchUpInside)
            }
        }
    }
}

buttonClicked

當點擊Button觸發touchUpInside
所觸擊的Button會隨著我們所設定duration時間內
實現放大縮小特效
特效得呈現由animation.values控制
塞入越多質 按鈕就會像彈簧一樣在duration時間內變化

@IBAction func buttonClicked(tabBarButton: UIControl) {
    for imageView in tabBarButton.subviews {
        if let navButtonClass = NSClassFromString("UITabBarSwappableImageView") {
            if imageView.isKind(of: navButtonClass) {
                let animation = CAKeyframeAnimation(keyPath: "transform.scale")
                animation.values = [1.0,1.15,1.0];
                animation.duration = 0.2;
                animation.calculationMode = CAAnimationCalculationMode.cubic;
                imageView.layer.add(animation, forKey: nil)
            }
        }
    }
}

Demo

Categorized in:

swift