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视图实现。

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

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

ScrollPickerView的实现