引言
UITabBar是iOS App中經(jīng)常使用的系統(tǒng)控件西饵，在實際的項目開發(fā)中，系統(tǒng)的UITabBar有時滿足不了我們的需求厨相，這是就需要自定義tabBar了。
這是我看MJ老師的新浪微博視頻,然后轉(zhuǎn)換成Swift語言自己寫出來的缆巧，分享出來希望對大家有所幫助
自定義tabBar效果圖.png
1.給工具欄添加背景
由于用的是iphone6的模擬器UITabBar高度是49，MJ老師給的素材是46豌拙，自己調(diào)了下陕悬，這里強烈建議用MJ老師MVC的思想，單獨創(chuàng)建一個View按傅，創(chuàng)建好之后捉超，先添加一個背景，把圖片平鋪唯绍，代碼如下
import UIKit
class Dock: UIView {
var dock : UIView = UIView()
override init(frame: CGRect) {
super.init(frame: frame)
self.frame = UIScreen.mainScreen().bounds
self.backgroundColor = UIColor.init(patternImage:UIImage(named: "tabbar_background.png")!)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
2.添加Item的方法
上圖中的Item有一個title狂秦，一個Image,還有選中時的Imge,所以我寫這個方法的時候傳入了三個值，這個方法推捐，我們在主控制器中調(diào)用，代碼如下
func addchildVC(Title:String,Image:String,SecletedImage:String)
{
let count = self.subviews.count//當前View中subviews的個數(shù)
let ItemHeight : CGFloat = self.frame.size.height
let ItemWidth : CGFloat = self.frame.size.width / CGFloat(count)
var ItemBtn = Unbutton()
ItemBtn.setTitle(Title, forState: UIControlState.Normal)
ItemBtn.setImage(UIImage(named: Image), forState: UIControlState.Normal)
ItemBtn.setImage(UIImage(named: SecletedImage), forState: UIControlState.Selected)
ItemBtn.addTarget(self, action: Selector("ItemClick:"), forControlEvents: .TouchDown)
self.addSubview(ItemBtn)
//調(diào)整item的位置
self.adjustDockItem()
}
- 調(diào)整Item的位置
添加Item的方法有了侧啼，但是Item的位置和大小我們都沒設(shè)置牛柒，邏輯就是我們的調(diào)用添加Item方法時是一個一個添加到自定義View上的，當添加第一個Item成功后痊乾，下面代碼中的count個數(shù)就會變?yōu)?皮壁，我們添加第二個Item的時候，count變?yōu)?哪审，Item的位置就會重新調(diào)整蛾魄，代碼如下 （這個方法的調(diào)用必須在添加ItemBtn之后，否則會報錯）
func adjustDockItem()
{
let count = self.subviews.count
let ItemHeight : CGFloat = self.frame.size.height
let ItemWidth : CGFloat = self.frame.size.width / CGFloat(count )
for i in 0..<count {
//取出子空間
let ItemBtn = self.subviews[i] as! UIButton
ItemBtn.frame = CGRectMake(CGFloat(i) * ItemWidth, 0,ItemWidth ,ItemHeight)
}
}
- 點擊按鈕時選中并且將上一個按鈕的選中狀態(tài)取消
思路很簡單湿滓，創(chuàng)建一個變量滴须，設(shè)定為當前為選中狀態(tài)的按鈕
var currentItem :UIButton = UIButton()
func ItemClick(ItemBtn: DockItem){
//讓當前item取消選中
currentItem.selected = false
//讓新的item選中
ItemBtn.selected = true
//讓新的item變?yōu)楫斍癷tem
currentItem = ItemBtn
}
3.在主控制器中調(diào)用添加Item的方法
- 創(chuàng)建一個變量繼承我們的View
var dock : Dock = Dock()
- 調(diào)用添加Item的方法
import UIKit
class MainViewController: UITabBarController{
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.grayColor()
self.addDock()
}
func addDock(){
dock.frame = CGRectMake(0,self.view.frame.height - DockHeigt, self.view.frame.width, DockHeigt)
self.view.addSubview(dock)
dock.addchildVC("首頁", Image: "tabbar_home.png", SecletedImage: "tabbar_home_selected.png")
dock.addchildVC("消息", Image: "tabbar_message_center.png", SecletedImage: "tabbar_message_center_selected.png")
dock.addchildVC("我", Image: "tabbar_profile.png", SecletedImage: "tabbar_profile_selected.png")
dock.addchildVC("廣場", Image: "tabbar_discover.png", SecletedImage: "tabbar_discover_selected.png")
dock.addchildVC("更多", Image: "tabbar_more.png", SecletedImage: "tabbar_more_selected.png")
}
運行一下 看下效果圖
自定義tabBar效果圖.png
看下選中的效果圖
選中效果圖.png
有點點丑，發(fā)現(xiàn)位置好像不對叽奥，應(yīng)該調(diào)整下ItemBtn里title和Image的位置扔水，創(chuàng)建一個自定義Button，然后讓我們的ItemBtn繼承它就OK了
import UIKit
let kImageRatio : CGFloat = 0.6
class DockItem: UIButton {
override init(frame: CGRect) {
super.init(frame: frame)
//文字居中
self.titleLabel?.textAlignment = NSTextAlignment.Center
self.titleLabel?.font = UIFont.systemFontOfSize(12)
//圖片自適應(yīng)
self.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
self.adjustsImageWhenHighlighted = false
self.setBackgroundImage(UIImage(named: "tabbar_slider.png"), forState: .Selected)
// self.setBackgroundImage(UIImage(named: "tabbar_slider.png"), forState: .Highlighted)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//重寫UILabel邊框
override func titleRectForContentRect(contentRect: CGRect) -> CGRect{
let Y = contentRect.size.height * kImageRatio
let heigt = contentRect.size.height - Y
return CGRectMake(0, Y, contentRect.size.width, heigt)
}
//重寫UIImage邊框
override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
return CGRectMake(0, 0, contentRect.size.width, contentRect.size.height * kImageRatio)
}
}
然后將上面代碼中的UIButton全部改成DockItem
var ItemBtn = DockItem()
var currentItem : DockItem = DockItem()
進入時我們都是默認選中首頁這個ItemBtn的朝氓，添加如下代碼在adjustDockItem()方法中就可以了
if i == 0
{
ItemBtn.selected = true
currentItem = ItemBtn
}
總結(jié)
遇到的主要問題還是設(shè)置ItemBtn位置魔市，當時實在不理解是怎么添加的，不過后來還是解決了赵哲，希望能幫到大家待德，也希望能共同學(xué)習(xí)共同進步
