Android 自定义viewGroup实现淘宝二楼及处理多指触控事件

• 前言

  闲来无事逛淘宝，发现首页下拉有个淘宝二楼。如下图：
  
  

  UI效果挺有意思，于是打算手撸一个。

• 思路

  view的滚动 首先想到的就是ScrollView ，然后处理他的手势滑动事件动态的改变view的位置，即可达到效果。

• 实现

  新建MScrollView继承ScrollView

  public class MScrollView extends ScrollView {
  
  public MScrollView(Context context) {
      super(context);
  }
  
  public MScrollView(Context context, AttributeSet attrs) {
      super(context, attrs);
  }
  }
  

  UI布局文件：

      <com.dullyoung.myapplication.view.MScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@mipmap/ic_launcher"
      android:fillViewport="true"
      android:overScrollMode="never">
  
      <TextView
          android:layout_width="match_parent"
          android:layout_height="3000dp"
          android:background="@color/purple_200" />
  

  我们要操控view的位置，那么就在viewgroup绘制完成之后获取子view,这里为了方便显示滚动状态 我内部用的是TextView 方便展示数据，实际任意view都可以

  private TextView mChildView;
    @Override
  protected void onFinishInflate() {
      super.onFinishInflate();
      if (mChildView == null && getChildCount() > 0) {
          mChildView = (TextView) getChildAt(0);
      }
  }
  

然后处理OnTouchEvent

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mChildView != null) {
            resolveTouchEvent(ev);
        }
        return super.onTouchEvent(ev);
    }

resolveTouchEvent就是处理触摸事件，达到淘宝二楼的效果只需要处理MotionEvnet.ACTION_MOVE即可。思路就是在滑动中计算滑动偏移量，然后调用view.layout重新确定view的位置。视觉上看起来就像是view被下拉了

//最后一次手指滑动的位置y
int y;
//记录view的初始位置
private final Rect mRect = new Rect();
 case MotionEvent.ACTION_MOVE:
              
                int cY = (int) ev.getY();

                if (mRect.isEmpty()) {//记录view的初始位置
                    mRect.set(mChildView.getLeft(), mChildView.getTop(),
                            mChildView.getRight(), mChildView.getBottom());
                }
                //dy是偏移量，后面根据偏移量来改变view位置
                int dy = (cY - y);
                //首次开始下拉 从0开始

                //底部不让滑动
                if (mChildView.getTop() < 0 || (mChildView.getTop() == 0 && dy < 0)) {
                    return;
                }
                y = cY;
                mChildView.layout(mChildView.getLeft(), mChildView.getTop() + 2 * dy / 3,
                        mChildView.getRight(), mChildView.getBottom() + 2 * dy / 3);

                if (dy >= 0 && mChildView.getTop() > getHeight() / 4) {
                    couldCallBack = true;
                    mChildView.setText("松手打开新界面");
                } else {
                    couldCallBack = false;
                    mChildView.setText("top offset:" + mChildView.getTop());
                }

                break;
                //然后抬起的时候处理回调事件 
case MotionEvent.ACTION_UP:
                if (couldCallBack) {
                    Toast.makeText(getContext(), "回调", Toast.LENGTH_LONG).show();
                    couldCallBack = false;
                }
                if (!mRect.isEmpty()) {
                    resetPosition();
                }
                break;

	//抬起之后根据滑动的offset判断是否满足滚动距离要求 然后回复原位
    private void resetPosition() {
        Animation animation = new TranslateAnimation(0, 0, mChildView.getTop(),
                mRect.top);
        animation.setDuration(200);
        animation.setFillAfter(true);
        mChildView.startAnimation(animation);
        mChildView.layout(mRect.left, mRect.top, mRect.right, mRect.bottom);
        mRect.setEmpty();
        mChildView.setText("下拉打开新界面");
        couldCallBack = false;
    }

这样就做好了。手指下拉 mChildView.getTop() > getHeight() / 4 当view的下拉高度超过屏幕高度的四分之一 则回调事件。到此大功告成！

• bug

  但是在快乐的玩耍的过程中发现，多指操控的时候，view会跳来跳去。所以。撸一撸多指触控吧。。。

• 多指触控

  简介：多指触控不同于单指的区别是单指获取动作用MotionEvent.getAction即可 但多指要用MotionEvent.getActionMasked()。

  Android旧的api 早期不支持多点触控或者仅支持某两个点的时候用的MotionEvent.ACTION_POINTER_1_DOWN，MotionEvent.ACTION_POINTER_2_DOWN,MotionEvent.ACTION_POINTER_3_DOWN以及相应的抬起事件。

  但以上都随着支持触点越来越多弃用了，所以我们这里需要用到两个新事件MotionEvent.ACTION_POINTER_DOWN与MotionEvent.ACTION_POINTER_UP,两个状态分别是当屏幕上有一个手指按下，再有手指按下或者抬起的时候触发。
  于是又引入了一个新的标记手指的概念。PointerId 和PointerIndex

• PointerId PointerIndex 以及ActionIndex的区别与用途

  • PointerId 手指的编号 不会随着其他手指抬起而变化 按下就确定不在变。
  • PointerIndex 手指索引。会随着其他手指抬起变化，从0开始排序。
  • ActionIndex 当前活动手指的索引 。

• 问题解决

  之前存在的多个手指按下时view跳动的问题，就是新手指按下时 上一次滚动的最终位置Y与当前触发ACTION_MOVE的手指不确定导致。所以 我们只需要通过PointerID一直确定用同一个手指去操控view就不会有这个问题。
  只有一个手指按下的时候 PointerId就取这一个 也要即时改变上一个滚动到的位置的Y坐标 不然就会有view乱跳的情况

  //全局变量
    private int pointerId;
  
  

  //获取当前活动手指的索引
  int actionIndex = ev.getActionIndex();
   case MotionEvent.ACTION_DOWN:
              //首次按下 取第0个
              pointerId = ev.getPointerId(0);
              y = (int) ev.getY(actionIndex);
              break;
  

有新手指按下就以新手指为准

case MotionEvent.ACTION_POINTER_DOWN:
                pointerId = ev.getPointerId(actionIndex);
                y = (int) ev.getY(actionIndex);
                break;

有手指抬起的时候判断是不是当前正在用的手指 如果是 就换一个手指作为当前手指

     case MotionEvent.ACTION_POINTER_UP:
                if (pointerId == ev.getPointerId(actionIndex)) {
                    int newPointIndex = actionIndex == 0 ? 1 : 0;
                    pointerId = ev.getPointerId(newPointIndex);
                    y = (int) ev.getY(newPointIndex);
                }
                break;

这个状态回调的时候一定是又两个或以上的手指在屏幕上，其中一个抬起才会回调。所以这里取新手指索引的时候用actionIndex == 0 ? 1 : 0，如果当前释放的是第一个就取第二个，不是第一个就取第一个。

同时，ACTION_MOVE处理view滚动的时候也要用特定手指的滚动事件。

case MotionEvent.ACTION_MOVE:
                int index2 = ev.findPointerIndex(pointerId);
                int cY = (int) ev.getY(index2);

到此大功告成~
看效果图：可以实时知道滑动了多少距离

超过屏幕四分之一就回调事件

总结

自定义view是Android开发的难点，但只要原理弄明白了就不难。有些时候思维是相当重要的。
我最开始解决多指跳动的问题，一直在纠结怎么获取新手指的坐标以及新的Y的值怎么赋值。没有想到固定手指，一直监听某一个手指的这个方法。

看到有意思的UI还是要自己多想、多做、多写、多练~