分段选择控件(SegmentBar)--Swift
1.效果展示
样式展示2.问题解析
- 1.分段选择,联动
- 2.位置不固定:选择控件可能在导航栏,也可能在其他子视图上
3.本文解决思路
分段选择设计无非两种:一种封装控制器,一种封装控件。考虑到子视图会做很多操作,需要在自己单独的控制器内操作,本文设计成的是控制器。
1.父子控制器设计,每个页面在自己的控制器做逻辑处理
2.Swift版本
3.可自由选择segment bar添加的位置,可在导航栏上,也可在导航栏下,也可添加在其他视图上
4.提供自定义样式,样式通过链式编程方式自定义调整
4.补充
1.因为是控制器,所以使用起来要继承
2.父子控制器设计下,子控制器的view的bounds默认与父控制器的view一样大,如果要做部分页面的,可能需要修改尺寸
3.样式根据自己需要配置,可配置在外面,也可配置在里面默认值中
5.设计
- SegmentBarVC两个主要子控件:
- SegmentBar: 分选选择控件
- UIScrollView: 滚动视图
- SegmentBarVC两个主要子控件:
- 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)
}
}
网友评论