使用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
    }
}
复制代码