android自定义滚轴选择器_android自定义滚动选择器（二）

在android自定义滚动选择器(一)这篇文章中，我们已经阐述了滚动选择器的实现原理以及准备事项，本篇文章将会从代码的角度一步步来实现该滚动选择器。

如果来不及阅读文章，或者想直接获取源码，见git：android自定义滚动选择器

ScrollPickerView的实现

ScrollPickerView这个是我们的主视图，说白了就是我们的滚动选择器，本小节先来阐述下其代码实现。

首先，我们要将ScrollPickerView用于xml中，就必须实现包含有AttributeSet类型入参的构造方法，这里我们直接实现匹配父类的三个构造方法，如下所示：

public ScrollPickerView(@NonNull Context context) {

this(context, null);

}

public ScrollPickerView(@NonNull Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public ScrollPickerView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

initTask();

}

其中有几点需要注意，

我们将参数少的构造方法委托给了参数多的构造方法，以完成构造初始化。这也是常规的做法。

我们在参数最多的构造方法中调用了initTask，这个initTask的目的是初始化一个执行任务，该任务就是在ScrollPickerView滚动结束后调整item视图的位置，使得被选中的item视图刚好位于两条分割线中。这里暂时不对其进行分析，会在下面进行阐述。

好了，构造方法基本完成了，但是我们发现在构造方法中并没有进行画笔的初始化，这个画笔是指用于绘制两条分割线的画笔，一般情况下我们都会在构造方法中完成初始化，那么为什么现在不这么做？

理由是考虑到分割线的定制化，因为外界可以通过adapter来完成画笔颜色的设置，而此时构造方法已经完成构造，所以无法获取到这些数据。

有朋友说那放在onMeasure或者onDraw中不就行了？放在这里确实也可以，但是存在一个性能和语义场景问题，首先，onMeasure的功能是完成view的测量，将画笔的属性设置放在这里面显然不太合适。其次，onDraw方法是view中被非常频繁调用的方法，如果画笔在此设置显然会影响性能，所以，也不能在此设置。那么还有更好的方法吗？

有，那就是在onAttachedToWindow方法中进行设置，这个方法会在view构造完成后调用，而且只调用一次，如下所示：

@Override

protected void onAttachedToWindow() {

super.onAttachedToWindow();

initPaint();

}

private void initPaint() {

if (mBgPaint == null) {

mBgPaint = new Paint();

mBgPaint.setColor(getLineColor()); mBgPaint.setStrokeWidth(ScreenUtil.dpToPx(1f));

}

}

其中getLineColor方法，就是获取外部设置的分割线颜色，正是通过上文中的IPickerViewOperation完成的，IPickerViewOperation接口的设计理念请参考上篇文章，getLineColor方法代码如下所示：

private int getLineColor() {

IPickerViewOperation operation = (IPickerViewOperation) getAdapter();

if (operation != null && operation.getLineColor() != 0) {

return operation.getLineColor();

}

return getResources().getColor(R.color.colorPrimary);

}

那么接下来该干什么？接下来当然就是完成ScrollPickerView的测绘，也就是复写onMeasure方法。

因为ScrollPickerView本身是个容器，这个容器会包含若干个item视图，所以如果我们想要保证容器大小合适，就必须自内而外的发起measure，也就是根据item视图来决定ScrollPickerView本身的宽高。

ScrollPickerView的onMeasure代码实现如下：

protected void onMeasure(int widthSpec, int heightSpec) {

widthSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);

heightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);

super.onMeasure(widthSpec, heightSpec);

measureSize();

setMeasuredDimension(mItemWidth, mItemHeight * getVisibleItemNumber());

initPaint();

}

这段代码主要注意以下几点：

前面文章我们说过，ScrollPickerView的宽高要由item视图来决定，而不能根据外界的设置决定，因为这样容易影响滚动选择器的整体效果，所以这里我们首先设置了MeasureSpec，将widthSpec设置成UNSPECIFIED，表示其宽度是不受限制的，而将heightSpec设置成AT_MOST(可以理解为对应于wrap_content)表示会根item视图高度完成滚动选择器的高度测量。这里解释下，上面所说的宽度不受限制，实际上并不是任意的，因为代码后面会根据item的宽度完成测量。

设置好MeasureSpec后，我们调用了 super.onMeasure(widthSpec, heightSpec);因为原来父view传给我们的MeasureSpec并不是这样的。

