美文网首页iOS 常见问题汇总
ios 自定义tabBar 加号按钮

ios 自定义tabBar 加号按钮

作者: 车在路上爬fly | 来源:发表于2017-12-30 15:47 被阅读138次

    1.自定义MainTabBarController:
    1.1继承自系统的UITabBarController,自定义一些属性例如,title文本颜色、选
    择的颜色等属性。

    1.2 向其中添加子控制器

     override func viewDidLoad() {
            super.viewDidLoad()
            setUpUI() //初始化自己的子控制器
            setCustomTabBar()   //使用自定义tabbar
        }
        
        private func setUpUI(){
            
            let oneVC = UIViewController()
            oneVC.view.backgroundColor = UIColor.red
            let secVC = UIViewController()
            secVC.view.backgroundColor = UIColor.yellow
            let treVC = UIViewController()
            treVC.view.backgroundColor = UIColor.orange
            let fourVC = UIViewController()
            fourVC.view.backgroundColor = UIColor.gray
            
            
            //添加子控制器
            setUpChildViewController(childVC: oneVC, image: "btn_tabbar_home_normal_25x25_", selectImage: "btn_tabbar_home_selected_25x25_", title: "首页")
            setUpChildViewController(childVC: secVC, image: "btn_tabbar_lanmu_normal_25x25_", selectImage: "btn_tabbar_lanmu_selected_25x25_", title: "栏目")
            setUpChildViewController(childVC: fourVC, image: "btn_tabbar_zhibo_normal_25x25_", selectImage: "btn_tabbar_zhibo_selected_25x25_", title: "直播")
            setUpChildViewController(childVC: treVC, image: "btn_tabbar_wode_normal_25x25_", selectImage: "btn_tabbar_wode_selected_25x25_", title: "我的")
    
        }
    

    1.3以下为添加自控制的方法

        //添加子控制器
        func setUpChildViewController(childVC : UIViewController,image:String,selectImage:String,title:String) {
            childVC.title = title
            childVC.tabBarItem.image = UIImage(named: image)
            childVC.tabBarItem.selectedImage = UIImage(named:selectImage)
            let nav = UINavigationController(rootViewController: childVC)
            addChildViewController(nav)
        }
    

    1.4 添加自定义tabBar

        private func setCustomTabBar(){
         
            let tab = QRTabBar()
            tab.qrDelegate = self
            self.setValue(tab, forKeyPath: "tabBar")
        }
    

    1.5 最重要的部分来了,实现tabBar的自定义布局
    1.5.1 创建一个自己的QRTabBar 继承与UITabBar
    1.5.2 重写layoutSubviews方法 ,实现tabbar Item的自由布局

    import UIKit
    
    protocol QRTabBarDelegate {
        func addButtonClickCall()
    }
    
    class QRTabBar: UITabBar {
        
        var qrDelegate : QRTabBarDelegate?
        
        
        override func layoutSubviews() {
            super.layoutSubviews()
            
            let buttonW:CGFloat = self.frame.size.width / 5
            let buttonH:CGFloat = self.frame.size.height
            let buttonY:CGFloat = 0
            // 按钮索引
            var buttonIndex:Int = 0;
            for (_,sub) in self.subviews.enumerated() {
                
                if sub.self.isKind(of: NSClassFromString("UITabBarButton")!) {
                    // 设置frame
                    var buttonX:CGFloat = CGFloat(buttonIndex) * buttonW
                    if buttonIndex >= 2 { // 右边的2个UITabBarButton
                        buttonX += buttonW
                    }
                    sub.frame = CGRect(x: buttonX, y: buttonY, width: buttonW, height: buttonH)
                    // 增加索引
                    buttonIndex += 1
                }
            }
            //设置中间的发布按钮的frame
            addButton.frame = CGRect(x: 0, y: 0, width: buttonW, height: buttonH)
            addButton.center = CGPoint(x: self.frame.size.width * 0.5, y: self.frame.size.height * 0.5)
        }
        
        // MARK: - 懒加载
        private lazy var addButton: UIButton = {
            () -> UIButton
            in
            let btn = UIButton(type: UIButtonType.custom)
            btn.setImage(UIImage(named: "addButton"), for: UIControlState.normal)
            btn.setImage(UIImage(named: "addButton"), for: UIControlState.highlighted)
            // 2.监听按钮点击
            btn.addTarget(self, action:#selector(addButtonClick), for: UIControlEvents.touchUpInside)
            self.addSubview(btn)
            return btn
        }()
        //点击事件
        @objc private func addButtonClick(){
            if (qrDelegate != nil) {
                qrDelegate?.addButtonClickCall()
            }
        }
    
        
    }
    

    最后附上Demo地址

    相关文章

      网友评论

        本文标题:ios 自定义tabBar 加号按钮

        本文链接:https://www.haomeiwen.com/subject/wvaggxtx.html