自定义控件（视图）2期笔记12：View的滑动冲突之 外部拦截法

1. 外部拦截法：

点击事件通过父容器拦截处理，如果父容器需要就拦截，不需要就不拦截。

这种方法比较符合事件分发机制。外部拦截法需要重写父容器的onInterceptTouchEvent方法，在内部做相应的拦截即可。

这种方法的伪代码，如下： 

@Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        boolean intercepted = false;
        int x = (int) event.getX();
        int y = (int) event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            intercepted = false;
            break;
        }
        case MotionEvent.ACTION_MOVE: {
      
            if (父容器需要当前点击事件) {
                intercepted = true;
            } else {
                intercepted = false;
            }
            break;
        }
        case MotionEvent.ACTION_UP: {
            intercepted = false;
            break;
        }
        default:
            break;
        }

        mLastXIntercept = x;
        mLastYIntercept = y;

        return intercepted;
    }

（1）在onInterceptTouchEvent方法之中，首先是ACTION_DOWN这个事件，父容器必须返回false，也就是不拦截ACTION_DOWN事件，因为一旦父容器拦截了ACTION_DOWN事件，那么后续的ACTION_MOVE 和 ACTION_UP这些事件会直接交给父容器处理，这个时候事件没有办法再传递给子元素；

（2）其次是ACTION_MOVE事件，这个事件可以根据需要来决定是否拦截，如果父容器需要拦截的话就返回true，否则就返回false，最后是ACTION_UP事件，这里必须要返回false，因为ACTION_UP事件本身没有太多意义。

（3）假如事件交给子元素处理，如果父容器在ACTION_UP时候返回了true，就会导致子元素无法接收到ACTION_UP事件，这个时候子元素中的onClick事件就无法触发，但是父容器比较特殊，一旦它开始拦截任何一个事件，那么后续的事件都会交给它来处理，而ACTION_UP作为最后一个事件也必定会传递给父容器，即便父容器的OnInterceptTouchEvent方法中ACTION_UP时候返回false.

2. 下面通过一个Demo示例说明：

（1）首先我们创建一个Android工程，如下：

（2）我们来到activity_main.xml，如下：

<com.himi.viewconflict.ui.RevealLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="12dp"
    tools:context="${relativePackage}.${activityClass}" >

    <Button
        android:id="@+id/button1"
        style="@style/AppTheme.Button.Green"
        android:onClick="onButtonClick"
        android:text="滑动冲突场景1-外部拦截" />

</com.himi.viewconflict.ui.RevealLayout>

这里的RevealLayout是一个自定义控件（继承自ViewGroup），任何放入内部的clickable元素，当它被点击的时候，都具有波纹效果。

感觉这个RevealLayout很好用，存放自己的Github代码库之中。

（3）接下来来到MainActivity，如下：

package com.himi.viewconflict;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    
    
    public void onButtonClick(View view) {
         Intent intent = new Intent(this, DemoActivity_1.class);
         startActivity(intent);
    }
}

（4）上面很自然地跳转到DemoActivity_1之中，如下：

package com.himi.viewconflict;

import java.util.ArrayList;

import com.himi.viewconflict.ui.HorizontalScrollViewEx;
import com.himi.viewconflict.utils.MyUtils;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class DemoActivity_1 extends Activity {
    private static final String TAG = "DemoActivity_1";

    private HorizontalScrollViewEx mListContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo_1);
        Log.d(TAG, "onCreate");
        initView();
    }

    private void initView() {
        LayoutInflater inflater = getLayoutInflater();
        mListContainer = (HorizontalScrollViewEx) findViewById(R.id.container);
        final int screenWidth = MyUtils.getScreenMetrics(this).widthPixels;
        final int screenHeight = MyUtils.getScreenMetrics(this).heightPixels;
        //初始化3页ListView内容
        for (int i = 0; i < 3; i++) {
            ViewGroup layout = (ViewGroup) inflater.inflate(
                    R.layout.content_layout, mListContainer, false);
            layout.getLayoutParams().width = screenWidth;
            TextView textView = (TextView) layout.findViewById(R.id.title);
            textView.setText("page " + (i + 1));
            layout.setBackgroundColor(Color.rgb(255 / (i + 1), 255 / (i + 1), 0));
            createList(layout);
            mListContainer.addView(layout);
        }
    }

    private void createList(ViewGroup layout) {
        ListView listView = (ListView) layout.findViewById(R.id.list);
        ArrayList<String> datas = new ArrayList<String>();
        for (int i = 0; i < 50; i++) {
            datas.add("name " + i);
        }

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                R.layout.content_list_item, R.id.name, datas);
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                Toast.makeText(DemoActivity_1.this, "click item "+position,
                        Toast.LENGTH_SHORT).show();

            }
        });
    }
}

