自定义LinearLayout实现淘宝详情页

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/u011102153/article/details/52703119

1.简单说明

  1. 淘宝详情页就不用我一一介绍了,昨天逛淘宝看到这个效果时,让我想起了去年刚学习Android只会使用现成的时候,当时在网上找了一个这种效果的使用了,并不懂怎么实现的。现在就看到一种效果就想自己实现一下,我想这就是刚接触某个知识时的好奇心吧

  2. 说走咱就走啊,本文只是介绍一种实现思路,网上也已经有了很多种实现方式,有问题请指正

  3. 效果图(我有很用心的找美女图的)
    这里写图片描述

2.实现思路

  1. 继承LinearLayout,设置方向为垂直
  2. 控件中有两个ScrollView,至于为什么要使用ScrollView,主要是因为内容超过一页时省去自己处理滑动
  3. 关键是事件分发处理。监听两个ScrollView的滑动事件,当第一页滑动到底部时,再向上拖动时,拦截事件,判断距离,超过设定值时,滑动到第二页,否则回弹;同理,当第二页滑动到顶部时,再向下拖动时,拦截事件,判断距离,超过设定值时,滑动到第一页,否则回弹(还有很多细节需要结合代码讲解)
  4. 关于回弹和滑动换页使用的是Scroller,对于Scroller的使用,本文不做过多解释

3.实现

3.1重写ScrollView

根据实现思路,我们需要监听ScrollView是否滑动到顶部和底部,但是ScrollView的setOnScrollChangeListener()方法在api23才添加。主要是重写ScrollViewonScrollChanged(int l, int t, int oldl, int oldt)方法。

l:当前水平方向滚动值,和getScrollX()相等
t:当前竖直方向滚动值,和getScrollY()相等
oldl:上一次水平滚动值
oldt:上一次竖直滚动值

  • 监听接口:
    public interface OnScrollEndListener {
        void scrollToBottom(View view);
        void scrollToTop(View view);
        void scrollToMiddle(View view);
    }
  • onScrollChanged方法
 @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(t == 0){
            if (mOnScrollBottomListener != null) {
                mOnScrollBottomListener.scrollToTop(this);
            }
        } else if(t + getMeasuredHeight() >=  getChildAt(0).getMeasuredHeight()){
            if (mOnScrollBottomListener != null) {
                mOnScrollBottomListener.scrollToBottom(this);
            }
        } else {
            if (mOnScrollBottomListener != null) {
                mOnScrollBottomListener.scrollToMiddle(this);
            }
        }
    }

3.2重写onMeasure方法、page的获取与设置

  • 显示调用第二个自孩子的测量方法,不然尺寸有可能为0
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 显示调用第二个自孩子的测量方法,不然尺寸有可能为0
         */
        View child2 = getChildAt(1);
        if (child2 != null) {
            child2.measure(widthMeasureSpec, heightMeasureSpec);
        }
    }
  • 在onFinishInflate中初始化两个页面
@Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if(getChildCount() == 2){
            View child1 = getChildAt(0);
            if (child1 instanceof ScrollEndScrollView){
                scrollView1 = (ScrollEndScrollView) child1;
            }
            View child2 = getChildAt(1);
            if(child2 instanceof ScrollEndScrollView){
                scrollView2 = (ScrollEndScrollView) child2;
            }
        }

        initEvent();
    }
  • 为两个页面设置滑动监听
private ScrollEndScrollView.OnScrollEndListener scrollEndListener = new ScrollEndScrollView.OnScrollEndListener() {
        @Override
        public void scrollToBottom(View view) {
            if(view == scrollView1){
                isToBotttom = true;
            }
        }

        @Override
        public void scrollToTop(View view) {
            if(view == scrollView2){
                isToTop = true;
            }
        }

        @Override
        public void scrollToMiddle(View view) {
            if(view == scrollView1){
                isToBotttom = false;
            }
            if(view == scrollView2){
                isToTop = false;
            }
        }
    };

3.3Scroller使用的几步

Scroller的英文解释是:
This class encapsulates scrolling. You can use scrollers (Scroller or OverScroller) to collect the data you need to produce a scrolling animation—for example, in response to a fling gesture. Scrollers track scroll offsets for you over time, but they don’t automatically apply those positions to your view. It’s your responsibility to get and apply new coordinates at a rate that will make the scrolling animation look smooth.

此类封装滚动。您可以使用滚动条(滚轮或OverScroller)收集你需要制作一个滚动的动画,例如,响应一扔手势的数据。滚动条为您跟踪滚动偏移量随着时间的推移,但他们不会自动将新的位置设置到View中。你的任务是获取并使用一个合适的速度,使滚动动画看起来更平滑。

简而言之,有关滑动的你都可以使用这个实现。

  • 需要重写的方法
