• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

Swift-自定制带有特殊按钮TabBar

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

---恢复内容开始---

#### 封装了一个带有中间凸起的自定制Tabbar，包含4个普通按钮和中间的一个凸起按钮-
  1. 首先封装了一个UIButton，重新设置了UIButton的图片位置和label位置
  2. 使用便利构造器创建了一个带有imageview的构造方法，用来构造中间特殊的按钮
  3. 继承与UIView创建了一个自定制tabbar类，大小为屏幕宽度和49 高，
  4. 动态创建5个自定制的UIButton，对中间的按钮做了特殊处理，其中的位置大小可以根据需求设置。
  5. 设置一个全局的button存储高亮状态下的按钮
  6. 使用闭包进行了控制器于自定制tabbar之间的传值，实现了不同按钮切换不同界面的功能

使用方法：

  1. 实例化一个自定制TabBar let myTabbar = ZYF_Main_MyTabBar()
  2. 设置自定制TabBar的frame myTabbar.frame = CGRectMake(0, height - 49, width, 49)
  3. 调用方法，传入参数：标题数组、.Normal状态下的图片数组、.selected状态下的图片数组，每个按钮之间的间距
    tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)

Github地址

上代码

封装UIButton，重置UIButton的图片位置和Label位置

class ZYF_MyTabBarButton: UIButton {
	//重写构造方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.frame = CGRectMake(0, 0, 49, 49)
        self.setTitleColor(UIColor.grayColor(), forState: .Normal)
        self.setTitleColor(UIColor.redColor(), forState: .Selected)
        self.titleLabel?.font = UIFont.systemFontOfSize(11)
        self.titleLabel?.textAlignment = .Center
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    //重写button中图片的位置
    override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
        return CGRectMake((contentRect.size.width - 30) / 2, 2, 30, 30)
    }
    //重写button中文本框的位置
    override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
        return CGRectMake(0, contentRect.size.height - 17, contentRect.size.width, 15)
    }
    
    //使用便利构造器构造中间特殊按钮
    convenience init(frame: CGRect,image:String) {
        self.init(frame:frame)
        let imageView = UIImageView(frame: CGRectMake(0,0,70,70))
        imageView.image = UIImage(named: image)
        self.addSubview(imageView)
    }
}

继承UIView制作MyTabBar

class ZYF_Main_MyTabBar: UIView {
	//设置一个全局的button存储selected按钮
    var button = UIButton()
    //获得屏高
    let height = UIScreen.mainScreen().bounds.size.height
    //获得屏宽
    let width = UIScreen.mainScreen().bounds.size.width

    //闭包传值，创建一个闭包，用来传递被选中的按钮，以实现页面的转换
    var clickBlock:((selcted:Int) ->())?
    
    //重写构造方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.frame = CGRectMake(0, 0, width, 49)
        self.backgroundColor = UIColor.blackColor()
        //打开用户交互
        self.userInteractionEnabled = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
	//写一个制作方法，传图标题数组、图片名称数组、被选中状态下图片名称数组和每个按钮之间的间距
    func creatTabBar(titNames:[String],imageNames:[String],selectedImageNames:[String],space:Int) {
    	//快速布局
        for i in 0...titNames.count - 1 {
            var btn = ZYF_MyTabBarButton(type: .Custom)
            btn.frame = CGRectMake(20 + CGFloat(i) * 83, 0, 49, 49)
            let image = UIImage(named: imageNames[i])
            let selectedImage = UIImage(named: selectedImageNames[i])
            
            //Mark*设置中间特殊按钮
            if i == 2{
            
           			
            	//Mark* 如果想设置凸起的话让pointY为负值
            	
                let pointY:CGFloat = 5
                let pointX:CGFloat = 49 + abs(pointY)
                btn = ZYF_MyTabBarButton.init(frame: frame, image: "ZYF-Login-Dou")
                btn.frame = CGRectMake(183, pointY, width / 5, pointX)
            } else {
                btn.setImage(selectedImage, forState: .Selected)
                btn.setImage(image, forState: .Normal)
            }
            
            
            btn.setTitle(titNames[i], forState: .Normal)
            self.addSubview(btn)
            btn.tag = 10 + i
            //为每个btn添加点击事件，以实现界面替换
            btn.addTarget(self, action: #selector(self.btnClick(_:)), forControlEvents: .TouchUpInside)
            
            //设置默认第一个按钮为选中状态
            if i == 0 {
                btn.selected = true
                self.button = btn
            }
        }
    }
    
    //点击事件
    func btnClick(sender:UIButton) {
        //实现视图切换
        print("视图切换")
        //通过tag值获取点击的btn
        let index = sender.tag - 10
        if index < 2 {
            //设置闭包中的值
            if clickBlock != nil {
                clickBlock!(selcted:index)
                print("index<2")
            }
        } else if index > 2 {
            if clickBlock != nil {
                clickBlock!(selcted:index - 1)
            }
        } else {
            clickBlock!(selcted:999)
            return
        }
        
        //设置选中按钮
        self.button.selected = false
        sender.selected = true
        self.button = sender
    }
}

使用方式


