谈谈-Android-PickerView系列之源码解析 _pickerView

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述谈谈-Android-PickerView系列之源码解析相关的知识，希望能为你提供帮助。
前言WheelView想必大家或多或少都有一定了解，它是一款3D滚轮控件，效果类似ios 上面的UIpickerview 。按照国际惯例，先放一张效果图：

文章图片

以上是android-PickerView 的demo演示图，它有时间选择和选项选择，并支持一二三级联动，支持自定义样式。
本篇文章的主要内容是讲解ＷheelView的实现原理以及源代码，大致分以下几个步骤：
一、实现原理
二、自定义控件
三、onMeasure 测量
四、onDraw 绘制
五、onTouchEvent监听
一、实现原理
【谈谈-Android-PickerView系列之源码解析】上面我们看到的GIF图中，控件中间滚轮部分的布局，有多个WheelView，一个WheelView 就是一个3D滚轮，我画了一张图方便大家更为直观地理解：

文章图片

从上图中我们可以看到，每一项Item都是在圆弧上面，假设我们设置的WheelView它的可见Item数目为11，那么圆的半个周长就等于 10项Item的高度。我们看到的第一象限和第四象限，它是可见区域，即Item所显示的位置。其中,每项Item的高度 ItemHeight 等于两条分隔线的高度，具体如下图所示：

文章图片

（为什么要画得那么详细，因为这些参数在绘制过程中需要用到）
因此，我们可得以下结论：
1.每项Item 的高度是由文字大小以及间距倍数控制的， itemHeight = lineSpacingMultiplier * maxTextHeight；
2.圆周长 C = 2 （itemHeight *(itemsVisible - 1)）
2.根据圆周长公式 C= 2πR，可推导出圆半径R = C/2π ，圆直径 L = C/π；
二、自定义控件

创建一个WheelView 类继承自 View,覆盖onDraw、onMeasure、onTouchEvent方法.
在构造方法中初始化数据；
在构造方法中初始化三个画笔Paint，分别用于绘制选中项、未选中项、分隔线。

private void initPaints() { paintOuterText = new Paint(); paintOuterText.setColor(textColorOut); paintOuterText.setAntiAlias(true); paintOuterText.setTypeface(Typeface.MONOSPACE); paintOuterText.setTextSize(textSize); paintCenterText = new Paint(); paintCenterText.setColor(textColorCenter); paintCenterText.setAntiAlias(true); paintCenterText.setTextScaleX(1.1F); paintCenterText.setTypeface(Typeface.MONOSPACE); paintCenterText.setTextSize(textSize); paintIndicator = new Paint(); paintIndicator.setColor(dividerColor); paintIndicator.setAntiAlias(true); if (android.os.Build.VERSION.SDK_INT > = 11) { setLayerType(LAYER_TYPE_SOFTWARE, null); } }

三、onMeasure 测量 1.计算最大length的Text的宽高度