@Override
    public void computeScroll() {
        super.computeScroll();
        //先判断mScroller滚动是否完成
        if (mScroller.computeScrollOffset()) {
            //这里调用View的scrollTo()完成实际的滚动
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            //必须调用该方法,否则不一定能看到滚动效果
            postInvalidate();
        }
    }
  • 辅助方法
    //调用此方法设置滚动的相对偏移
    public void smoothScrollBy(int dx, int dy) {
        //设置mScroller的滚动偏移量
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, Math.max(300, Math.abs(dy)));
        invalidate();//这里必须调用invalidate()才能保证computeScroll()会被调用,否则不一定会刷新界面,看不到滚动效果
    }
//调用此方法滚动到目标位置
    public void smoothScrollTo(int fx, int fy) {
        int dx = fx - mScroller.getFinalX();
        int dy = fy - mScroller.getFinalY();
        smoothScrollBy(dx, dy);
    }

3.4事件分发

最关键的部分,逻辑稍复杂,细节处理较多。这里重写dispatchTouchEvent。

显示第一页时

  • 未滑动到底部,事件由scrollView1自己处理
  • 滑动到底部时,如果继续向上拖动,拦截事件,父控件处理滑动;继续向下拖动时,如果父控件(即该控件)当前滚动最后位置(mScroller.getFinalY())不为0, 如果父控件继续滚动不会出现负值时(出现负值时会导致头部空白,因为这时是父控件控制,scrollView1不可滑动),不拦截事件,父控件处理滑动,否则,强制滑动到0位置,并把事件下发给子控件

显示第二页时

  • 未滑动到最顶部时,事件由scrollView2自己处理
  • 滑动到顶部时,如果继续向下拖动,拦截事件,父控件处理滑动;继续向上拖动时,如果父控件当前滚动位置小于第一页高度,拦截事件,父控件处理滑动,否则,滑动到第二页起始位置,并把事件下发给子控件

  • ACTION_MOVE中进行事件分发,ACTION_UP中进行切换页面、回弹
  • 关于使用scroller滑动,实现弹性效果,简单实现请看这里简单的弹性实现代码

@Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        int yPosition = (int) ev.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mScroller.abortAnimation();
                mLastY = yPosition;
                mMoveY = 0;
                break;
            case MotionEvent.ACTION_MOVE:
                mMoveY = (mLastY - yPosition);
                mLastY = yPosition;
                if(isToBotttom){
                    if(mMoveY > 0){
                        //向上
                        smoothScrollBy(0, mMoveY);
                        return true;
                    } else {
                        //向下
                        if(mScroller.getFinalY() != 0){
                            //这是出于第一页和第二页显示连接处
                            if(getScrollY() + mMoveY > 0){
                                smoothScrollBy(0, mMoveY);
                                return true;
                            } else{
                                smoothScrollTo(0, 0);
                                return super.dispatchTouchEvent(ev);
                            }
                        }
                    }
                }
                else if(isToTop){
                    if(mMoveY < 0){
                        //向下
                        smoothScrollBy(0, mMoveY);
                        return true;
                    } else {
                        //向上
                        if(mScroller.getFinalY() < scrollView1.getHeight()){
                            //这是出于第一页和第二页显示连接处
                            smoothScrollBy(0, mMoveY);
                            return true;
                        } else {
                            smoothScrollTo(0, scrollView1.getHeight());
                            return super.dispatchTouchEvent(ev);
                        }
                    }
                }

                //处理快速滑动时两页覆盖问题
                if(pageIndex == 0){
                    smoothScrollTo(0, 0);
                } else if(pageIndex == 1){
                    smoothScrollTo(0, scrollView1.getHeight());
                }

                break;

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                if(isToBotttom){
                   if(Math.abs(getScrollY()) > TO_NEXT_PAGE_HEIGHT){
                        //移动到第二页
                       pageIndex = 1;
                       smoothScrollTo(0, scrollView1.getHeight());
                       isToBotttom = false;
                       isToTop = true;
                    } else {
                        //回弹
                        smoothScrollBy(0, -mScroller.getFinalY());
                    }
                } else if(isToTop){
                    if(scrollView1.getHeight() - getScrollY() > TO_NEXT_PAGE_HEIGHT){
                        //移动到第一页
                        pageIndex = 0;
                        smoothScrollTo(0, 0);
                        isToBotttom = true;
                        isToTop = false;
                    } else {
                        //回弹
                        smoothScrollTo(0, scrollView1.getHeight());
                    }
                }

                break;
            default:
                break;
        }

        return super.dispatchTouchEvent(ev);
    }

4.总结

实现该控件,需要掌握的知识点主要是自定义控件的基本步骤、Scroller的基本使用和事件分发,当然这里最关键的处理还是事件分发。开头也说了,虽然这个有很多人实现过了,但还是想用自己的方式实现一遍。大笑三声,哈哈哈,又实现一个自定义控件…博主还在自定义控件学习阶段,请谨慎使用该控件到项目中。

5.下载

https://github.com/LineChen/TwoPageLayout

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页