Swift随笔 自定义tabBar样式工具栏

引言

UITabBar是iOS App中经常使用的系统控件，在实际的项目开发中，系统的UITabBar有时满足不了我们的需求，这是就需要自定义tabBar了。

这是我看MJ老师的新浪微博视频,然后转换成Swift语言自己写出来的，分享出来希望对大家有所帮助

自定义tabBar效果图.png

1.给工具栏添加背景

由于用的是iphone6的模拟器UITabBar高度是49，MJ老师给的素材是46，自己调了下，这里强烈建议用MJ老师MVC的思想，单独创建一个View，创建好之后，先添加一个背景，把图片平铺，代码如下

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,所以我写这个方法的时候传入了三个值，这个方法，我们在主控制器中调用，代码如下

func addchildVC(Title:String,Image:String,SecletedImage:String)
    {
        let count  = self.subviews.count//当前View中subviews的个数
        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)
        //调整item的位置
        self.adjustDockItem()
    }

• 调整Item的位置
  添加Item的方法有了，但是Item的位置和大小我们都没设置，逻辑就是我们的调用添加Item方法时是一个一个添加到自定义View上的，当添加第一个Item成功后，下面代码中的count个数就会变为1，我们添加第二个Item的时候，count变为2，Item的位置就会重新调整，代码如下 （这个方法的调用必须在添加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..

• 点击按钮时选中并且将上一个按钮的选中状态取消
  思路很简单，创建一个变量，设定为当前为选中状态的按钮

var currentItem :UIButton = UIButton()

  func ItemClick(ItemBtn: DockItem){
        //让当前item取消选中
        currentItem.selected = false
        //让新的item选中
        ItemBtn.selected = true
        //让新的item变为当前item
        currentItem = ItemBtn
 }

3.在主控制器中调用添加Item的方法

• 创建一个变量继承我们的View

var dock : Dock = Dock()

• 调用添加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

有点点丑，发现位置好像不对，应该调整下ItemBtn里title和Image的位置，创建一个自定义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)
        //图片自适应
        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
}

总结

遇到的主要问题还是设置ItemBtn位置，当时实在不理解是怎么添加的，不过后来还是解决了，希望能帮到大家，也希望能共同学习共同进步