引言
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..<count {
//取出子空间
let ItemBtn = self.subviews[i] as! UIButton
ItemBtn.frame = CGRectMake(CGFloat(i) * ItemWidth, 0,ItemWidth ,ItemHeight)
}
}
- 点击按钮时选中并且将上一个按钮的选中状态取消
思路很简单，创建一个变量，设定为当前为选中状态的按钮
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位置，当时实在不理解是怎么添加的，不过后来还是解决了，希望能帮到大家，也希望能共同学习共同进步
