仿淘宝商品详情页中（继续拖动到图文详情）

• 参考文章http://www.jb51.net/article/91858.htm

• 核心view 有2个

  • 一个是自定义的ViewGroup
  • 一个是自定义的ScrollView

• 首先是自定义的ScrollView

public class MyScrollView extends ScrollView {
    public MyScrollView(Context context) {
        super(context);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setScrollListener(ScrollListener scrollListener) {
        this.mScrollListener = scrollListener;
    }

    private static String TAG=MyScrollView.class.getName();

    private ScrollListener mScrollListener;

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()){
            case MotionEvent.ACTION_MOVE:
                if(mScrollListener!=null){
                    //得到第一个，也就是子view中]所有的view的 总高点，
                    int contentHeight=getChildAt(0).getHeight();
                    Log.d("---->>>>>" , "contentHeight"+contentHeight);
                    //得到状态栏到屏幕底部的距离，
                    int scrollHeight = getHeight();
                    Log.d("---->>>>>" , "scrollHeight"+scrollHeight);
                    //得到ScrollView中滚动的最高位置
                    int scrollY = getScrollY();
                    Log.d("---->>>>>" , "getScrollY()"+scrollY);
                    mScrollListener.onScroll(scrollY);
                    //判断最高位置+ 状态栏到底部的位置  > 总位置 ， 那么就执行到下一个ScrollView的视图，否则还是笨视图
                    if(scrollY+scrollHeight>=contentHeight||contentHeight<=scrollHeight){
                        mScrollListener.onScrollToBottom();
                    }else {
                        mScrollListener.notBottom();
                    }
                    if(scrollY==0){
                        mScrollListener.onScrollToTop();
                    }
                }
                break;
        }
        boolean result=super.onTouchEvent(ev);
        //表示子view不能有自己的处理事件
        requestDisallowInterceptTouchEvent(false);
        return result;
    }
    //滑动监听事件
    public interface ScrollListener{
        void onScrollToBottom();//跳到下一页
        void onScrollToTop();//跳到上一页
        //根据当前ScrollY是0还是最大来决定跳转还是停留
        void onScroll(int scrollY);
        void notBottom();//不跳转
    }
}

• 然后就是主要的自定义GroupView

public class MyTwoViewGroup extends ViewGroup {


    MyScrollView topScrollView, bottomScrollView;
    VelocityTracker velocityTracker = VelocityTracker.obtain();
    Scroller scroller = new Scroller(getContext());
    int currPosition = 0;//0表示第一页，1表示第二页
    int position1Y;//弹性滑动的Y轴方向
    int lastY;//记录移动完后最后的坐标
    public int scaledTouchSlop;//最小滑动距离
    int speed = 200;//滑动速度
    boolean isIntercept;//父类是否拦截
    public boolean bottomScrollVIewIsInTop = false;//true表示第二页已经到最顶部了
    public boolean topScrollViewIsBottom = false;//true表示第一页已经滚动到最底部了！，

    public MyTwoViewGroup(Context context) {
        super(context);
        init();
    }

