引言

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//當(dāng)前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上的，當(dāng)添加第一個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è)定為當(dāng)前為選中狀態(tài)的按鈕

var currentItem :UIButton = UIButton()

  func ItemClick(ItemBtn: DockItem){
        //讓當(dāng)前item取消選中
        currentItem.selected = false
        //讓新的item選中
        ItemBtn.selected = true
        //讓新的item變?yōu)楫?dāng)前item
        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()

進(jìn)入時我們都是默認(rèn)選中首頁這個ItemBtn的，添加如下代碼在adjustDockItem()方法中就可以了

if i == 0 
{
   ItemBtn.selected = true
   currentItem = ItemBtn
}

總結(jié)

遇到的主要問題還是設(shè)置ItemBtn位置，當(dāng)時實在不理解是怎么添加的，不過后來還是解決了，希望能幫到大家，也希望能共同學(xué)習(xí)共同進(jìn)步