iOS-小Demo(Swift基础练习2)--自定义Tabbar

桃花近日随流水,洞在清溪何处边!<保母虫>

最近太忙了, 抽个时间和大家分享一下一个小的练习,自定义 tabbar 方法, 回顾 Swift 语法,所以用 Swift 实现一下, 先上效果图

效果图

---

思路:

1: 整体上就是 tabbar 中间多了一个按钮(有点击事件的加号), 也就是一个 Button 用其他也行, 也就是我们需要在系统自带的中间位置加上一个 凸起的按钮.
2: 找系统自带方法并没有找到合适的, 那么换个思路自己定义一个 tabbar 让这个自定义的去替换掉系统的就可以
3: 新建自定义的 tabbar 首先是有中间的 Button, 因为他的标题和显示图片位置与正常的不同, 那么我们可以先自定义一个图片在上标题在下的Button
4: 把自定义的 Button 放到我们自定义的 tabbar 上面, 和其他的 tabbarButton位置一起, 重新进行布局
5: 用自定义的 tabbar 替换系统自带的

---

自定义 button

class CustomCenterButton: UIButton
{

    override init(frame: CGRect)
    {
      
        super.init(frame: frame)
      
        
        // 设置自定义 Button 的图片
        self.setImage(UIImage.init(named: "加号"), forState:  UIControlState.Normal)
        self.setImage(UIImage.init(named: "加号(黑)"), forState: UIControlState.Highlighted)
        // 设置 Button 的标题
        self.setTitle("分享", forState: UIControlState.Normal)
        self.setTitleColor(UIColor.blueColor(), forState: UIControlState.Normal)
        self.titleLabel?.font = UIFont.systemFontOfSize(12)
        self.titleLabel?.textAlignment = NSTextAlignment.Center
        
    }
    
    // 重新布置子控件的位置  让 title 显示在照片的下面
    override func layoutSubviews() {
        super.layoutSubviews()
        // 主要就是区分好 imageView 和 titleLabel 的位置
        // 两者的宽度都是 Button 的宽度高度计算得到
        
        // 得到 label 的高 以及 Button 的高度是和宽度
        let labelH: CGFloat = (self.titleLabel?.font.lineHeight)!
        let buttonH: CGFloat = self.bounds.size.height
        let buttonW: CGFloat = self.bounds.size.width
        
       
        // 确定两个子控件的位置  就是让照片在上  标题在下 怎么弄你开心就好
        self.imageView?.frame = CGRectMake(0 + (buttonW - (buttonH - labelH))/2, 0 ,buttonH - labelH, buttonH - labelH )
        
        self.titleLabel?.frame = CGRectMake(0, buttonH - labelH , buttonW, labelH)
        
        
    }

---

自定义 tabbar

# 定义一个协议 让代理去实现点击 加号时候的方法
protocol CustomBarbuttonDelegate
{
    func barButtonAction(sender: CustomCenterButton)
}


class CustomTabBar: UITabBar
{
   var delegateTabbar: CustomBarbuttonDelegate?
    // 引入自定义的 Button(中间的大加号)
    let addButton: CustomCenterButton = CustomCenterButton.init(frame: CGRectZero)

# 把自定义的 Button 放到 自定义的 tabbar 上
    override init(frame: CGRect)
    {
        super.init(frame: frame)
        
        self.addSubview(addButton)
       
        addButton.addTarget(self, action: "buttonAction:", forControlEvents: UIControlEvents.TouchUpInside)
        
    }
    
    // 调用协议的方法
    func buttonAction(sendet: CustomCenterButton)
    {
       print("-调用协议方法-------->")
     self.delegateTabbar?.barButtonAction(sendet)
    
    }
    
 
    # 可视化编程时候走这个方法
    required init?(coder aDecoder: NSCoder) {
       
       super.init(coder: aDecoder)
        
        self.addSubview(addButton)
        
        addButton.addTarget(self, action: "buttonAction:", forControlEvents: UIControlEvents.TouchUpInside)
    }
    
    // 布局子控件  在这里主要是让大加号处于中间偏上的位置
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // 布置每一个 itm 的 frame
        var itemX: CGFloat = 0.0
        let itemY: CGFloat = 0.0
        let itemH: CGFloat  = self.bounds.size.height
        // 记录 标签个数也是就是 tabbarButton 的个数
        let ddd: CGFloat = CGFloat(self.items!.count)
     // 算出每一个占据的宽度 加上了加号 Button 的位置
        let itemW: CGFloat = self.bounds.size.width / (ddd + 1)
        
        var itemCurrent: CGFloat = 0
        
        // 遍历子视图 找出 tabbarButton 依次分配位置
        for itemTemp in self.subviews
        {
            print("子视图->",itemTemp,"\n")
            if NSStringFromClass(itemTemp.classForCoder) == "UITabBarButton"
            {// 留出中间位置给加号 Button
                if itemCurrent == 2
                {
                    itemCurrent = 3
                }
               
                itemX = itemCurrent * itemW     
                itemTemp.frame = CGRectMake(itemX, itemY, itemW, itemH)
                itemCurrent += 1
            }
            // 算出加号的位置
            self.addButton.bounds.size = CGSizeMake(itemW, itemH + 30)
            self.addButton.center = CGPointMake(self.bounds.size.width / 2.0, 0)
            
        }
        
      
    }
# 这个方法就是为了让超出的加号部分也能点击响应
    override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
        // 只有在没有被隐藏的时候才会需要
        if self.hidden == false
        {
            let newPoint: CGPoint = self.convertPoint(point, toView: self.addButton)
            // 判断点击的点在加号的范围里面  那么响应的范围就是加号的范围
             if self.addButton.pointInside(newPoint, withEvent: event)
            {
                return self.addButton
            }else
            {// 其他时候  就按照系统的方法走就行了
                return super.hitTest(point, withEvent: event)
            }
            
        }else
        {
        // 其他时候  就按照系统的方法走就行了
            return super.hitTest(point, withEvent: event)
        }
    }
}

---

最后把自定义的 tabbar 用在需要的地方即可

我是用 storybord 直接在可视化里面关联好类就行,代码就是要在UITabBarController设置代理实现点击的事件即可
上代码:

class RootViewController: UITabBarController,CustomBarbuttonDelegate {
   
    @IBOutlet weak var myTabbar: CustomTabBar!

    override func viewDidLoad() {
        super.viewDidLoad()
#  设置代理
        self.myTabbar.delegateTabbar = self;
        
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
# 实现代理方法
    func barButtonAction(sender: CustomCenterButton)
    {
    
    print(" RootViewController---->CustomBarbuttonDelegate方法")
        
        let newVc: UIAlertController = UIAlertController.init(title: "分享", message: "无兄弟不篮球", preferredStyle: UIAlertControllerStyle.Alert)
        self.presentViewController(newVc, animated: true) { 
            
            dispatch_after(3, dispatch_get_main_queue(), { 
                newVc.dismissViewControllerAnimated(true, completion: nil)
            })
        }       
    }

如果用纯代码那么就需要写上替换 tabbar 的代码如下

 let customTabbar: CustomTabBar = CustomTabBar.init(frame: self.tabBar.frame)

self.setValue(customTabbar, forKey: "tabBar")```


#### 10-8 更新：
[GitHub](https://github.com/YunZhiJunXiPeng/CustomTabBar.git)