    public MyTwoViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyTwoViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        post(new Runnable() {
            @Override
            public void run() {

                topScrollView = (MyScrollView) getChildAt(0);
                bottomScrollView = (MyScrollView) getChildAt(1);
                topScrollView.setScrollListener(new MyScrollView.ScrollListener() {
                    @Override
                    public void onScrollToBottom() {
                        topScrollViewIsBottom = true;
                    }
                    @Override
                    public void onScrollToTop() {
                    }
                    @Override
                    public void onScroll(int scrollY) {
                    }
                    @Override
                    public void notBottom() {
                        topScrollViewIsBottom = false;//底部不显示
                    }
                });
                bottomScrollView.setScrollListener(new MyScrollView.ScrollListener() {
                    @Override
                    public void onScrollToBottom() {
                    }
                    @Override
                    public void onScrollToTop() {
                    }
                    @Override
                    public void onScroll(int scrollY) {
                        if (scrollY == 0) {
                            bottomScrollVIewIsInTop = true;
                        } else {
                            bottomScrollVIewIsInTop = false;
                        }
                    }
                    @Override
                    public void notBottom() {
                    }
                });
                position1Y = topScrollView.getBottom();
                scaledTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
            }
        });
    }
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        //防止子View禁止父view拦截事件
        this.requestDisallowInterceptTouchEvent(false);
        return super.dispatchTouchEvent(ev);
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                //判断是否已经滚动到了底部
                if (topScrollViewIsBottom) {
                    int dy = lastY - y;
                    //判断是否是向上滑动和是否在第一屏
                    if (dy > 0 && currPosition == 0) {
                        //偏离量是否 大于 滑动速度
                        if (dy >= scaledTouchSlop) {
                            isIntercept = true;//拦截事件
                            lastY=y;
                        }
                    }
                }
                if (bottomScrollVIewIsInTop) {
                    int dy = lastY - y;
                    //判断是否是向下滑动和是否在第二屏
                    if (dy < 0 && currPosition == 1) {
                        if (Math.abs(dy) >= scaledTouchSlop) {
                            isIntercept = true;
                        }
                    }
                }
                break;
        }
        return isIntercept;
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int y = (int) event.getY();
        //添加一个用户的运动跟踪
        velocityTracker.addMovement(event);

        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                int dy = lastY - y;
                if (getScrollY() + dy < 0) {
                    dy = getScrollY() + dy + Math.abs(getScrollY() + dy);
                }
                if (getScrollY() + dy + getHeight() > bottomScrollView.getBottom()) {
                    dy = dy - (getScrollY() + dy - (bottomScrollView.getBottom() - getHeight()));
                }
                scrollBy(0, dy);
                break;
            case MotionEvent.ACTION_UP:
                isIntercept = false;
                //计算当前速度的基础上,收集点
                velocityTracker.computeCurrentVelocity(1000);
                //检索最后计算Y速度。
                float yVelocity = velocityTracker.getYVelocity();
                if (currPosition == 0) {
                    if (yVelocity < 0 && yVelocity < -speed) {
                        smoothScroll(position1Y);
                        currPosition = 1;
                    } else {
                        smoothScroll(0);
                    }
                } else {
                    if (yVelocity > 0 && yVelocity > speed) {
                        smoothScroll(0);
                        currPosition = 0;
                    } else {
                        smoothScroll(position1Y);
                    }
                }
                break;
        }
        lastY = y;
        return true;
    }
    //子view的宽高
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec, heightMeasureSpec);
    }
    //第一个子view自身高度， 第二个子view的 顶部 是从第一个子view的总高度开始的
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        int childTop = t;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(l, childTop, r, childTop + child.getMeasuredHeight());
            childTop += child.getMeasuredHeight();
        }
    }
    //通过Scroller实现弹性滑动
    private void smoothScroll(int tartY) {
        int dy = tartY - getScrollY();
        scroller.startScroll(getScrollX(), getScrollY(), 0, dy);
        invalidate();//重绘
    }
    //onDraw中执行这个
    @Override
    public void computeScroll() {
        if (scroller.computeScrollOffset()) {
            scrollTo(scroller.getCurrX(), scroller.getCurrY());
            postInvalidate();
        }
    }
}

• 然后就是布局文件的使用
  
  • 主要就是2个自定义的ScrollView中放置的子view

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="com.xingao.com.recycleviewtest.DetailActivity">
    <com.xingao.com.recycleviewtest.ui.MyTwoViewGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <com.xingao.com.recycleviewtest.ui.MyScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <ImageView
                    android:scaleType="fitXY"
                    android:src="@drawable/a1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
                <TextView
                    android:text="这里是标题"
                    android:textSize="18dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
                <TextView
                    android:layout_marginTop="10dp"
                    android:text="子标题"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:textSize="18dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <LinearLayout
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:gravity="bottom"
                    android:layout_width="match_parent">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:height="50dp"
                        android:background="#b11"
                        android:gravity="center"
                        android:text="继续拖动查看图文详情"
                        android:textColor="#000" />
                </LinearLayout>
            </LinearLayout>
        </com.xingao.com.recycleviewtest.ui.MyScrollView>

        <com.xingao.com.recycleviewtest.ui.MyScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">
                <ImageView

                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/a1" />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/a3" />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/a3" />

            </LinearLayout>
        </com.xingao.com.recycleviewtest.ui.MyScrollView>
    </com.xingao.com.recycleviewtest.ui.MyTwoViewGroup>
</RelativeLayout>

• -