1. 程式人生 > >仿淘寶商品瀏覽介面, 向上拉檢視詳情

仿淘寶商品瀏覽介面, 向上拉檢視詳情

寫的非常棒,用2個ScrollView 實現上拉檢視詳情的功能

但是發現在用在我的專案有點問題,有些小的需求沒有實現,所以就在這位大神的基礎上添加了簡單的功能

1. 事件回撥,   第二頁完全顯示出來的回撥,可以用來載入資料

2. 事件回撥,   當用戶滑到第一個ScrollView底部的時候,繼續上拉的時候,跟使用者提 -------  繼續上拉,載入更多


3. 事件回撥,   當用戶滑到第一個ScrollView底部的時候,繼續上拉之後,在放開螢幕,第一個ScrollView回滾回原先的位置,這是需要修改提示-----   上拉,可以載入更多

4.  需改之前程式碼可能出現錯誤的地方

5.  增加簡單的註釋

修改後的程式碼如下:

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.ScrollView;

import java.util.Timer;
import java.util.TimerTask;



public class ScrollViewContainer extends RelativeLayout {

    /**
     * 自動上滑
     */
    public static final int AUTO_UP = 0;
    /**
     * 自動下滑
     */
    public static final int AUTO_DOWN = 1;
    /**
     * 動畫完成
     */
    public static final int DONE = 2;
    /**
     * 動畫速度
     */
    public static final float SPEED = 10.0f;


    private boolean isMeasured = false;

    /**
     * 用於計算手滑動的速度
     */
    private VelocityTracker vt;

    private int mViewHeight;
    private int mViewWidth;

    private View topView;
    private View bottomView;

    private boolean canPullDown;
    private boolean canPullUp;
    private int state = DONE;

    /**
     * 記錄當前展示的是哪個view,0是topView,1是bottomView
     */
    private int mCurrentViewIndex = 0;
    /**
     * 手滑動距離,這個是控制佈局的主要變數
     */
    private float mMoveLen;
    private MyTimer mTimer;
    private float mLastY;
    /**
     * 用於控制是否變動佈局的另一個條件,mEvents==0時佈局可以拖拽了,mEvents==-1時可以捨棄將要到來的第一個move事件,
     * 這點是去除多點拖動劇變的關鍵
     */
    private int mEvents;

    //處理手指離開屏幕後的自動滾動,棒棒的寫法
    private Handler handler = new Handler() {


        @Override
        public void handleMessage(Message msg) {
            if (mMoveLen != 0) {
                if (state == AUTO_UP) {
                    mMoveLen -= SPEED;
                    if (mMoveLen <= -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        state = DONE;
                        mCurrentViewIndex = 1;
                        if (l != null) {
                            l.onSecondViewShow();
                        }
                    }
                } else if (state == AUTO_DOWN) {
                    mMoveLen += SPEED;
                    if (mMoveLen >= 0) {
                        mMoveLen = 0;
                        state = DONE;
                        mCurrentViewIndex = 0;
                        if (upl != null) {
                            upl.onUpPullHintListener(upl.STATE_DWON);
                        }
                    }
                } else {
                    mTimer.cancel();
                }
            }
            //計算元件顯示位置
            requestLayout();
        }

    };

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

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

    public ScrollViewContainer(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mTimer = new MyTimer(handler);
    }

