前言
上一篇我们已经把网络请求封装好了，现在我们就开始搭框架。
分析页面结构
根据下面图片我们可以看出，整个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
}
}
