Android仿淘宝商品浏览界面图片滚动效果

2020-01-02 07:00:34

字体：大中小

来源：转载

供稿：网友

用手机淘宝浏览商品详情时，商品图片是放在后面的，在第一个ScrollView滚动到最底下时会有提示，继续拖动才能浏览图片。仿照这个效果写一个出来并不难，只要定义一个Layout管理两个ScrollView就行了，当第一个ScrollView滑到底部时，再次向上滑动进入第二个ScrollView。效果如下：

需要注意的地方是：

1、如果是手动滑到底部需要再次按下才能继续往下滑，自动滚动到底部则不需要

2、在由上一个ScrollView滑动到下一个ScrollView的过程中多只手指相继拖动也不会导致布局的剧变，也就是多个pointer的滑动不会导致move距离的剧变。

这个Layout的实现思路是：

在布局中放置两个ScrollView，并为其设置OnTouchListener，时刻判断ScrollView的滚动距离，一旦第一个ScrollView滚动到底部，则标识改为可向上拖动，此时开始记录滑动距离mMoveLen，根据mMoveLen重新layout两个ScrollView；同理，监听第二个ScrollView是否滚动到顶部，以往下拖动。

OK，明白了原理之后可以看代码了：

package com.jingchen.tbviewer;  import java.util.Timer; import java.util.TimerTask;  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;  /**  * 包含两个ScrollView的容器  *  * @author chenjing  *  */ 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 = 6.5f;    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;           }         } else if (state == AUTO_DOWN) {           mMoveLen += SPEED;           if (mMoveLen >= 0) {             mMoveLen = 0;             state = DONE;             mCurrentViewIndex = 0;           }         } 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) {           mMoveLen = -mViewHeight;           mCurrentViewIndex = 1;          }         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);       try {         vt.recycle();       } catch (Exception e) {         e.printStackTrace();       }       break;      }     super.dispatchTouchEvent(ev);     return true;   }    @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();       }      }   }  }

注释写的很清楚了，有几个关键点需要讲一下：
1、由于这里为两个ScrollView设置了OnTouchListener，所以在其他地方不能再设置了，否则就白搭了。

2、两个ScrollView的layout参数统一由mMoveLen决定。

3、变量mEvents有两个作用：一是防止手动滑到底部或顶部时继续滑动而改变布局，必须再次按下才能继续滑动；二是在新的pointer down或up时把mEvents设置成-1可以舍弃将要到来的第一个move事件，防止mMoveLen出现剧变。为什么会出现剧变呢？因为假设一开始只有一只手指在滑动，记录的坐标值是这个pointer的事件坐标点，这时候另一只手指按下了导致事件又多了一个pointer，这时候到来的move事件的坐标可能就变成了新的pointer的坐标，这时计算与上一次坐标的差值就会出现剧变，变化的距离就是两个pointer间的距离。所以要把这个move事件舍弃掉，让mLastY值记录这个pointer的坐标再开始计算mMoveLen。pointer up的时候也一样。

理解了这几点，看起来就没什么难度了，代码量也很小。

MainActivity的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"   android:layout_height="match_parent" >    <com.jingchen.tbviewer.ScrollViewContainer     android:layout_width="match_parent"     android:layout_height="match_parent" >      <ScrollView       android:layout_width="match_parent"       android:layout_height="match_parent" >        <RelativeLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content" >          <LinearLayout           android:id="@+id/imagesLayout"           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:gravity="center_horizontal"           android:orientation="vertical" >            <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/h" />            <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/i" />            <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/j" />            <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/k" />            <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/l" />            <ImageView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/m" />         </LinearLayout>          <TextView           android:layout_width="match_parent"           android:layout_height="60dp"           android:layout_below="@id/imagesLayout"           android:background="#eeeeee"           android:gravity="center"           android:text="继续拖动，查看更多美女"           android:textSize="20sp" />       </RelativeLayout>     </ScrollView>      <ScrollView       android:layout_width="match_parent"       android:layout_height="match_parent"       android:background="#000000" >        <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:gravity="center_horizontal"         android:orientation="vertical" >          <ImageView           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:background="@drawable/a" />          <ImageView           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:background="@drawable/b" />          <ImageView           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:background="@drawable/c" />          <ImageView           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:background="@drawable/d" />          <ImageView           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:background="@drawable/e" />          <ImageView           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:background="@drawable/f" />          <ImageView           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:background="@drawable/g" />       </LinearLayout>     </ScrollView>   </com.jingchen.tbviewer.ScrollViewContainer>  </RelativeLayout>

在ScrollView中放了几张图片而已。
MainActivity的代码：

package com.jingchen.tbviewer;  import android.app.Activity; import android.os.Bundle; import android.view.Menu;  public class MainActivity extends Activity {   @Override   protected void onCreate(Bundle savedInstanceState)   {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);   }    @Override   public boolean onCreateOptionsMenu(Menu menu)   {     getMenuInflater().inflate(R.menu.main, menu);     return true;   }  }

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：Android实现Activity、Service与Broadcaster三大组件之间互相调用的方法详解

下一篇：Windows下React Native的Android环境部署及布局示例