UIPickerView非常有意思,同时达到了视觉效果和业务效果.
UIPickerView
可以叫做滚轮选择器,滚轮上的文字有视觉透视,可以看到上下文字的形变.
这种效果确实也是用仿射变换来实现的.
image.png
这是Debug View Hierarchy的样子,右边还有一部分.
紫色的就是3d仿射变换的标记,这种侧面展示是选中不了里面的视图的,正面才行,当然也可以从Xcode左边的视图树来选择.
视图树
UIPickerView是这样一种结构:
1.每一个列表,对应一个Column,也就是UIPickerColumnView.这里有三个列表,所以有三个UIPickerColumnView,并且Column的frame和UIPickerView是一样的.
2.UIPickerColumnView中有三个UIView,对应位置上中下.并且每个UIView的frame也是和父视图Column一样,暂时取个名字叫container
UIPickerTableView
3.每个UIView内部有一个UIPickerTableView,它的frame是居中的.虽然视觉上三个列表分别在左中右,但是其容器tableView都是居中的.
cell的内部
cell被变换
4.最终显示文字的label在cell内部,可以看到,仿射变换作用的视图的cell,经过变换,cell被分配到坐标或者右边,以及实现透视效果
5.上面说的是其中一个tableView,**一个Column有三个container,上下负责实现滚轮视觉效果,中间负责显示当前选项.
- 三个tableView实际上是同步滚动的,捕获Column上的手势,根据滑动数据,对应到tableView的contentoffset,三个列表重叠在一起,三个列表同时滚动,这样不同的位置就展示出不同的数据;并且在滚动时把滑动数据映射到cell的仿射变换数值上,最终实现滚轮效果.
网友评论