    //获取屏宽
    let width = UIScreen.mainScreen().bounds.size.width
    //获取屏高
    let height = UIScreen.mainScreen().bounds.size.height
    //实例化自定制TabBar
    let tabbar = ZYF_Main_MyTabBar()
        //隐藏系统的tabbar
        self.tabBar.hidden = true
        //设置位置
        tabbar.frame = CGRectMake(0, height - 49, width, 49)
        //标题数组
        let title = ["发现","关注","","消息","我的"]
        
        //图片名称数组
        let imageName = ["find","focus","center","message","contact"]
        
        //选中图片名称数组
        let selectedImage = ["sfind","sfocs","center","smessage","smy"]
        
        //创建按钮
        tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)

        //使用闭包中的值
        tabbar.clickBlock = {(selcted:Int) in
            if selcted == 999 {
                print("点击了特殊按钮")
            } else {
                print(123)
                self.selectedIndex = selcted
            }
        }
        //将自定制tabbar加到主视图上
        self.view.addSubview(tabbar)

效果图如下：

---恢复内容结束---

---恢复内容开始---

#### 封装了一个带有中间凸起的自定制Tabbar，包含4个普通按钮和中间的一个凸起按钮-

  1. 首先封装了一个UIButton，重新设置了UIButton的图片位置和label位置
  2. 使用便利构造器创建了一个带有imageview的构造方法，用来构造中间特殊的按钮
  3. 继承与UIView创建了一个自定制tabbar类，大小为屏幕宽度和49 高，
  4. 动态创建5个自定制的UIButton，对中间的按钮做了特殊处理，其中的位置大小可以根据需求设置。
  5. 设置一个全局的button存储高亮状态下的按钮
  6. 使用闭包进行了控制器于自定制tabbar之间的传值，实现了不同按钮切换不同界面的功能

使用方法：

  1. 实例化一个自定制TabBar let myTabbar = ZYF_Main_MyTabBar()
  2. 设置自定制TabBar的frame myTabbar.frame = CGRectMake(0, height - 49, width, 49)
  3. 调用方法，传入参数：标题数组、.Normal状态下的图片数组、.selected状态下的图片数组，每个按钮之间的间距
    tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)

Github地址

上代码

封装UIButton，重置UIButton的图片位置和Label位置

class ZYF_MyTabBarButton: UIButton {
	//重写构造方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.frame = CGRectMake(0, 0, 49, 49)
        self.setTitleColor(UIColor.grayColor(), forState: .Normal)
        self.setTitleColor(UIColor.redColor(), forState: .Selected)
        self.titleLabel?.font = UIFont.systemFontOfSize(11)
        self.titleLabel?.textAlignment = .Center
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    //重写button中图片的位置
    override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
        return CGRectMake((contentRect.size.width - 30) / 2, 2, 30, 30)
    }
    //重写button中文本框的位置
    override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
        return CGRectMake(0, contentRect.size.height - 17, contentRect.size.width, 15)
    }
    
    //使用便利构造器构造中间特殊按钮
    convenience init(frame: CGRect,image:String) {
        self.init(frame:frame)
        let imageView = UIImageView(frame: CGRectMake(0,0,70,70))
        imageView.image = UIImage(named: image)
        self.addSubview(imageView)
    }
}

继承UIView制作MyTabBar

class ZYF_Main_MyTabBar: UIView {
	//设置一个全局的button存储selected按钮
    var button = UIButton()
    //获得屏高
    let height = UIScreen.mainScreen().bounds.size.height
    //获得屏宽
    let width = UIScreen.mainScreen().bounds.size.width

    //闭包传值，创建一个闭包，用来传递被选中的按钮，以实现页面的转换
    var clickBlock:((selcted:Int) ->())?
    