调用measureSize方法完成测绘，其核心思想就是获取item视图的高度和宽度，并完成两条分割线的Y坐标测绘，该方法的实现如下所示：

private void measureSize() {

if (getChildCount() > 0) {

if (mItemHeight == 0) {

mItemHeight = getChildAt(0).getMeasuredHeight();

}

if (mItemWidth == 0) {

mItemWidth = getChildAt(0).getMeasuredWidth();

}

if (mFirstLineY == 0 || mSecondLineY == 0) {

mFirstLineY = mItemHeight * getItemSelectedOffset();

mSecondLineY = mItemHeight * (getItemSelectedOffset() + 1);

}

}

}

这里分割线Y坐标的测量方法需要结合被选中item视图的偏移量来完成，即第一条线的Y坐标就是item视图的高度乘以被选中item视图的高度，而第二条只需要在增加一个itemHeight高度即可。

最后我们根据测量到的item视图高度和宽度，完成测量设置：

setMeasuredDimension(mItemWidth, mItemHeight * getVisibleItemNumber());

getVisibleItemNumber()表示item视图的可见数目，同样由IPickerViewOperation提供。

测量完成后，接下来就是渲染绘制了，对应的方法就是onDraw方法，该方法涉及的代码如下所示：

@Override

public void onDraw(Canvas c) {

super.onDraw(c);

doDraw(c);

if (!mFirstAmend) {

mFirstAmend = true;

((LinearLayoutManager) getLayoutManager()).scrollToPositionWithOffset(getItemSelectedOffset(), 0);

}

}

public void doDraw(Canvas canvas) {

if (mItemHeight > 0) {

int screenX = getWidth();

int startX = screenX / 2 - mItemWidth / 2 - ScreenUtil.dpToPx(5);

int stopX = mItemWidth + startX + ScreenUtil.dpToPx(5);

canvas.drawLine(startX, mFirstLineY, stopX, mFirstLineY, mBgPaint);

canvas.drawLine(startX, mSecondLineY, stopX, mSecondLineY, mBgPaint);

}

}

该段代码的意义阐述如下：

首先我们完成了两条分割线的绘制，这也是复写onDraw方法的初衷，因为容器相关的可以由android框架帮我们完成绘制，但是背后的两条分割线却只能我们自己来完成绘制。这个绘制很简单，就是根据onMeasure测量出来的两条分割线的Y坐标，完成绘制。

第一次onDraw的时候，我们进行了一次修正，这个修正就是根据用户设置的被选中item视图的偏移量进行的，其目的就是滚动到用户选中的item视图位置。

到这里，实际上已经能够看到一定的效果了，ScrollPickerView本身已经具备了滚动，而且两条分割线也已经出来了，但是这只是个轮廓，还有以下两点没有解决：

无法区分哪个item视图是被选中的，有朋友说滚动到两条分割线中间的不就是嘛！确实是这样的，但是这个是从视觉上来说的，实际上从代码的角度来看滚动到两条分割线之间的item视图和其他item视图没有任何区别，因为从代码的角度还无法标识该item视图是否在分割线中间，即当前分割线和item视图是独立存在的。比如我要将被选中的item视图字体变成红色，就还无法做到。

即使从视觉上来看，也存在很大的问题，那就是当ScrollPickerView滚动停止时，发现item视图会落在任意的位置，比如可能落在分割线上，也可能落在分割线内等等。

解决上述两个问题，就需要复写两个方法，分别阐述如下：

onScrolled方法。复写该方法的目的就是为了解决上述第一个问题，如下所示：

@Override

public void onScrolled(int dx, int dy) {

super.onScrolled(dx, dy);

freshItemView();

}

private void freshItemView() {

for (int i = 0; i < getChildCount(); i++) {

float itemViewY = getChildAt(i).getTop() + mItemHeight / 2;

updateView(getChildAt(i), mFirstLineY < itemViewY && itemViewY < mSecondLineY);

}

}

重点就是freshItemView，这就是我们要解决被选中item视图和分割线之间关系的重点。

首先，我们遍历了ScrollPickerView中可见的item视图，然后判断哪条item视图位于两条分割线之内。这里判断item视图是否在两条分割线之间的方法很简单，就是通过当前item视图在其父视图中的Y坐标是否在两条分割线之内进行判断的。

最后，我们调用了updateView方法，将选中的视图及其被选中的状态传递了出去，实际上是通过adapter(IPickerViewOperation)来进行传递的，如下所示：

