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

来源:互联网 发布:淘宝网袜子批发厂家 编辑:程序博客网 时间:2024/04/28 04:39

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

封装了一个带有中间凸起的自定制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)    

效果图如下:

按钮.gif

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

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

#### 封装了一个带有中间凸起的自定制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)    

效果图如下:

按钮.gif

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

#### 封装了一个带有中间凸起的自定制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)    

效果图如下:

按钮.gif

0 0
原创粉丝点击