系统提供的UIDatePickerView或者UIPickerView，默认会有曲面的3d效果想一个圆柱一样如下图
图1
最近由于产品要求需要一个平的pickerView，就自己用scrollview实现了一个最终效果如下图
图2
不怎么会画图下面就给大家用文字简单分享下我的实现过程
1、基本布局
这个比较简单，如图2每一列是一个UIScrollView水平平铺，中间的分割线由于产品要求必须在中间所以我这里在初始化的时候是保证UIScrollView的高度是奇数的行高这样分割线正好可以卡在中间。
2、怎么让首行和末行可以拉到中间
这里我们以图2为例说明，scrollView的可视区域刚好可以显示5行数据，当显示的是头五条数据时如果scrollView的contentsize的高度刚好等于 行高 x 行数，那么当contentoffset的y等于0时第一条数据是在头部这个时候scrollView已经不能再向下拉了第一条数据也就不可能出现在中间，如果想让第一条数据拉倒中间则contentSize需要增加2行的高度；同样的末尾的数据想拉倒中间也需要增加2行的高度；这里通过分析我们可以知道scrollView的contentsize需要额外添加 （scrollView的高度 / 行高 - 1） x 行高
3、检测scrollView滑动停止
由于中间有分割线我们需要让分割线刚好锁定一行，这就需要我们在scrollView滑动停止后计算，scrollView滑动停止检测系统已经为我们提供了相应的代理方法，scrollView在快速滑动后会有一个拟物的效果缓慢减速直到停止，停止时下面第一个代理方法在这时候会被调用；但当我们缓慢迅速拖动scrollView不会有减速停止的效果这时候就需要第二个代理方法了（第二个代理是停止拖动后被调用当快速滑动用户停止触摸后也会被调用所以加了个判断，如果会减速说明是快速拖动的减速停止后会调用第一个代理方法此时不需要处理）fitContentOffSet是我定义的一个方法用来根据contentoffset来计算滑动到哪一行的
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
self.fitContentOffSet(scrollView: scrollView)
}
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
if decelerate == false {
self.fitContentOffSet(scrollView: scrollView)
}
}
4、滑动停止后根据contentoffSet计算滑动到哪一行
以图2为例想让第一行及最后一行数据滑到中间，根据2中的计算方法需要增加4行高度的contentsize，相当于给scrollView上面下面各插入两行数据，这样第一条数据是放在实际的第三条数据的位置；也就是当contentoffset的y为0时中间显示的是第一条数据以此类推，选中行 = contentoffset.y / 行高，这个时候有可能会有余数（假设行高为30当contentoffset.y为30时第二条数据刚好到中间，但当contentoffset.y小于30时第二条数据只有一部分进入中间区域，这时我是以行高的一半做标示如果大于15说明第二条超过一半进入到中间区域了，我就选中第二行反之则还回到第一行），当余数大于行高一半则选中行数加一反之则不加。下面给出计算代码
func fitContentOffSet(scrollView:UIScrollView){
let contentOffSetY = scrollView.contentOffset.y
var scrollToRow = Int(contentOffSetY) / Int(self.rowHeight)
let moreMove = Int(contentOffSetY) % Int(self.rowHeight)
if moreMove > Int(self.rowHeight / 2){
scrollToRow += 1
}
if let section = self.scrollViewArray.index(of: scrollView){
self.selectRow(row: scrollToRow, inSection: section)
}
}
Orz写完自己都感觉好乱，童鞋们可以直接看代码demo地址(里面有两个demo请看SwiftPickerView，有OC和swift两个版本)。
网友评论