封裝了一個帶有中間凸起的自定制Tabbar，包含4個普通按鈕和中間的一個凸起按鈕-
- 首先封裝了一個UIButton，重新設置了UIButton的圖片位置和label位置
- 使用便利構造器創建了一個帶有imageview的構造方法，用來構造中間特殊的按鈕
- 繼承與UIView創建了一個自定制tabbar類，大小為屏幕寬度和49 高，
- 動態創建5個自定制的UIButton，對中間的按鈕做了特殊處理，其中的位置大小可以根據需求設置。
- 設置一個全局的button存儲高亮狀態下的按鈕
- 使用閉包進行了控制器于自定制tabbar之間的傳值，實現了不同按鈕切換不同界面的功能
使用方法：
- 實例化一個自定制TabBar let myTabbar = ZYF_Main_MyTabBar()
- 設置自定制TabBar的frame myTabbar.frame = CGRectMake(0, height - 49, width, 49)
- 調用方法，傳入參數：標題數組、.Normal狀態下的圖片數組、.selected狀態下的圖片數組，每個按鈕之間的間距
tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)
上代碼
封裝UIButton，重置UIButton的圖片位置和Label位置
class ZYF_MyTabBarButton: UIButton {
//重寫構造方法
override init(frame: CGRect) {
super.init(frame: frame)
self.frame = CGRectMake(0, 0, 49, 49)
self.setTitleColor(UIColor.grayColor(), forState: .Normal)
self.setTitleColor(UIColor.redColor(), forState: .Selected)
self.titleLabel?.font = UIFont.systemFontOfSize(11)
self.titleLabel?.textAlignment = .Center
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//重寫button中圖片的位置
override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
return CGRectMake((contentRect.size.width - 30) / 2, 2, 30, 30)
}
//重寫button中文本框的位置
override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
return CGRectMake(0, contentRect.size.height - 17, contentRect.size.width, 15)
}
//使用便利構造器構造中間特殊按鈕
convenience init(frame: CGRect,image:String) {
self.init(frame:frame)
let imageView = UIImageView(frame: CGRectMake(0,0,70,70))
imageView.image = UIImage(named: image)
self.addSubview(imageView)
}
}
繼承UIView制作MyTabBar
class ZYF_Main_MyTabBar: UIView {
//設置一個全局的button存儲selected按鈕
var button = UIButton()
//獲得屏高
let height = UIScreen.mainScreen().bounds.size.height
//獲得屏寬
let width = UIScreen.mainScreen().bounds.size.width
//閉包傳值，創建一個閉包，用來傳遞被選中的按鈕，以實現頁面的轉換
var clickBlock:((selcted:Int) ->())?
//重寫構造方法
override init(frame: CGRect) {
super.init(frame: frame)
self.frame = CGRectMake(0, 0, width, 49)
self.backgroundColor = UIColor.blackColor()
//打開用戶交互
self.userInteractionEnabled = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//寫一個制作方法，傳圖標題數組、圖片名稱數組、被選中狀態下圖片名稱數組和每個按鈕之間的間距
func creatTabBar(titNames:[String],imageNames:[String],selectedImageNames:[String],space:Int) {
//快速布局
for i in 0...titNames.count - 1 {
var btn = ZYF_MyTabBarButton(type: .Custom)
btn.frame = CGRectMake(20 + CGFloat(i) * 83, 0, 49, 49)
let image = UIImage(named: imageNames[i])
let selectedImage = UIImage(named: selectedImageNames[i])
//Mark*設置中間特殊按鈕
if i == 2{
//Mark* 如果想設置凸起的話讓pointY為負值
let pointY:CGFloat = 5
let pointX:CGFloat = 49 + abs(pointY)
btn = ZYF_MyTabBarButton.init(frame: frame, image: "ZYF-Login-Dou")
btn.frame = CGRectMake(183, pointY, width / 5, pointX)
} else {
btn.setImage(selectedImage, forState: .Selected)
btn.setImage(image, forState: .Normal)
}
btn.setTitle(titNames[i], forState: .Normal)
self.addSubview(btn)
btn.tag = 10 + i
//為每個btn添加點擊事件，以實現界面替換
btn.addTarget(self, action: #selector(self.btnClick(_:)), forControlEvents: .TouchUpInside)
//設置默認第一個按鈕為選中狀態
if i == 0 {
btn.selected = true
self.button = btn
}
}
}
//點擊事件
func btnClick(sender:UIButton) {
//實現視圖切換
print("視圖切換")
//通過tag值獲取點擊的btn
let index = sender.tag - 10
if index < 2 {
//設置閉包中的值
if clickBlock != nil {
clickBlock!(selcted:index)
print("index<2")
}
} else if index > 2 {
if clickBlock != nil {
clickBlock!(selcted:index - 1)
}
} else {
clickBlock!(selcted:999)
return
}
//設置選中按鈕
self.button.selected = false
sender.selected = true
self.button = sender
}
}
使用方式
//獲取屏寬
let width = UIScreen.mainScreen().bounds.size.width
//獲取屏高
let height = UIScreen.mainScreen().bounds.size.height
//實例化自定制TabBar
let tabbar = ZYF_Main_MyTabBar()
//隱藏系統的tabbar
self.tabBar.hidden = true
//設置位置
tabbar.frame = CGRectMake(0, height - 49, width, 49)
//標題數組
let title = ["發現","關注","","消息","我的"]
//圖片名稱數組
let imageName = ["find","focus","center","message","contact"]
//選中圖片名稱數組
let selectedImage = ["sfind","sfocs","center","smessage","smy"]
//創建按鈕
tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)
//使用閉包中的值
tabbar.clickBlock = {(selcted:Int) in
if selcted == 999 {
print("點擊了特殊按鈕")
} else {
print(123)
self.selectedIndex = selcted
}
}
//將自定制tabbar加到主視圖上
self.view.addSubview(tabbar)
效果圖如下：
按鈕.gif