    /**
     * 重點
     * 處理滑動事件
     * 重點
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                if (vt == null)
                    vt = VelocityTracker.obtain();
                else
                    vt.clear();
                mLastY = ev.getY();
                vt.addMovement(ev);
                mEvents = 0;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
            case MotionEvent.ACTION_POINTER_UP:
                // 多一隻手指按下或擡起時捨棄將要到來的第一個事件move,防止多點拖拽的bug
                mEvents = -1;
                break;
            case MotionEvent.ACTION_MOVE:
                vt.addMovement(ev);
                if (canPullUp && mCurrentViewIndex == 0 && mEvents > 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    // 防止上下越界
                    if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    } else if (mMoveLen < -mViewHeight / 5) {
                        mMoveLen = -mViewHeight / 5;
                        mCurrentViewIndex = 1;
                        if (upl != null) {
                            upl.onUpPullHintListener(upl.STATE_UP);
                        }
                    }
                    if (mMoveLen < -8) {
                        // 防止事件衝突
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                    }
                } else if (canPullDown && mCurrentViewIndex == 1 && mEvents == 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    // 防止上下越界
                    if (mMoveLen < -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        mCurrentViewIndex = 1;
                    } else if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    }
                    if (mMoveLen > 8 - mViewHeight) {
                        // 防止事件衝突
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                    }
                } else
                    mEvents++;
                mLastY = ev.getY();
                requestLayout();
                break;
            case MotionEvent.ACTION_UP:
                mLastY = ev.getY();
                vt.addMovement(ev);
                vt.computeCurrentVelocity(700);
                // 獲取Y方向的速度
                float mYV = vt.getYVelocity();
                if (mMoveLen == 0 || mMoveLen == -mViewHeight)
                    break;
                if (Math.abs(mYV) < 500) {
                    // 速度小於一定值的時候當作靜止釋放,這時候兩個View往哪移動取決於滑動的距離
                    if (mMoveLen <= -mViewHeight / 2) {
                        state = AUTO_UP;
                    } else if (mMoveLen > -mViewHeight / 2) {
                        state = AUTO_DOWN;
                    }
                } else {
                    // 擡起手指時速度方向決定兩個View往哪移動
                    if (mYV < 0)
                        state = AUTO_UP;
                    else
                        state = AUTO_DOWN;
                }
                mTimer.schedule(2);

                break;

        }
        try {
            super.dispatchTouchEvent(ev);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return true;
    }


    //計算元件顯示的位置   mMoveLen為關鍵
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        topView.layout(0, (int) mMoveLen, mViewWidth,
                topView.getMeasuredHeight() + (int) mMoveLen);
        bottomView.layout(0, topView.getMeasuredHeight() + (int) mMoveLen,
                mViewWidth, topView.getMeasuredHeight() + (int) mMoveLen
                        + bottomView.getMeasuredHeight());
    }


    //得到元件的寬高
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (!isMeasured) {
            isMeasured = true;

            mViewHeight = getMeasuredHeight();
            mViewWidth = getMeasuredWidth();


            topView = getChildAt(0);
            bottomView = getChildAt(1);

            bottomView.setOnTouchListener(bottomViewTouchListener);
            topView.setOnTouchListener(topViewTouchListener);
        }
    }

    private OnTouchListener topViewTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            //滑動到第一頁的底部 處理事件
            if (sv.getScrollY() == (sv.getChildAt(0).getMeasuredHeight() - sv
                    .getMeasuredHeight()) && mCurrentViewIndex == 0)
                canPullUp = true;
            else
                canPullUp = false;
            return false;
        }
    };
    private OnTouchListener bottomViewTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            //滑動到第二頁的頂部 處理事件
            if (sv.getScrollY() == 0 && mCurrentViewIndex == 1)
                canPullDown = true;
            else
                canPullDown = false;
            return false;
        }
    };

    class MyTimer {
        private Handler handler;
        private Timer timer;
        private MyTask mTask;

        public MyTimer(Handler handler) {
            this.handler = handler;
            timer = new Timer();
        }

        public void schedule(long period) {
            if (mTask != null) {
                mTask.cancel();
                mTask = null;
            }
            mTask = new MyTask(handler);
            timer.schedule(mTask, 0, period);
        }

        public void cancel() {
            if (mTask != null) {
                mTask.cancel();
                mTask = null;
            }
        }

        class MyTask extends TimerTask {
            private Handler handler;

            public MyTask(Handler handler) {
                this.handler = handler;
            }

            @Override
            public void run() {
                handler.obtainMessage().sendToTarget();
            }

        }
    }


    private OnUpPullHintListener upl;
    private OnSecondViewShowListener l;


    public void setOnSecondViewShowListener(OnSecondViewShowListener l) {
        this.l = l;
    }

    public void setOnUpPullHintListener(OnUpPullHintListener upl) {
        this.upl = upl;
    }

    /**
     * 上拉提示
     */
    public interface OnUpPullHintListener {

        public static final int STATE_UP = 1;  //上拉提示
        public static final int STATE_DWON = 2; //滾回提示

        public void onUpPullHintListener(int state);
    }


    /**
     * 顯示第二頁的回撥
     */
    public interface OnSecondViewShowListener {
        public void onSecondViewShow();
    }

}


使用案例