自定义商品详情页

大家好，当你看到一些购物类App的商品详情页时，是不是对它的分页处理感到眼前一亮呢，是不是对该情景下的逻辑想的十分清楚呢，那么今天我就简单的来谈谈如何优雅的实现这一功能。

实现的原理：我会定义一个Viewgroup,这个容器将装载着两个ScrollView，分别表示着第一页和第二页。其中我还将ScrollView进行了封装，留有监听滑动到顶部和底部的监听。之后，我们将对事件进行拦截处理，下面代码会仔细讲。
1.重写ScrollView，得到滑动到顶部和底部的时机

 @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (state == null) return;
        //当ScrollView的子Layout的测量高度==ScrollView的高度加上滑动的距离，这时候就到达了底部
        if (getChildAt(0).getMeasuredHeight() <= getMeasuredHeight() + getScrollY()) {
            state.aliBottom(MyScrollView.this);
            return;
        }
        if (getScrollY() == 0) {
        //当滑动距离为0时，就说明ScrolView到达了顶部
            state.aliTop(MyScrollView.this);
            return;
        }
        //否则就认为在中间状态
        state.center(this);
    }

//监听
 public interface PositionState {
        //顶部
        void aliTop(ScrollView v);
        /底部
        void aliBottom(ScrollView v);
        //中部
        void center(ScrollView v);
    }

2.定义ScrollView容器，处理事件的拦截和滑动

/*
 * 一般在  onSizeChanged（）方法中获取高度，还能实时的获得实际的大小，很方便
 **/
 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = getMeasuredWidth();
        height = getMeasuredHeight();
    }

/*
 * 这里将容器的高度设置为first的高度
 **/
 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        int h = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), h);
        //设置边界
        topBorder = getMeasuredHeight();
    }

/*
 * 这里跟Linearlayout有点像，就是first在second的上面，叠加的过程
 **/
 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int h = firstView.getMeasuredHeight();
        firstView.layout(0, 0, width, h);
        secondView.layout(0, h, width, h + secondView.getMeasuredHeight());
    }

/*
 * 在进行事件拦截的时候，一般是这样的：Down时间是默认不拦截的，move是选择性拦截的，up时间是默认拦截的（能接受到up事件就就说明容器自己要处理该事件了）
 **/
@Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //默认不拦截
                touchY = ev.getRawY();
                touchFistTime = ev.getRawY();
                isIntercept = false;
                break;
            case MotionEvent.ACTION_MOVE:
                float move = ev.getRawY() - touchFistTime;
                //当first在底部时我们将拦截所有的move时间
                if (move > 0 && secondState == TOP && firstState == UN_VISIABLE) {
                    isIntercept = true;
                    break;
                }
                //当second在顶部时，我们将拦截所有的move事件
                if (move < 0 && firstState == BOTTOM && secondState == UN_VISIABLE) {
                    isIntercept = true;
                    break;
                }
                isIntercept = false;
                break;
            case MotionEvent.ACTION_UP:
                isIntercept = true;
                break;
        }
        return isIntercept;
    }

/*
 * 在该方法中进行滑动的处理，这里有四种情况
 **/
 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                //条件判断,当小于最小滑动距离就不做处理
                float hasScroll = touchFistTime - event.getRawY();
                if (Math.abs(hasScroll) < mineScroll) break;
                float scroll = getScrollY() + touchY - event.getRawY();
                //该容器的滑动的数字不可能为负数，只可能在0-topBorder 之间
                if (scroll < 0) {
                    scrollTo(0, 0);
                    //监听的回调
                    if (pageChangeListener != null) {
                        pageChangeListener.pageChange(0);
                        pageChangeListener.firstPageScrollChange(0);
                    }
                    //也不能超过最大边界
                } else if (scroll > topBorder) {
                    scrollTo(0, topBorder);
                    //监听回调
                    if (pageChangeListener != null) {
                        pageChangeListener.pageChange(1);
                        pageChangeListener.secondPageScrollChange(1);
                    }
                } else {
                //这里就是正常范围了
                    scrollTo(0, (int) scroll);
                    if (firstState != UN_VISIABLE && pageChangeListener != null) {
                        pageChangeListener.pageChange(0);
                        pageChangeListener.firstPageScrollChange(Math.abs(event.getRawY() - touchFistTime) / (MIN_DISTANCE * 1.0));
                    }

                    if (secondState != UN_VISIABLE && pageChangeListener != null) {
                        pageChangeListener.pageChange(1);
                        pageChangeListener.secondPageScrollChange(Math.abs(event.getRawY() - touchFistTime) / (MIN_DISTANCE * 1.0));
                    }
                }
                touchY = event.getRawY();
                break;
            case MotionEvent.ACTION_UP:
                if (sAnimator == null) return true;
                if (firstState == BOTTOM) {
                 //这里滑动到第二页
                    if (touchFistTime - event.getRawY() > MIN_DISTANCE) {
                        sAnimator.setDuration(LONG_TIME);
                        sAnimator.setIntValues(getScrollY(), topBorder);
                        sAnimator.start();
                    } else {
                      //这里回弹到第一页
                        sAnimator.setIntValues(getScrollY(), 0);
                        sAnimator.setDuration(SHORT_TIME);
                        sAnimator.start();
                    }
                }
                if (secondState == TOP) {
                //这里滑动到第一页
                    if (event.getRawY() - touchFistTime > MIN_DISTANCE) {
                        sAnimator.setIntValues(getScrollY(), 0);
                        sAnimator.setDuration(LONG_TIME);
                        sAnimator.start();
                    } else {
                    //这里回弹到第二页
                        sAnimator.setIntValues(getScrollY(), topBorder);
                        sAnimator.start();
                        sAnimator.setDuration(SHORT_TIME);
                    }
                }
                break;
        }
        return true;
    }

//当动画完成后就要，改变各个ScrollView的状态。
  @Override
            public void onAnimationEnd(Animator animation) {
                if (firstState == BOTTOM && getScrollY() == topBorder) {
                    firstState = UN_VISIABLE;
                    secondState = TOP;
                    if (pageChangeListener != null) {
                        pageChangeListener.pageChange(1);
                    }
                }
                if (firstState == BOTTOM && getScrollY() == 0) {
                    firstState = BOTTOM;
                    secondState = UN_VISIABLE;
                    if (pageChangeListener != null) {
                        pageChangeListener.pageChange(0);
                    }
                }
                if (secondState == TOP && getScrollY() == topBorder) {
                    firstState = UN_VISIABLE;
                    secondState = TOP;
                    if (pageChangeListener != null) {
                        pageChangeListener.pageChange(1);
                    }
                }
                if (secondState == TOP && getScrollY() == 0) {
                    firstState = BOTTOM;
                    secondState = UN_VISIABLE;
                    if (pageChangeListener != null) {
                        pageChangeListener.pageChange(0);
                    }
                }

                invalidate();
                requestLayout();

            }

好了，就这两步就完成了，这种分页的效果，是不是很简单，很优雅呢。