Android自定义控件实战——仿淘宝商品浏览界面

转自：http://blog.csdn.net/zhongkejingwang/article/details/38656929

用手机淘宝浏览商品详情时，商品图片是放在后面的，在第一个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;
     }

 }

啥也没有......

好了，到此结束~

源码下载