效果如下
直接上代碼
//
// 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
// }
}
注意: 該實現用到了三個類,LHTabbarBottomView
、LHTabbarView
、LHTabbarButton
,且用到了三個宏如下:
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