美文网首页iOS-Swift
iOS Swift分段选择控件(SegmentBar)

iOS Swift分段选择控件(SegmentBar)

作者: 20b347b28fc9 | 来源:发表于2019-01-19 15:26 被阅读8次

    分段选择控件(SegmentBar)--Swift


    1.效果展示

    样式展示

    2.问题解析

    - 1.分段选择,联动
    - 2.位置不固定:选择控件可能在导航栏,也可能在其他子视图上
    

    3.本文解决思路

    分段选择设计无非两种:一种封装控制器,一种封装控件。考虑到子视图会做很多操作,需要在自己单独的控制器内操作,本文设计成的是控制器。

    1.父子控制器设计,每个页面在自己的控制器做逻辑处理
    2.Swift版本
    3.可自由选择segment bar添加的位置,可在导航栏上,也可在导航栏下,也可添加在其他视图上
    4.提供自定义样式,样式通过链式编程方式自定义调整
    

    4.补充

     1.因为是控制器,所以使用起来要继承
     2.父子控制器设计下,子控制器的view的bounds默认与父控制器的view一样大,如果要做部分页面的,可能需要修改尺寸
     3.样式根据自己需要配置,可配置在外面,也可配置在里面默认值中
    

    5.设计

      1. SegmentBarVC两个主要子控件:
        - SegmentBar: 分选选择控件
        - UIScrollView: 滚动视图
      1. SegmentBarConfig:通过链式编程进行样式自定义,使用代码如下:
            segmentBarVC.segmentBar.updateConfig {(config) in
                config.textNormalColor(UIColor.lightGray)
                    .textSelectColor(UIColor.blue)
                    .textNormalFont(UIFont.systemFont(ofSize: 16))
                    .textSelectFont(UIFont.boldSystemFont(ofSize: 16))
                    .barMaxWidth(UIScreen.main.bounds.width)
                    .barHeight(44)
                    .itemMarginW(30)
                    .leftMargin(20)
                    .bottomLineHeight(2)
                    .bottomLineColor(UIColor.blue)
                    .isItemEqualWidth(false)
                    .update()
                
            }
    

    6.使用

    class SampleVC1: SegmentBaseVC {
       // 子类重写这个方法
        override func selectIndex(index: Int){
            
        }
        
        override func addSegmentBar() {
            
            let titles = ["热门", "最新"]
            let vc1 = SampleTableVC()
            let vc2 = SampleTableVC()
            let vcs = [vc1, vc2]
            
            // 添加标题和选择控制器
            segmentBarVC.setupTitlesAndChildVCs(titles: titles, childVCs: vcs)
            segmentBarVC.segmentBar.updateConfig {(config) in
                config.textNormalColor(UIColor.lightGray)
                    .textSelectColor(UIColor.black)
                    .barMaxWidth(UIScreen.main.bounds.width - 120)
                    .barHeight(44)
                    .bottomLineHeight(2)
                    .bottomLineColor(UIColor.blue)
                    .update()
            }
            
            
            self.navigationItem.titleView = segmentBarVC.segmentBar
            self.addChild(segmentBarVC)
            self.view.addSubview(segmentBarVC.view)
        }
    
    }
    
    

    7.简单demo

    地址: https://github.com/Colin22/SegmentBarProject

    相关文章

      网友评论

        本文标题:iOS Swift分段选择控件(SegmentBar)

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