“`html

簡要

在每個 iOS 應用程式中，TabBar 和 NavigationBar 是最基本的組件，外送平台的底層架構也不例外。這兩個 Bar 可以根據需求顯示或隱藏。為了避免在 AppDelegate 中的程式碼過於雜亂，我們將其分為更細的結構：TabBarController、TabBar 和 NavigationController，然後再由 AppDelegate 進行呼叫。這樣的組織結構會更清晰。

環境設定

首先，請建立 TabBarController、TabBar 和 NavigationController 三個類別，您可以自由命名。

TabBar 和 NavigationBar 的結構示意圖

AppDelegate 設定

在 AppDelegate 中，宣告剛剛建立好的 TabBarController，並將其設置為 rootViewController。

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)

呈現圖
UITabBar 背景顏色設定

使用 self.backgroundImage

let transparentBlackColor = 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)
transparentBlackColor.setFill()
UIRectFill(rect)
if let image = UIGraphicsGetImageFromCurrentImageContext() {
    self.backgroundImage = image
}
UIGraphicsEndImageContext()

呈現圖
利用 UIGraphics 生成背景圖

在使用 self.backgroundColor 時，可能會出現一層透明的白色覆蓋，這可能需要調整其他變數或隱藏某些物件。這個問題可以在未來進一步處理。

UITabBar 進階功能

如果希望讓 TabBar 更具互動性，可以在 UITabBar 的 layoutSubviews 方法中添加特效或其他 點擊事件 的處理。例如，可以讓 Button 在點擊時輕微跳動，增強用戶互動體驗。

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: .touchUpInside)
            }
        }
    }
}

buttonClicked

當用戶點擊 Button 時，觸發 touchUpInside 事件，所觸發的 Button 將在指定的 duration 時間內實現放大縮小特效，該特效由 animation.values 控制。

@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 = .cubic
                imageView.layer.add(animation, forKey: nil)
            }
        }
    }
}

Demo
TabBar 互動效果示範

點擊這裡了解更多

Q&A（常見問題解答）

1. 如何在 TabBar 中添加自定義按鈕？

您可以在 layoutSubviews 方法中自定義添加按鈕，並為其設置目標行為。

2. 如何處理 TabBar 的點擊事件？

使用 addTarget(_:action:for:) 方法為每個 TabBar Button 設置觸發事件。

3. 如何調整 TabBar 的外觀？

可以通過修改 backgroundColor 和 backgroundImage 來改變 TabBar 的外觀，並使用自定義的圖像來提升視覺效果。
“`
—

Categorized in:

swift