private void measureTextWidthHeight() { Rect rect = new Rect(); for (int i = 0; i < adapter.getItemsCount(); i++) { String s1 = getContentText(adapter.getItem(i)); paintCenterText.getTextBounds(s1, 0, s1.length(), rect); int textWidth = rect.width(); if (textWidth > maxTextWidth) { maxTextWidth = textWidth; } paintCenterText.getTextBounds("\u661F\u671F", 0, 2, rect); // "星期"的字符编码,用它作为标准高度 int textHeight = rect.height(); if (textHeight > maxTextHeight) { maxTextHeight = textHeight; } } itemHeight = lineSpacingMultiplier * maxTextHeight; //item的高度 }

2.计算圆的半径和直径，求出WheelView控件的宽高度

//周长公式 C= 2πR //半圆的周长 = item高度乘以item数目-1 halfCircumference = (int) (itemHeight * (itemsVisible - 1)); //整个圆的周长除以PI得到直径，这个直径用作控件的总高度 measuredHeight = (int) ((halfCircumference * 2) / Math.PI); //求出半径 radius = (int) (halfCircumference / Math.PI); //计算控件宽度，这里支持weight measuredWidth = MeasureSpec.getSize(widthMeasureSpec);

3.计算两条分隔线和Label文字的基线位置

//计算两条横线和选中项Label的基线centerY 位置 firstLineY = (measuredHeight - itemHeight) / 2.0F; secondLineY = (measuredHeight + itemHeight) / 2.0F; centerY = secondLineY - (itemHeight-maxTextHeight)/2.0f - CENTERCONTENTOFFSET;

对于centerY 为什么要减去CENTERCONTENTOFFSET（偏移量），因为Canvas.drawText方法中的坐标参数Y，并不是文字的底部位置，而是基线位置，所以我们要微调一下位置，让显示居中：

文章图片

文章图片

注：图片来源于http://blog.csdn.net/zly921112/article/details/50401976
4.初始化默认显示的item的position，即选中项位置

if (initPosition == -1) { if (isLoop) { initPosition = (adapter.getItemsCount() + 1) / 2; } else { initPosition = 0; } } preCurrentIndex = initPosition;

四、onDraw 绘制
经过以上几个步骤之后，我们绘制控件所需要的各个属性值也基本上计算好了，接下来就开始在onDraw方法中进行绘制
１.绘制两条横线

//绘制中间两条横线 canvas.drawLine(0.0F, firstLineY, measuredWidth, firstLineY, paintIndicator); canvas.drawLine(0.0F, secondLineY, measuredWidth, secondLineY, paintIndicator);

2.绘制Label文字

//显示单位Label,label不为空则进行绘制 if (label != null& & !label.equals("")) { int drawRightContentStart = measuredWidth - getTextWidth(paintCenterText, label); //绘制文字，靠右并留出空隙 canvas.drawText(label, drawRightContentStart - CENTERCONTENTOFFSET, centerY, paintCenterText); }

３.绘制item内容文字

终于到最核心的地方了——绘制有3D滚轮效果的Item文字。绘制它的两个关键因素：

item平移距离translateY。
文字Y轴的缩放率 scaleY。

在绘制之前，我们需要温习一下弧和圆、弧度、以及三角函数等概念以及它们的计算公式，对于公式有不了解的地方可以自行google 百度一下，这里就不多阐述了：

弧度和角度的换算公式 α = n*π/180 （α为弧度，n为角度）
弧度的计算公式 α = L / R ( 弧长/半径 )
正弦和余弦转换公式 cosα = sin( π/2-α )
由于我们在onDraw方法里面，translateY和scaleY都是是通过弧度 α 计算得到的，因此需要从弧度α开始入手。

由计算公式 α = L / R 可知，我们若要得到某项Item的弧度，则需要知道弧长和半径，由于之前我们已经通过计算获取到了半径值，所以现在需要计算弧长。

弧长L = itemHeight * counter - itemHeightOffset；即 Item的高度乘以该项Item所在Position位置,再减去已滑动距离的偏移量（itemHeightOffset < itemHeight ），计算出了弧长Ｌ，则可计算出每项Item对应的弧度α，计算出了α之后，根据三角函数可计算出平移距离translateY，如下图：

文章图片

radius （半径）
h2=cosα * maxTextHeight/2
h１=sinα * radius

由上图可知，item从位置F3E3移动到 A2B2的时，平移距离 translateY = radius - h2 -h1;
求出了translateY 之后，我们还需要求出压缩率scaleY：

文章图片

由上图可知 scaleY = cosn,由于代码里面参数是弧度制代表的数值，所以我们用弧度制表达 scaleY = cosα；
计算好了，我们开始撸代码，由于篇幅问题，就只贴出了部分关键代码，如下：

/*省略部分...*/ counter = 0; //position位置 while (counter < itemsVisible) { canvas.save(); // 弧长 L = itemHeight * counter - itemHeightOffset // 求弧度 α = L / r(弧长/半径) double radian = ((itemHeight * counter - itemHeightOffset)) / radius; // 弧度转换成角度(把半圆以Y轴为轴心向右转90度，使其处于第一象限及第四象限 float angle = (float) (90D - (radian / Math.PI) * 180D); //item第一项,从90度开始，逐渐递减到 -90度 // 九十度以上的不绘制 if (angle > = 90F || angle < = -90F) { canvas.restore(); } else { String contentText = getContentText(visibles[counter]); reMeasureTextSize(contentText); //计算开始绘制的位置 measuredCenterContentStart(contentText); measuredOutContentStart(contentText); float translateY = (float) (radius - Math.cos(radian) * radius - (Math.sin(radian) * maxTextHeight) / 2D); //根据Math.sin(radian)来更改canvas坐标系原点，然后缩放画布，使得文字高度进行缩放，形成弧形3d视觉差 canvas.translate(0.0F, translateY); canvas.scale(1.0F, (float) Math.sin(radian));

“等等，大兄弟，刚刚不是说‘scaleY = cosα ’吗”，怎么缩放文字的代码是这样的：

canvas.scale(1.0F, (float) Math.sin(radian));

别急别急，这是由于为了使Item的显示位置处于第一象限及第四象限，我们把半圆以原点为中心，顺时针旋转了90度。所以我们的角度 angle = (float) (90D - (radian / Math.PI) * 180D); （使角度的取值范围为[-90°, 90°]）
而根据：
1.弧度和角度转换公式 α = angle*π/180
2.正弦和余弦转换公式 cosα = sin( π/2-α )
我们就把cos函数给转化成sin函数了。

4.文字自适应大小

由于item的文字长度是不固定的，所以会存在文字长度过长而导致绘制超过Wheelview的宽度，因此这里需要做一下处理，当文字长度超过measuredWidth的时候，重设字体大小让其能完全显示：

/** * 根据文字的长度重新设置文字的大小让其能完全显示 * @param contentText */ private void reMeasureTextSize(String contentText) { Rect rect = new Rect(); paintCenterText.getTextBounds(contentText, 0, contentText.length(), rect); int width = rect.width(); int size = textSize; while (width > measuredWidth) { size--; //设置2条横线中间的文字大小 paintCenterText.setTextSize(size); paintCenterText.getTextBounds(contentText, 0, contentText.length(), rect); width = rect.width(); } //设置2条横线外面的文字大小 paintOuterText.setTextSize(size); }

五、onTouchEvent监听
一次静态图形绘制完成了，但是我们需要根据滑动距离让item文字动态地变换，以达到需求，那么如何根据滑动距离来控制UI变化呢？
别着急，之前已经说了定义WheelView 的时候需要覆盖onTouchEvent方法，必然是有它的道理的。我们通过onTouchEvent方法，然后：
1.分别处理MotionEvent.ACTION_DOWN、ACTION_MOVE、ACTION_UP 这三个事件，获取到滑动距离并记录下来。
2.根据获取的滑动距离、计算停止滑动时item所需要的偏移量，边界处理等工作。
3.最后调用invalidate()方法通知系统更新UI，相当于重新调用了onDraw()方法，重新绘制UI，实现3D滚轮效果。
由于篇幅问题，就只贴一下部分关键代码了：

@Override public boolean onTouchEvent(MotionEvent event) { boolean eventConsumed = gestureDetector.onTouchEvent(event); switch (event.getAction()) { //按下 case MotionEvent.ACTION_DOWN: startTime = System.currentTimeMillis(); cancelFuture(); previousY = event.getRawY(); break; //滑动中 case MotionEvent.ACTION_MOVE: float dy = previousY - event.getRawY(); previousY = event.getRawY(); totalScrollY = (int) (totalScrollY + dy); // 边界处理。 if (!isLoop) { float top = -initPosition * itemHeight; float bottom = (adapter.getItemsCount() - 1 - initPosition) * itemHeight; if (totalScrollY - itemHeight * 0.3 < top) { top = totalScrollY - dy; } else if (totalScrollY + itemHeight * 0.3 > bottom) { bottom = totalScrollY - dy; }if (totalScrollY < top) { totalScrollY = (int) top; } else if (totalScrollY > bottom) { totalScrollY = (int) bottom; } } break; //完成滑动，手指离开屏幕 case MotionEvent.ACTION_UP: default: // 弧长 L = α*R // 反余弦公式：arccos(cosα)= α // 由于之前是有向右偏移90度，所以实际弧度范围为 // α2 =π/2-α （α=[0,π] α2 = [-π/2,π/2]） // 根据正弦余弦转换公式 cosα = sin(π/2-α) // 因此 cosα = sin(π/2-α) = sinα2 = (radius - y) / radius // 所以弧长 L = arccos(cosα)*R = arccos((radius - y) / radius)*R if (!eventConsumed) { float y = event.getY(); double L = Math.acos((radius - y) / radius) * radius; int circlePosition = (int) ((L + itemHeight / 2) / itemHeight); float extraOffset = (totalScrollY % itemHeight + itemHeight) % itemHeight; mOffset = (int) ((circlePosition - itemsVisible / 2) * itemHeight - extraOffset); if ((System.currentTimeMillis() - startTime) > 120) { // 处理拖拽事件 smoothScroll(ACTION.DAGGLE); } else { // 处理条目点击事件 smoothScroll(ACTION.CLICK); } } break; } invalidate(); return true; }

结尾语
以上是WheelView的实现原理以及绘制过程的讲解，但是实际使用中我们往往需要多个Wheelview 并设置联动来实现我们的功能，所以Android-PickerView，这个项目就是对其进行了很好的封装，提供了两种选择器，一种是时间选择器（timePicker），一种是选择选择器(optionPicker)。

完整项目代码请到Github下载，这里是地址链接：Android-PickerView。文章转载自：http://blog.csdn.net/qq_22393017/article/details/59488906