1. 程式人生 > >iOS 自定製TabBar(中間是一個大按鈕)

iOS 自定製TabBar(中間是一個大按鈕)

許多APP中都有這個效果,點選中間的大按鈕就會present一個頁面出來,關閉這個頁面就返回到之前的頁面
這個功能看起來很神奇,其實實現起來也相當簡單
實現方式:建立一個類繼承自UITabBar,在view上新增一個大的按鈕 放到中間,然後需要寫一個代理 用來實現按鈕的點選事件
效果如下圖:
這裡寫圖片描述

這是用Swift寫的demo
一、建立自定製TabBar的類
二、建立協議,宣告點選按鈕的事件
三、在按鈕點選事件裡呼叫代理方法

//
//  LAXTabBar.swift
//  MeiLiTV
//
//  Created by 冰涼的枷鎖 on 2017/3/9.
//  Copyright © 2017年 冰涼的枷鎖. All rights reserved.
// import UIKit protocol LAXTabBarDelegate : UITabBarDelegate { func tabBarDidClickPlusButton(_: LAXTabBar) } class LAXTabBar: UITabBar { init() { super.init(frame: CGRect.init(x: 0, y: ScreenHeight - 49, width: ScreenWidth, height: 49)) plusButton.center = CGPoint.init(x: ScreenWidth / 2
, y: 49 - plusButton.bounds.size.height / 2) self.addSubview(plusButton) } convenience init(delegate: LAXTabBarDelegate) { self.init() self.tabbarDelegate = delegate } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented"
) } lazy var plusButton: UIButton = { let btn = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 55, height: 55)) btn.setImage(UIImage.init(named: PlusButtonImage), for: .normal) btn.addTarget(self, action: #selector(plusButtonAction(sender:)), for: .touchUpInside) return btn }() var tabbarDelegate: LAXTabBarDelegate? func plusButtonAction(sender: UIButton) { self.tabbarDelegate?.tabBarDidClickPlusButton(self) } }

四、建立一個類,繼承UITabBarController,設定tabbar為自定製的tabbar
五、實現協議方法

class RootViewController: UITabBarController, LAXTabBarDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        let tabBar = LAXTabBar.init(delegate: self)
        self.setValue(tabBar, forKey: "tabBar")

        self.tabBar.barTintColor = TabBarColor
        self.tabBar.tintColor = OrangeColor
        if #available(iOS 10.0, *) {
            self.tabBar.unselectedItemTintColor = WhiteColor
        } else {
            // Fallback on earlier versions
        }

    }

    func tabBarDidClickPlusButton(_: LAXTabBar) {
        let vc = LiveViewController()
        self.present(vc, animated: true, completion: nil)
    }

}

最後在控制器中新增五個個頁面,第三個item只是一個佔位的作用,不要設定title和image。這裡的程式碼我就不寫了,想看效果的去github上下載吧https://github.com/ColdChains/LAXTabBarController