Android 自定义ViewGroup

前面的文章我们学习了如何自定义View，下面我们继续来分析如何创建自定义ViewGroup。ViewGroup存在的目的就是为了对其子View进行管理，为子View添加显示、相应的规则。因此，自定义ViewGroup通常需要重写onMeasure()方法来对子View进行测量，重写onLayout()方法来确定子View的位置，重写onTouchEvent()方法增加相应事件。下面通过一个实例，来看看如何自动以ViewGroup。

本案例准备实现一个类似Android原生控件ScrollView的自定义ViewGroup，自定义ViewGroup可以实现ScrollView所具有的上下滑动功能，但是滑动的过程中，增加一个粘性的效果，即当一个子View向上滑动大于一定的距离后，松开手指，它将自动向上滑动，显示下一个View。同理，如果滑动距离小于一定距离，松开手指，它将自动滑动到开始的的位置，相信大家在很多APP应用中都见过这样的效果。

首先让自定义ViewGroup能实现类似ScrollView的功能。

当然，在ViewGroup能滑动之前，需要先放置好它的子View。使用遍历的方式来通知View对自身进行测量，代码如下。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int child = getChildCount();
        int measureSelfWidth =  MeasureSpec.getSize(widthMeasureSpec);
        for (int i = 0; i < child; ++i){
            View childView = getChildAt(i);
            measureChild(childView,widthMeasureSpec,heightMeasureSpec);
        }
        int totalHeight = getScreenSize(mContext).heightPixels * child;
        setMeasuredDimension(measureSelfWidth, totalHeight);

    }
    /**
     * 获取屏幕大小，这个可以用一个常量不用每次都获取
     *
     * @param context
     * @return
     */
    public static DisplayMetrics getScreenSize(Context context) {
        DisplayMetrics metrics = new DisplayMetrics();
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        wm.getDefaultDisplay().getMetrics(metrics);
        return metrics;

    }

接下来，就要对子View进行放置位置的设定。让每个子View都显示完整的一屏，这样在滑动的时候，可以比较好地实现后面的效果。在放置子View前，需要确定整个ViewGroup的高度。在本例中，由于让每个子View占一屏的高度，因此整个ViewGroup的高度即子View的个数乘以屏幕的高度，我们通过如下代码来确定整个ViewGroup的高度。

        //设置ViewGroup的高度
        MarginLayoutParams mlp = (MarginLayoutParams) getLayoutParams();
        mlp.height = mScreenHeight * childCount;
        setLayoutParams(mlp);

在获取了整个ViewGroup的高度以后，就可以通过遍历来设定每个子View需要放置的位置了，直接通过调用子View的Layout()方法，并将具体的位置作为参数传递进去即可，代码如下所示。

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        //设置ViewGroup的高度
        MarginLayoutParams mlp = (MarginLayoutParams) getLayoutParams();
        mlp.height = mScreenHeight * childCount;
        setLayoutParams(mlp);
        for (int i = 0; i < childCount; i++){
            View child = getChildAt(i);
            if (child.getVisibility()!=View.GONE){
                child.layout(l,i*mScreenHeight,r,(i+1)*mScreenHeight);
            }
        }
    }

在代码中主要失是去修改每个子View的top和bottom这两个属性，让它们能依次排列下来。

通过上面的步骤，就可以将子View放置到ViewGroup中了。但此时的ViewGroup还不能相应任何触摸事件，自然也不能滑动，因此我们需要重写onTouchEvent()方法，为ViewGroup添加响应事件。在ViewGroup中添加滑动事件，通常可以使用scrollBy()方法来辅助滑动。在onTouchEvent()方法的ACTION_MOVE事件中，只要使用scrollBy(0,dy)方法，让手指滑动的时候让ViewGroup中的所有子View也跟着滑动dy即可，计算dy的方法有很多，如下代码就提过了一种思路。

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mLastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                if (!mScroller.isFinished()){
                    mScroller.abortAnimation();
                }
                int dy = mLastY - y;
                if (getScrollY()<0){
                    dy = 0;
                }
                if (getScrollY()>getHeight()-mScreenHeight){
                    dy = 0;
                }
                scrollBy(0,dy);
                mLastY = y;
                break;
        }

按如上方法操作就可以实现类似ScrollView的滑动效果了。当然，系统的原生ScrollView有更大的功能，比较滑动的惯性效果等，这些功能可以在后面慢慢的添加，这也是一个控件的迭代过程。

最后，我们来实现这个自定义ViewGroup的黏性效果。要实现手指离开后ViewGroup的黏性效果，我们很自然地想到onTouchEvent()的ACTION_UP事件和Scroller类。在ACTION_UP事件中判断手指滑动的距离，如果超过一定的距离，则使用Scroller类来平滑移动到下一个子View；如果小于一定距离，则回滚到原来的位置，代码如下所示。

        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //记录触摸起点
                mStart = getScrollY();
                break;
            case MotionEvent.ACTION_UP:
                //记录触摸终点
                mEnd = getScrollY();
                int dScrolly = mEnd - mStart;
                if (dScrolly>0){
                    if (dScrolly<mScreenHeight/3){
                        mScroller.startScroll(0,getScrollY(),0,-dScrolly);
                    }else {
                        mScroller.startScroll(0,getScrollY(),0,mScreenHeight-dScrolly);
                    }
                }else {
                    if (-dScrolly<mScreenHeight/3){
                        mScroller.startScroll(0,getScrollY(),0,-dScrolly);
                    }else {
                        mScroller.startScroll(0,getScrollY(),0,-mScreenHeight-dScrolly);
                    }
                }
                break;

通过以上操作，我们就能在onTouchEvent()中实现滚到的逻辑效果和“黏性”的逻辑，整个onTouchEvent()的代码如下所示。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int y = (int) event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mLastY = y;
                mStart = getScrollY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (!mScroller.isFinished()){
                    mScroller.abortAnimation();
                }
                int dy = mLastY - y;
                if (getScrollY() < 0){
                    dy = 0;
                }
                if (getScrollY() > getHeight() - mScreenHeight){
                    dy = 0;
                }
                scrollBy(0,dy);
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
                mEnd = getScrollY();
                int dScrolly = mEnd - mStart;
                if (dScrolly > 0){
                    if (dScrolly < mScreenHeight / 3){
                        mScroller.startScroll(0,getScrollY(),0,-dScrolly);
                    }else {
                        mScroller.startScroll(0,getScrollY(),0,mScreenHeight - dScrolly);
                    }
                }else {
                    if (-dScrolly < mScreenHeight / 3){
                        mScroller.startScroll(0,getScrollY(),0,-dScrolly);
                    }else {
                        mScroller.startScroll(0,getScrollY(),0,-mScreenHeight - dScrolly);
                    }
                }
                
                break;
        }
        postInvalidate();
        return true;
    }

当然，最后不要忘记加上computeScroll()的代码，如下所示。

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()){
            scrollTo(0,mScroller.getCurrY());
            postInvalidate();
        }
    }

程序运行效果如图（1）所示。

                                                    

                                                                                           （1）