
-
在许多的项目中都会用到segment的样式实现不同类型页面、数据的选择, 很多项目中会用到多次segment的样式, 但是系统的segment样式往往不符合项目需求, 大多数的项目及采用按钮或者其它的方式实现,使得页面的代码量增大,重复利用率低,笔者根据自己的思路实现了可以满足项目需求的segment进行封装,具体代码在这里, 代码量少, 封装简单
-
使用如下:

- 效果如下:

实现步骤##
具体实现过程如下:
-
层级结构
- 由于为了达到某些新闻类App中可左右滑动的segment效果, 采用底层为scrollView, 上面为自定义个数的UIButton, 用以处理点击事件
-
实现原理
根据用户定义的items数组中标题个数, 如果用户未设置视图的左右滑动效果,即contentOffSet, 则均分视图的宽度为布局UIButton的宽度, 高度为视图的高度
-
segment的点击事件的实现:
通过调用闭包(即Objective-C中的block)的形式,当按钮点击时, 通过selectedSegmentIndex属性获取之前的按钮, 并设置按钮的选中状态,并修改当前选中按钮的属性及selectedSegmentIndex,同事调用闭包实现点击方法
通过采用add(target:, action:)的方式实现segment的点击方法时, 首先保存调用对象及调用方法, 在按钮被点击时让保存的对象响应方法的实现

当设置segment选中的下标时, 需要重写其set方法, 实现滑块的移动动画及按钮的选中状态

以上为笔者的一个大体思路, 以及部分功能性代码, 若需要完整的代码, 可参考github, 可能有所不详细, 后期会不断更改, 若有不足,请指出, 谢谢
网友评论