自定義Tabbar

效果如下
在這裏插入圖片描述

在這裏插入圖片描述
直接上代碼

//
//  LHTabbarButton.swift
//  safari
//
//  Created by 磊懷王 on 2020/1/2.
//  Copyright © 2020 磊懷王. All rights reserved.
//

import UIKit


 
class LHTabbarButton: NSObject {
    
    func tabbarButton(_ title : String , _ imageName : String , _ barNum : Int) -> UIView {
        let btnWidth : CGFloat = screenWith / CGFloat(barNum)
        
        //底圖
        let bottomView : UIView = UIView.init()
        bottomView.backgroundColor = UIColor.white
        
        //圖片
        let bottomIge : UIImageView = UIImageView.init()
        bottomIge.image = UIImage.init(named: imageName)
        bottomIge.contentMode = UIView.ContentMode.scaleAspectFit
        bottomIge.frame = CGRect.init(x: 0, y: 0, width: btnWidth, height: 30)
        bottomView.addSubview(bottomIge)
        bottomIge.isUserInteractionEnabled = true
        
        //文字
        let bottomLab : UILabel = UILabel.init()
        bottomLab.text = title
        let aphia : CGFloat = 153.0 / 255.0
        bottomLab.textColor = UIColor.init(red: aphia, green: aphia, blue: aphia, alpha: 1)
        bottomLab.font = UIFont.systemFont(ofSize: 15)
        bottomLab.frame = CGRect.init(x: 0, y: 30, width: btnWidth, height: 19)
        bottomView.addSubview(bottomLab)
        bottomLab.textAlignment = NSTextAlignment.center
        
        return bottomView
    }

}

//
//  LHTabbarView.swift
//  safari
//
//  Created by 磊懷王 on 2020/1/3.
//  Copyright © 2020 磊懷王. All rights reserved.
//

import UIKit



class LHTabbarView: NSObject {
    
    let imageArr : Array = ["ic_bubu_n","ic_game_n","middleImage","ic_renwu_n","ic_wo_n"]
    let imageArr_s : Array = ["ic_bubu_s","ic_game_s","middleImage_s","ic_renwu_s","ic_wo_s"]
    
    override init() {
        super.init()
    }
    
    var selectV : UIView! = nil
    var selectI : UIImageView! = nil
    var selectL : UILabel! = nil
    
