仿淘寶商品瀏覽介面, 向上拉檢視詳情
阿新 • • 發佈:2018-12-31
寫的非常棒,用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(); } }
使用案例