使用Swift开发一个贝乐虎启蒙App – 自定义tabBar｜8月更文挑战

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

前言

上一篇我们已经把网络请求封装好了，现在我们就开始搭框架。

分析页面结构

根据下面图片我们可以看出，整个app底层是一个UITabBarController，里面有五个item，分别是首页、学堂、VIP、成长乐园、我的。所以我们新建5个对应UIViewController。观察底部UITabBar发现，中间的VIP是凸起的，所以这就需要自定义UITabBar了

定义UITabBar

1、新增一个MainTabBarController继承UITabBarController，我们先把首页、学堂、成长乐园、我的控制器添加到MainTabBarController

2、新建MainTabBar继承UITabBar

3、在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凸起部分如果自己自己搞圆角的话，没有那么圆滑，所以应该是个图片，然后在资源库里面果然找到了，把图片放到工程里面后，我们开始把这个图片放上去

4、自定义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的高亮没有找到解决方法。所以只能采用其他方法了。

5、解决点击VIP高亮，其他item的高亮取消问题

1、一开始我们在UITabBarController里面只加了4个控制器，现在我们把VIP对应的控制器也加进去，只是tabBarItem.image和tabBarItem.selectedImage都不设置或设置空。

2、在MainTabBar的layoutSubviews()里面把调整四个按钮的布局代码删除

3、在MainTabBar里面新增updateVip(_ isSelected: Bool)方法，用来设置VIP按钮是否高亮

func updateVip(_ isSelected: Bool) {
    vipImageView.image = isSelected ? "tabbar_vip_selected".image : "tabbar_vip_normal".image
}
复制代码

4、在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
    }
}
复制代码