    func LHTabbar(_ superView : UIView) -> Void {
        
        let botTitle : Array = ["我的信息","我的遊戲","","我的獎盃","我的信息"]
        
        
        let bottonView : LHTabbarBottomView = LHTabbarBottomView.init()
        superView.addSubview(bottonView)
        
        let viewWidth : CGFloat = screenWith / CGFloat(imageArr.count)
        
        for objc in imageArr.enumerated() {
            if objc.offset != 2 {
                let bottomBtn = LHTabbarButton.init().tabbarButton(botTitle[objc.offset], objc.element, imageArr.count)
                    bottomBtn.frame = CGRect.init(x: viewWidth * CGFloat(objc.offset), y: 0, width: viewWidth, height: 49)
                    bottonView.addSubview(bottomBtn)
                    bottomBtn.tag = 100 + objc.offset
                    let tapGes : UITapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: #selector(selectTabbarButton(_:)))
                    bottomBtn.addGestureRecognizer(tapGes)
                
                    if objc.offset == 0 {
                        self.changeBtnStatusSelect(bottomBtn, 0)
                    }
            }
        }
        
        let lineRect : CGRect = CGRect.init(x: 0, y: 0, width: screenWith, height: 1)
        let line : UIView = UIView.init(frame: lineRect)
        line.backgroundColor = UIColor.black
        bottonView.addSubview(line)
        
        self.middleView(bottonView)
    }
    
    
    /// 創建中間按鈕
    /// - Parameter superView: 父視圖
    func middleView(_ superView : UIView) -> Void {
        let viewWidth : CGFloat = screenWith / CGFloat(imageArr.count)
        let midView : UIView = UIView.init()
        midView.frame = CGRect.init(x: viewWidth * 2, y: -16, width: viewWidth, height: 65)
        superView.addSubview(midView)
        midView.backgroundColor = UIColor.white
        midView.tag = 102
        
        let middleImg : UIImageView = UIImageView.init()
        middleImg.image = UIImage.init(named: "middleImage")
        middleImg.frame = CGRect.init(x: (viewWidth - 46) / 2, y: 0, width: 46, height: 46)
        middleImg.backgroundColor = UIColor.clear
        midView.addSubview(middleImg)
        middleImg.layer.cornerRadius = 23
        middleImg.layer.borderWidth = 1
        middleImg.layer.borderColor = UIColor.purple.cgColor
        middleImg.layer.masksToBounds = true
        middleImg.isUserInteractionEnabled = true
        
        let middleLab : UILabel = UILabel.init()
        midView.addSubview(middleLab)
        
        let tapGes : UITapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: #selector(selectTabbarButton(_:)))
        midView.addGestureRecognizer(tapGes)
        
    }
    
    
    /// 修改按鈕狀態
    /// - Parameters:
    ///   - view: 選擇的view
    ///   - index: 選擇的第幾個
    func changeBtnStatusSelect(_ view : UIView,_ index : Int) -> Void {
        var lab : UILabel!
        var img : UIImageView!
        for objc in view.subviews {
            if objc is UIImageView {
                img = objc as? UIImageView
                img.image = UIImage.init(named: imageArr_s[index])
            }
            
            if objc is UILabel {
                lab = objc as? UILabel
                lab.textColor = UIColor.black
            }
        }
        
        selectV = view
        selectI = img
        selectL = lab
    }
    
    
    /// 修改按鈕爲未選中
    func changeBtnStatusNotSelect() -> Void {
        let index = selectV.tag - 100
        selectI.image = UIImage.init(named: imageArr[index])
        let aphia : CGFloat = 153.0 / 255.0
        selectL.textColor = UIColor.init(red: aphia, green: aphia, blue: aphia, alpha: 1)
    }
    
    
    /// 按鈕點擊事件
    /// - Parameter tap: 事件類型
    @objc func selectTabbarButton(_ tap : UITapGestureRecognizer) -> Void {
        if tap.view == selectV {
            return
        }
        self.changeBtnStatusNotSelect()
        self.changeBtnStatusSelect(tap.view!, tap.view!.tag - 100)
    }
}

//
// LHTabbarBottomView.swift
// safari
//
// Created by 磊懷王 on 2020/1/4.
// Copyright © 2020 磊懷王. All rights reserved.
//

import UIKit

class LHTabbarBottomView: UIView {

init() {
    var botViewH : CGFloat = 49
    if navigationBarH > 20 {
        botViewH = 83
    }
    super.init(frame: CGRect.init(x: 0, y: screenHeight - botViewH, width: screenWith, height: botViewH))
    
    self.backgroundColor = UIColor.yellow
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {

    var hitView = super.hitTest(point, with: event)

    if hitView == nil {
        for objc in self.subviews {
            let temp_p = objc.convert(point, from: self)
            if objc.point(inside: temp_p, with: event) {
                hitView = objc
            }

        }
    }
    return hitView
}

//  單獨重寫該方法也可解決父視圖外不響應點擊的問題

// override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
// return true
// }
}

注意: 該實現用到了三個類,LHTabbarBottomViewLHTabbarViewLHTabbarButton,且用到了三個宏如下:

let screenWith = UIScreen.main.bounds.width
let screenHeight = UIScreen.main.bounds.height
let navigationBarH = UIApplication.shared.statusBarFrame.size.height

調用如下

var bottomView : LHTabbarView? = nil //全局變量

bottomView = LHTabbarView.init()    // 調用
bottomView?.LHTabbar(self.view)   // 傳入父視圖

在設計過程中 有個疑問,沒有搞明白 點擊父視圖之外的子視圖,理論上是不響應的。 經對override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? 操作可解決此問題,但是點擊一次子視圖,該方法卻執行了兩次。哪位大牛知道是爲什麼,請聯繫我。歡迎賜教

我是磊懷 2849765859QQ

發佈了58 篇原創文章 · 獲贊 6 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章