private void updateView(View itemView, boolean isSelected) {

IPickerViewOperation operation = (IPickerViewOperation) getAdapter();

if (operation != null) {

operation.updateView(itemView, isSelected);

}

}

复写onTouchEvent方法，复写onTouchEvent方法就是为了解决上述的第二个问题，即解决滚动结束后被选中的item视图必须要位于两条分割线的正中间，因此我们要在用户手指离开屏幕的时候进行调整，这就需要监听ACTION_UP事件，如下所示：

@Override

public boolean onTouchEvent(MotionEvent e) {

if (e.getAction() == MotionEvent.ACTION_UP) {

processItemOffset();

}

return super.onTouchEvent(e);

}

private void processItemOffset() {

mInitialY = getScrollYDistance();

postDelayed(mSmoothScrollTask, 30);

}

这两个方法的代码很简单，主要来看processItemOffset这个方法，其调用了一个方法getScrollYDistance和启动了一个任务mSmoothScrollTask，而这个mSmoothScrollTask任务就是我们在ScrollPickerView构造方法中进行初始化的任务，下面先来看看getScrollYDistance的实现：

private int getScrollYDistance() {

LinearLayoutManager layoutManager = (LinearLayoutManager) this.getLayoutManager();

if (layoutManager == null) {

return 0;

}

int position = layoutManager.findFirstVisibleItemPosition();

View firstVisibleChildView = layoutManager.findViewByPosition(position);

if (firstVisibleChildView == null) {

return 0;

}

int itemHeight = firstVisibleChildView.getHeight();

return (position) * itemHeight - firstVisibleChildView.getTop();

}

这段代码的本质就是根据容器中第一条可见的item视图来完成ScrollPickerView的滚动Y距离，从代码可知这里adapter只能使用LinearLayoutManager作为布局管理者。

最后再来看下mSmoothScrollTask任务所做的工作，其代码如下所示：

mSmoothScrollTask = new Runnable() {

@Override

public void run() {

int newY = getScrollYDistance();

if (mInitialY != newY) {

mInitialY = getScrollYDistance();

postDelayed(mSmoothScrollTask, 30);

} else if (mItemHeight > 0) {

final int offset = mInitialY % mItemHeight;//离选中区域中心的偏移量

if (offset == 0) {

return;

}

if (offset >= mItemHeight / 2) {//滚动区域超过了item高度的1/2，调整position的值

smoothScrollBy(0, mItemHeight - offset);

} else if (offset < mItemHeight / 2) {

smoothScrollBy(0, -offset);

}

}

}

};

这里阐述下上面代码的思想。

首先，从整体上来讲，上面代码就是为了完成被选中item视图位置调整的功能，因为我们要保证使被选中的视图刚好停在两条分割线的中间。

在调整之前，我们进行了if (mInitialY != newY) 的判断，mInitialY就是在ScrollPickerView滚动结束后通过getScrollYDistance获取的值，而newY也是通过getScrollYDistance获取的值，只不过是在mSmoothScrollTask刚开始执行的时候获取的，这个比较是为了处理在mSmoothScrollTask刚要执行的时候用户又突然滑动的状况，这种状况下显然没有必要进行调整，所以直接结束当前任务，然后再触发一次mSmoothScrollTask任务即可。

如果mInitialY == newY，就表示在执行调整任务的时候，用户已经停止了滑动，这个是合情合理的，该调整任务主要工作阐述如下：

获取被选中item视图偏离两条分割线中间的偏移量offset，如果offset==0，表明刚好落在两条分割线中间，则无需调整。

如果offset >= mItemHeight / 2，则表示此时被选中的item视图(称之为itemA)滚动到了两条分割线中间点的下方，其趋势是向下滚动，所以我们就继续使其向下滚动，滚动距离为mItemHeight - offset，刚好使得itemA上面的item视图滚动到两条分割线中间，作为被选中item视图。

如果offset < mItemHeight / 2，则表示此时被选中的item视图(称之为itemA)滚动到了两条分割线的上半部分，其趋势是无法再继续向下滚动，而是有回弹的迹象，所以此时我们只需要回退offset个距离即可，这样就等于将itemA的下一个item视图滚动到了两条分割线中间。

至此ScrollPickerView的实现阐述完毕。下篇文章android自定义滚动选择器(三)会阐述ScrollPickerAdapter及其默认的item视图实现。