    //重写构造方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.frame = CGRectMake(0, 0, width, 49)
        self.backgroundColor = UIColor.blackColor()
        //打开用户交互
        self.userInteractionEnabled = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
	//写一个制作方法，传图标题数组、图片名称数组、被选中状态下图片名称数组和每个按钮之间的间距
    func creatTabBar(titNames:[String],imageNames:[String],selectedImageNames:[String],space:Int) {
    	//快速布局
        for i in 0...titNames.count - 1 {
            var btn = ZYF_MyTabBarButton(type: .Custom)
            btn.frame = CGRectMake(20 + CGFloat(i) * 83, 0, 49, 49)
            let image = UIImage(named: imageNames[i])
            let selectedImage = UIImage(named: selectedImageNames[i])
            
            //Mark*设置中间特殊按钮
            if i == 2{
            
           			
            	//Mark* 如果想设置凸起的话让pointY为负值
            	
                let pointY:CGFloat = 5
                let pointX:CGFloat = 49 + abs(pointY)
                btn = ZYF_MyTabBarButton.init(frame: frame, image: "ZYF-Login-Dou")
                btn.frame = CGRectMake(183, pointY, width / 5, pointX)
            } else {
                btn.setImage(selectedImage, forState: .Selected)
                btn.setImage(image, forState: .Normal)
            }
            
            
            btn.setTitle(titNames[i], forState: .Normal)
            self.addSubview(btn)
            btn.tag = 10 + i
            //为每个btn添加点击事件，以实现界面替换
            btn.addTarget(self, action: #selector(self.btnClick(_:)), forControlEvents: .TouchUpInside)
            
            //设置默认第一个按钮为选中状态
            if i == 0 {
                btn.selected = true
                self.button = btn
            }
        }
    }
    
    //点击事件
    func btnClick(sender:UIButton) {
        //实现视图切换
        print("视图切换")
        //通过tag值获取点击的btn
        let index = sender.tag - 10
        if index < 2 {
            //设置闭包中的值
            if clickBlock != nil {
                clickBlock!(selcted:index)
                print("index<2")
            }
        } else if index > 2 {
            if clickBlock != nil {
                clickBlock!(selcted:index - 1)
            }
        } else {
            clickBlock!(selcted:999)
            return
        }
        
        //设置选中按钮
        self.button.selected = false
        sender.selected = true
        self.button = sender
    }
}

使用方式


    //获取屏宽
    let width = UIScreen.mainScreen().bounds.size.width
    //获取屏高
    let height = UIScreen.mainScreen().bounds.size.height
    //实例化自定制TabBar
    let tabbar = ZYF_Main_MyTabBar()
        //隐藏系统的tabbar
        self.tabBar.hidden = true
        //设置位置
        tabbar.frame = CGRectMake(0, height - 49, width, 49)
        //标题数组
        let title = ["发现","关注","","消息","我的"]
        
        //图片名称数组
        let imageName = ["find","focus","center","message","contact"]
        
        //选中图片名称数组
        let selectedImage = ["sfind","sfocs","center","smessage","smy"]
        
        //创建按钮
        tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)

        //使用闭包中的值
        tabbar.clickBlock = {(selcted:Int) in
            if selcted == 999 {
                print("点击了特殊按钮")
            } else {
                print(123)
                self.selectedIndex = selcted
            }
        }
        //将自定制tabbar加到主视图上
        self.view.addSubview(tabbar)

效果图如下：

---恢复内容结束---

#### 封装了一个带有中间凸起的自定制Tabbar，包含4个普通按钮和中间的一个凸起按钮-

  1. 首先封装了一个UIButton，重新设置了UIButton的图片位置和label位置
  2. 使用便利构造器创建了一个带有imageview的构造方法，用来构造中间特殊的按钮
  3. 继承与UIView创建了一个自定制tabbar类，大小为屏幕宽度和49 高，
  4. 动态创建5个自定制的UIButton，对中间的按钮做了特殊处理，其中的位置大小可以根据需求设置。
  5. 设置一个全局的button存储高亮状态下的按钮
  6. 使用闭包进行了控制器于自定制tabbar之间的传值，实现了不同按钮切换不同界面的功能

使用方法：

  1. 实例化一个自定制TabBar let myTabbar = ZYF_Main_MyTabBar()
  2. 设置自定制TabBar的frame myTabbar.frame = CGRectMake(0, height - 49, width, 49)
  3. 调用方法，传入参数：标题数组、.Normal状态下的图片数组、.selected状态下的图片数组，每个按钮之间的间距
    tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)

Github地址

上代码

封装UIButton，重置UIButton的图片位置和Label位置

class ZYF_MyTabBarButton: UIButton {
	//重写构造方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.frame = CGRectMake(0, 0, 49, 49)
        self.setTitleColor(UIColor.grayColor(), forState: .Normal)
        self.setTitleColor(UIColor.redColor(), forState: .Selected)
        self.titleLabel?.font = UIFont.systemFontOfSize(11)
        self.titleLabel?.textAlignment = .Center
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    //重写button中图片的位置
    override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
        return CGRectMake((contentRect.size.width - 30) / 2, 2, 30, 30)
    }
    //重写button中文本框的位置
    override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
        return CGRectMake(0, contentRect.size.height - 17, contentRect.size.width, 15)
    }
    
    //使用便利构造器构造中间特殊按钮
    convenience init(frame: CGRect,image:String) {
        self.init(frame:frame)
        let imageView = UIImageView(frame: CGRectMake(0,0,70,70))
        imageView.image = UIImage(named: image)
        self.addSubview(imageView)
    }
}

