使用Swift開發一個貝樂虎啓蒙App - 自定義tabBar｜8月更文挑戰

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

前言

上一篇咱們已經把網絡請求封裝好了，如今咱們就開始搭框架。

分析頁面結構

根據下面圖片咱們能夠看出，整個app底層是一個UITabBarController，裏面有五個item，分別是首頁、學堂、VIP、成長樂園、個人。因此咱們新建5個對應UIViewController。觀察底部UITabBar發現，中間的VIP是凸起的，因此這就須要自定義UITabBar了

定義UITabBar

一、新增一個MainTabBarController繼承UITabBarController，咱們先把首頁、學堂、成長樂園、個人控制器添加到MainTabBarController

二、新建MainTabBar繼承UITabBar

三、在MainTabBar裏面重寫layoutSubviews()方法來調整四個按鈕的佈局

override func layoutSubviews() {
    super.layoutSubviews()
    guard let count = items?.count else { return }
    var index = 0
    let width = frame.size.width / CGFloat(count + 1)
    let height = frame.size.height
    for subView in subviews {
        if NSStringFromClass(type(of: subView)) == "UITabBarButton" {
            if index == 2 {
                index += 1
            }
            subView.frame = CGRect(x: CGFloat(index) * width, y: 0, width: width, height: height)
            index += 1
        }
    }
}
複製代碼

如今位置已經調整好了，而後在中間加個view就好了，實踐發現，中間的VIP凸起部分若是本身本身搞圓角的話，沒有那麼圓滑，因此應該是個圖片，而後在資源庫裏面果真找到了，把圖片放到工程裏面後，咱們開始把這個圖片放上去

四、自定義VIP view，而後在layoutSubviews()裏面設置vipView的center，具體細節本身調整

private lazy var vipView: UIImageView = {
    let view = UIImageView()
    view.image = "tabbar_middlebulge_backImg".image
    return view
}()

private lazy var vipImageView: UIImageView = {
    let view = UIImageView()
    view.image = "tabbar_vip_normal".image
    view.contentMode = .scaleAspectFit
    return view

}()

private lazy var vipLabel: UILabel = {
    let view = UILabel()
    view.textColor = .c999999
    view.text = "VIP"
    view.font = UIFont.systemFont(ofSize: 10)
    return view
}()

override init(frame: CGRect) {
    super.init(frame: frame)

    vipView.frame = CGRect(x: 0, y: 0, width: (UIScreen.width - 20) / 5 - 10, height: 61)
    addSubview(vipView)
    vipView.addSubview(vipLabel)
    vipView.addSubview(vipImageView)

    vipLabel.snp.makeConstraints { make in
        make.centerX.equalToSuperview()
        make.bottom.equalToSuperview()
        make.height.equalTo(16)
    }
    
    vipImageView.snp.makeConstraints { make in
        make.centerX.equalToSuperview()
        make.bottom.equalTo(vipLabel.snp.top)
        make.size.equalTo(CGSize(width: 40, height: 40))
    }
}

/// 在layoutSubviews()裏面設置vipView的center
vipView.center = CGPoint(x: center.x, y: 20)
複製代碼

如今樣式已經搞好了，可是如今有個問題，就是點擊VIP的時候會有高亮，其餘item的高亮取消，取消其餘item的高亮沒有找到解決方法。因此只能採用其餘方法了。

五、解決點擊VIP高亮，其餘item的高亮取消問題

一、一開始咱們在UITabBarController裏面只加了4個控制器，如今咱們把VIP對應的控制器也加進去，只是tabBarItem.image和tabBarItem.selectedImage都不設置或設置空。

二、在MainTabBar的layoutSubviews()裏面把調整四個按鈕的佈局代碼刪除

三、在MainTabBar裏面新增updateVip(_ isSelected: Bool)方法，用來設置VIP按鈕是否高亮

func updateVip(_ isSelected: Bool) {
    vipImageView.image = isSelected ? "tabbar_vip_selected".image : "tabbar_vip_normal".image
}
複製代碼

四、在MainTabBarController裏面重寫override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem)方法。調用updateVip(_ isSelected: Bool)方法

override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
    mainTabBar.updateVip(item.title == "VIP")
}
複製代碼

自定義tabBar就完成了，下面是最終效果

最後把MainTabBar的代碼也放出來

class MainTabBar: UITabBar {

    private lazy var vipView: UIImageView = {
        let view = UIImageView()
        view.image = "tabbar_middlebulge_backImg".image
        return view
    }()

    private lazy var vipImageView: UIImageView = {
        let view = UIImageView()
        view.image = "tabbar_vip_normal".image
        view.contentMode = .scaleAspectFit
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)

        isTranslucent = false
        backgroundImage = UIImage.imageWithColor(color: UIColor.white, size: CGSize(width: UIScreen.width, height: 49))
        shadowImage = UIImage.imageWithColor(color: UIColor(hex: "#F4F4F4"), size: CGSize(width: 1.0, height: 0.5))
        addSubviews()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        vipView.center = CGPoint(x: center.x, y: 20)
    }

    private func addSubviews() {
        vipView.frame = CGRect(x: 0, y: 0, width: (UIScreen.width - 20) / 5 - 10, height: 61)
        addSubview(vipView)
        vipView.addSubview(vipImageView)

        vipImageView.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.bottom.equalToSuperview().offset(-16)
            make.size.equalTo(CGSize(width: 40, height: 40))
        }
    }
    
    func updateVip(_ isSelected: Bool) {
        vipImageView.image = isSelected ? "tabbar_vip_selected".image : "tabbar_vip_normal".image
    }
}
複製代碼