上面的DemoActivity_1主布局demo_1.xml，如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <com.himi.viewconflict.ui.HorizontalScrollViewEx
        android:id="@+id/container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />


</LinearLayout>

上面使用到HorizontalScrollViewEx是自定义控件（继承自ViewGroup），在HorizontalScrollViewEx里面实现外部拦截法逻辑，如下：

package com.himi.viewconflict.ui;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

public class HorizontalScrollViewEx extends ViewGroup {
    private static final String TAG = "HorizontalScrollViewEx";

    private int mChildrenSize;
    private int mChildWidth;
    private int mChildIndex;

    // 分别记录上次滑动的坐标
    private int mLastX = 0;
    private int mLastY = 0;
    // 分别记录上次滑动的坐标(onInterceptTouchEvent)
    private int mLastXIntercept = 0;
    private int mLastYIntercept = 0;

    private Scroller mScroller;
    private VelocityTracker mVelocityTracker;

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

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

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

    private void init() {
        mScroller = new Scroller(getContext());
        mVelocityTracker = VelocityTracker.obtain();
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        boolean intercepted = false;
        int x = (int) event.getX();
        int y = (int) event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            intercepted = false;
            /**
                        如果滑动动画还没结束，我们就按下了结束的按钮，那我们就结束该动画.
                       目的是为了优化滑动体验：
                                倘若用户正在水平滑动，在滑动停止之前用户迅速转化为竖直滑动，导致
                                界面在水平方向无法滑动至终点从而处于一种中间状态。为了避免这种状态，
                                用户正在水平滑动时候，下一个序列的点击事件仍然交给父容器处理，这样就不会处于中间状态          
                
            */
            if (!mScroller.isFinished()) {
                mScroller.abortAnimation();
                intercepted = true;
            }
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            int deltaX = x - mLastXIntercept;
            int deltaY = y - mLastYIntercept;
            if (Math.abs(deltaX) > Math.abs(deltaY)) {//水平滑动距离差 > 竖直滑动距离差
                intercepted = true;
            } else {//水平滑动距离差 < 竖直滑动距离差
                intercepted = false;
            }
            break;
        }
        case MotionEvent.ACTION_UP: {
            intercepted = false;
            break;
        }
        default:
            break;
        }

        Log.d(TAG, "intercepted=" + intercepted);
        mLastX = x;
        mLastY = y;
        mLastXIntercept = x;
        mLastYIntercept = y;

        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //表示追踪当前点击事件的速度
        mVelocityTracker.addMovement(event);
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            if (!mScroller.isFinished()) {
                mScroller.abortAnimation();
            }
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            int deltaX = x - mLastX;
            int deltaY = y - mLastY;
            scrollBy(-deltaX, 0);
            break;
        }
        case MotionEvent.ACTION_UP: {
            /**
             * 表示计算速度，比如：时间间隔为1000 ms ，在1秒内，
             * 手指在水平方向从左向右滑过100像素，那么水平速度就是100;
             * 计算速度+获取速度----三步曲
             * 　　1. mVelocityTracker.computeCurrentVelocity(1000);
             * 　　2. float xVelocity = mVelocityTracker.getXVelocity(); //获取水平方向的滑动速度
             * 　　3. float yVelocity = mVelocityTracker.getYVelocity();//获取垂直方向的滑动速度
             * 由于我们需要的是xVelocity，
             * 这里只是提一下，不计入代码;
             * 注意：这里的速度指的是一段时间内手指所滑过的像素数！像素数！像素数！重要事说3遍；
             */
            int scrollX = getScrollX();
            int scrollToChildIndex = scrollX / mChildWidth;
            mVelocityTracker.computeCurrentVelocity(1000);
            float xVelocity = mVelocityTracker.getXVelocity();
            
            /**
             *当你滑动手机相册中的照片的时候有没有发现，必须滑动到一定距离它才会切到下张图片，
             * 否则，它就回退回原来的照片了，原来，它是通过“速度”来进行控制的~
             * 还有就是"速度“可以为负值,很好理解，就像我们规定车前进的方向为正，反向为负；
             *
             */
            if (Math.abs(xVelocity) >= 50) {
                mChildIndex = xVelocity > 0 ? mChildIndex - 1 : mChildIndex + 1;
            } else {
                mChildIndex = (scrollX + mChildWidth / 2) / mChildWidth;
            }
            mChildIndex = Math.max(0, Math.min(mChildIndex, mChildrenSize - 1));
            int dx = mChildIndex * mChildWidth - scrollX;//缓慢地滑动到目标的x坐标；
            smoothScrollBy(dx, 0);
            mVelocityTracker.clear();//对速度跟踪进行回收
            break;
        }
        default:
            break;
        }

        mLastX = x;
        mLastY = y;
        return true;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measuredWidth = 0;
        int measuredHeight = 0;
        final int childCount = getChildCount();
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        int widthSpaceSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpaceSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        if (childCount == 0) {
            //这个方法必须由onMeasure(int, int)来调用，来存储测量的宽，高值。
            setMeasuredDimension(0, 0);
            
            /**
            1.UNSPECIFIED
                父不没有对子施加任何约束，子可以是任意大小（也就是未指定）
                (UNSPECIFIED在源码中的处理和EXACTLY一样。当View的宽高值设置为0的时候或者没有设置宽高时，
                        模式为UNSPECIFIED)
            2.EXACTLY
                 父决定子的确切大小，子被限定在给定的边界里，忽略本身想要的大小。对应LayoutParams中的 match_parent 和 具体的数值
                (当设置width或height为match_parent时，模式为EXACTLY，因为子view会占据剩余容器的空间，
                        所以它大小是确定的)
            3.AT_MOST
                   子最大可以达到的指定大小，对应LayoutParams中的wrap_content
           */
        } else if (heightSpecMode == MeasureSpec.AT_MOST) {
            final View childView = getChildAt(0);
            measuredHeight = childView.getMeasuredHeight();
            setMeasuredDimension(widthSpaceSize, childView.getMeasuredHeight());
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            final View childView = getChildAt(0);
            measuredWidth = childView.getMeasuredWidth() * childCount;
            setMeasuredDimension(measuredWidth, heightSpaceSize);
        } else {
            final View childView = getChildAt(0);
            measuredWidth = childView.getMeasuredWidth() * childCount;
            measuredHeight = childView.getMeasuredHeight();
            setMeasuredDimension(measuredWidth, measuredHeight);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childLeft = 0;
        final int childCount = getChildCount();
        mChildrenSize = childCount;

        for (int i = 0; i < childCount; i++) {
            final View childView = getChildAt(i);
            if (childView.getVisibility() != View.GONE) {
                final int childWidth = childView.getMeasuredWidth();
                mChildWidth = childWidth;
                childView.layout(childLeft, 0, childLeft + childWidth,
                        childView.getMeasuredHeight());
                childLeft += childWidth;
            }
        }
    }

    private void smoothScrollBy(int dx, int dy) {
        mScroller.startScroll(getScrollX(), 0, dx, 0, 500);
        invalidate();
    }

    /**
     * computeScroll：主要功能是计算拖动的位移量、更新背景、
     *               设置要显示的屏幕(setCurrentScreen(mCurrentScreen);)
     * 通常是用mScroller记录/计算View滚动的位置，再重写View的computeScroll()，完成实际的滚动。 
     */
    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

    /**
     * onAttachedToWindow: 是在第一次onDraw前调用的。也就是我们写的View在没有绘制出来时调用的，但只会调用一次。
     * 比如，我们写状态栏中的时钟的View，在onAttachedToWindow这方法中做初始化工作，比如注册一些广播等等
     */
    
    @Override
    protected void onDetachedFromWindow() {
        mVelocityTracker.recycle();
        super.onDetachedFromWindow();
    }
}

（5）来到主布局之中，在HorizontalScrollViewEx之中包含一个子布局content_layout.xml，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:text="TextView" />
<!-- 
  android:cacheColorHint="#00000000":去除listview的拖动背景色
  android:listSelector:当你不使用android:listSelector属性，默认会显示选中的item为橙黄底色，
                                   有时候我们需要去掉这种效果  -->
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff4f7f9"
        android:cacheColorHint="#00000000"
        android:divider="#dddbdb"
        android:dividerHeight="1.0px"
        android:listSelector="@android:color/transparent" />

</LinearLayout>

这布局文件之中包含一个ListView是上下滑动，而HorizontalScrollViewEx是左右滑动的，两者之间的滑动冲突在上面使用外部拦截法解决了。

接下来就是上面Listview 的item布局，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center_vertical"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

（6）最终项目如下：

（7）部署程序到手机上，运行效果如下：

 

3. 示例源码下载