继承UIView制作MyTabBar

class ZYF_Main_MyTabBar: UIView {
	//设置一个全局的button存储selected按钮
    var button = UIButton()
    //获得屏高
    let height = UIScreen.mainScreen().bounds.size.height
    //获得屏宽
    let width = UIScreen.mainScreen().bounds.size.width

    //闭包传值，创建一个闭包，用来传递被选中的按钮，以实现页面的转换
    var clickBlock:((selcted:Int) ->())?
    
    //重写构造方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.frame = CGRectMake(0, 0, width, 49)
        self.backgroundColor = UIColor.blackColor()
        //打开用户交互
        self.userInteractionEnabled = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
	//写一个制作方法，传图标题数组、图片名称数组、被选中状态下图片名称数组和每个按钮之间的间距
    func creatTabBar(titNames:[String],imageNames:[String],selectedImageNames:[String],space:Int) {
    	//快速布局
        for i in 0...titNames.count - 1 {
            var btn = ZYF_MyTabBarButton(type: .Custom)
            btn.frame = CGRectMake(20 + CGFloat(i) * 83, 0, 49, 49)
            let image = UIImage(named: imageNames[i])
            let selectedImage = UIImage(named: selectedImageNames[i])
            
            //Mark*设置中间特殊按钮
            if i == 2{
            
           			
            	//Mark* 如果想设置凸起的话让pointY为负值
            	
                let pointY:CGFloat = 5
                let pointX:CGFloat = 49 + abs(pointY)
                btn = ZYF_MyTabBarButton.init(frame: frame, image: "ZYF-Login-Dou")
                btn.frame = CGRectMake(183, pointY, width / 5, pointX)
            } else {
                btn.setImage(selectedImage, forState: .Selected)
                btn.setImage(image, forState: .Normal)
            }
            
            
            btn.setTitle(titNames[i], forState: .Normal)
            self.addSubview(btn)
            btn.tag = 10 + i
            //为每个btn添加点击事件，以实现界面替换
            btn.addTarget(self, action: #selector(self.btnClick(_:)), forControlEvents: .TouchUpInside)
            
            //设置默认第一个按钮为选中状态
            if i == 0 {
                btn.selected = true
                self.button = btn
            }
        }
    }
    
    //点击事件
    func btnClick(sender:UIButton) {
        //实现视图切换
        print("视图切换")
        //通过tag值获取点击的btn
        let index = sender.tag - 10
        if index < 2 {
            //设置闭包中的值
            if clickBlock != nil {
                clickBlock!(selcted:index)
                print("index<2")
            }
        } else if index > 2 {
            if clickBlock != nil {
                clickBlock!(selcted:index - 1)
            }
        } else {
            clickBlock!(selcted:999)
            return
        }
        
        //设置选中按钮
        self.button.selected = false
        sender.selected = true
        self.button = sender
    }
}

使用方式


    //获取屏宽
    let width = UIScreen.mainScreen().bounds.size.width
    //获取屏高
    let height = UIScreen.mainScreen().bounds.size.height
    //实例化自定制TabBar
    let tabbar = ZYF_Main_MyTabBar()
        //隐藏系统的tabbar
        self.tabBar.hidden = true
        //设置位置
        tabbar.frame = CGRectMake(0, height - 49, width, 49)
        //标题数组
        let title = ["发现","关注","","消息","我的"]
        
        //图片名称数组
        let imageName = ["find","focus","center","message","contact"]
        
        //选中图片名称数组
        let selectedImage = ["sfind","sfocs","center","smessage","smy"]
        
        //创建按钮
        tabbar.creatTabBar(title, imageNames: imageName, selectedImageNames: selectedImage, space: 83)

        //使用闭包中的值
        tabbar.clickBlock = {(selcted:Int) in
            if selcted == 999 {
                print("点击了特殊按钮")
            } else {
                print(123)
                self.selectedIndex = selcted
            }
        }
        //将自定制tabbar加到主视图上
        self.view.addSubview(tabbar)

效果图如下：

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
#import&quot;项目名-Swift.h&quot;的介绍发布时间：2022-07-13
下一篇：
Swift3获取当前连接WIFI名称发布时间：2022-07-13
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap