WebView与ListView滑动冲突——(二)LinearLayout控制WebView滚动

上一篇我们大致了解了一下View中 事件的一些基础《WebView与ListView滑动冲突——(一)事件基础篇》，Scroll是为了实现View平滑滚动的一个Helper类，通常在自定义View中使用。 这次我们从一下几个方面来了解一下Scroll与VelocityTracker的用法：

• View和MotionEvent的位置信息
• View中的Scroll方法
• Scroll中的scroll*()方法
• touchSlop与VelocityTracker
• LinearLayout控制WebView滚动

通过上面几个方面的学习，将会对View的滑动有一定的认知。废话不多说了，开始

View和MotionEvent中的位置信息

在我们自定义View中，经常要获取各种位置坐标，但是View的get方法那么多，我也不知道这个get方法获取的到底是不是那个位置坐标，我能怎么办，我也很绝望呀。所以就整理了一些View和MotionEvent中的一些获取位置信息的一些方法。

View的位置信息

View中的获取位置信息的get方法。有些是不能直接在Activity的onCreate()中调用，因为当时View还未绘制完成，这个时候调用View的get方法，获取到的位置信息当然是0了。一般可以在Activity的onWindowFocusChanged()方法中获取，或者使用延迟策略去获取。

下面我们来看一下View中的通过那些信息来定位View的位置

left、right、top、bottom、elevation

这五个参数表示的是View的原始位置距离父控件边缘的距离，并且无论这个View被移动到了什么位置，或者被缩放、旋转了多少，这五个值都是永久不变的

• left：目标View的最左边和这个View所在父控件的最左边的距离，通过view.getLeft()方法获取；
• right：目标View的最右边和这个View所在父控件的最左边的距离，通过view.getRight()方法获取；
• top：目标View的最上边和这个View所在父控件的最上边的距离，通过view.getTop()方法获取；
• bottom：目标View的最下边和这个View所在父控件的最上边的距离，通过view.getBottom()方法获取；
• elevation：目标View的Z轴高度和这个View所在的父控件所在的Z轴高度的距离，通过view.getElevation()方法获取（这个属性是Android 5.0之后添加的新属性）

撒？你说还是不明白，没事。我也没明白。还是用一张图来认识一下把：

translationX、translationY、translationZ

这三个参数代表的是在动画或者滑动View的时候，View的当前位置相对于其原始位置平移的距离：

• translationX：在滑动过程中，View当前位置的最左边和这个View原始位置的最左边的距离，通过view.getTranslationX()方法获取；
• translationY：在滑动过程中，View当前位置的最上边和这个View原始位置的最上边的距离，通过view.getTranslationY()方法获取；
• translationZ：在动画过程中，View当前位置的Z轴高度和这个View原始Z轴高度的距离，通过view.getTranslationZ()方法获取（这个方法是Android 5.0之后添加的新方法）。

x、y、z

这三个参数代表的是View的当前位置相对于其父控件的距离：

• x：目标View的当前位置的最左边和这个View所在父布局的最左边的距离，通过view.getX()方法获取；
• y：目标View的当前位置的最上边和这个View所在父布局的最上边的距离，通过view.getY()方法获取；
• z：目标View的当前位置的Z轴位置和这个View所在父布局的Z轴位置的距离，通过view.getZ()方法获取（这个方法是Android 5.0之后添加的新方法）。

这三个参数和前面的几个参数的关系公式如下：

x = left + translationX;y = top + translationY;z = elevation + translationZ;

MotionEvent的位置信息

使用MotionEvent类，我们还可以获取到触摸屏幕时View的一些位置参数：

• x：当前触摸的位置相对于目标View的X轴坐标，通过getX()方法获取；
• y：当前触摸的位置相对于目标View的Y轴坐标，通过getY()方法获取；
• rawX：当前触摸的位置相对于屏幕最左边的X轴坐标，通过getRawX()方法获取；
• rawY：当前触摸的位置相对于屏幕最上边的Y轴坐标，通过getRawY()方法获取。

下面也通过一张图来清楚的认识一下把，要不然看完还是懵逼+懵逼=懵逼²。。。

好了。对于View和MotionEvent的位置信息就简单说这么多把，够用就行。再说下去就 下笔千言离题万里了（关键是就知道这么多了- -！）

View中的Scroll方法

Android中为了实现View的滑动，系统为此提供了scrollTo()和scrollBy()两个方法。打开源码来让我们一探究竟。

    /**      * Set the scrolled position of your view. This will cause a call to      * {@link #onScrollChanged(int, int, int, int)} and the view will be      * invalidated.      * @param x the x position to scroll to      * @param y the y position to scroll to      */      public void scrollTo(int x, int y) {          if (mScrollX != x || mScrollY != y) {              int oldX = mScrollX;              int oldY = mScrollY;              mScrollX = x;              mScrollY = y;              invalidateParentCaches();              onScrollChanged(mScrollX, mScrollY, oldX, oldY);              if (!awakenScrollBars()) {                  postInvalidateOnAnimation();              }          }      }      /**      * Move the scrolled position of your view. This will cause a call to      * {@link #onScrollChanged(int, int, int, int)} and the view will be      * invalidated.      * @param x the amount of pixels to scroll by horizontally      * @param y the amount of pixels to scroll by vertically      */      public void scrollBy(int x, int y) {          scrollTo(mScrollX + x, mScrollY + y);      }  

scrollTo()方法的注释中，我们可以看到，这个方法将会调用onScrollChanged()方法并且这个View将会被重绘，这就达到了View的内容位置变化效果。而scrollBy()，这货就比较懒了，内部直接调用了scrollTo(）方法。不过两者的区别还是很明显的，scrollTo()是直接一步到位，而scrollBy()则是慢慢的累积。

mScrollX和mScrollY则是View的偏移量。而且都是指当前view的内容相对view本身左上角起始坐标的偏移量。看了下面这幅图你就明白了：

来个小结：

• scrollTo()的移动是一步到位，而scrollBy()逐步累加的
• scrollTo()和scrollBy()传递的参数是偏移量而非坐标

• scrollTo()和scrollBy()移动的都只是View的内容,View的背景本身是不移动的。

  注：在实际操作中你会发现，传入的参数完全跟想执行的操作相反。所以如果我们想往x轴和y轴正方向移动时，mScrollY和mScrollX必须为负值，相反如果我们想往x轴和y轴负方向移动时，mScrollY和mScrollX就必须为正值

TouchSlop与VelocityTracker

TouchSlop

在自定义View中，我们有时会用到下面这行代码：

mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();  

那么这个方法获取到的int值到底是个啥啊？通过方法上面的注释才知道，TouchSlop是一个滑动距离的常量值，并且需要注意的是不同的设备，touchSlop的值可能是不同的，一切以上述的函数获取为准。

这个值对于自定义View有什么用呢？我们来举个例子，当你按下屏幕后，不上下滑动，也不松开，而是手指左右上下抖一抖，会一直触发ACTION_MOVE事件，只有当滑动距离大于TouchSlop这个值时，系统才认为我们做了滑动操作。

VelocityTracker

VelocityTracker是一个滑动速率的Helper类。它可以辅助跟踪触摸事件的速率，比如快速滑动或者其他的滑动手势。我们一般会在ACTION_DOWN事件中初始化VelocityTracker对象，比如：

    @Override    public boolean onTouchEvent(MotionEvent event) {            VelocityTracker mVelocityTracker =VelocityTracker.obtain();            //收集速率追踪点数据              velocityTracker.addMovement(event);              switch (event.getAction()) {                    ...                case MotionEvent.ACTION_DOWN:                         break;                    ...            }    }

在ACTION_MOVE事件中我们就可以获取当前事件的滑动速率了，关于computeCurrentVelocity(int units,int maxVelocity)

• units : 我们想要指定的得到的速度单位，如果值为1，代表1毫秒运动了多少像素。如果值为1000，代表1秒内运动了多少像素。如果值为100，代表100毫秒内运动了多少像素。（这个参数设置真有点…….什么鬼嘛!）这个方法还有一个重载函数 computeCurrentVelocity (int units, float maxVelocity), 跟上面一样也就是多了一个参数。

• maxVelocity : 该方法所能得到的最大速度，这个速度必须和你指定的units使用同样的单位，而且必须是整数.也就是，你指定一个速度的最大值，如果计算超过这个最大值，就使用这个最大值，否则，使用计算的的结果，

  注：最后一定别忘了在ACTION_UP或者ACTION_CANCEL中回收一下

//获取最大速度mMaxVelocity = ViewConfiguration.get(context).getScaledMaximumFlingVelocity()switch (event.getAction()) {    case MotionEvent.ACTION_UP:    case MotionEvent.ACTION_CANCEL:         //计算瞬时速度           mVelocityTracker .computeCurrentVelocity(units, mMaxVelocity);           float velocityX = mVelocityTracker .getXVelocity();           float velocityY = mVelocityTracker .getYVelocity();            if (mVelocityTracker != null) {                mVelocityTracker.clear();                mVelocityTracker.recycle();                mVelocityTracker = null;           }             break;        ...}

LinearLayout控制WebView滚动

实现View简单的移动

注意，是移动，是移动（难不成还是联通- -！）而不是滚动。达到这种效果只需要View的scrollTo或者scrollBy即可实现，不是很复杂。直接看代码把：

package com.tianzhao.demo;import android.content.Context;import android.graphics.Color;import android.support.annotation.AttrRes;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.Gravity;import android.view.MotionEvent;import android.view.VelocityTracker;import android.view.View;import android.view.ViewConfiguration;import android.view.ViewGroup;import android.widget.LinearLayout;import android.widget.TextView;import java.util.Locale;public class CustomView extends LinearLayout {    public CustomView(@NonNull Context context) {        super(context);        init(context);    }    public CustomView(@NonNull Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init(context);    }    public CustomView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    private void init(Context context) {        setOrientation(VERTICAL);        initChildView(context);    }    private void initChildView(Context context) {        for (int i = 0; i < 60; i++) {            TextView view = new TextView(context);            LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,120);            view.setLayoutParams(params);            view.setText(String.format(Locale.CHINA,"%d",i));            view.setGravity(Gravity.CENTER);            if (i % 2 == 1) {                view.setBackgroundColor(Color.parseColor("#FF40FF9C"));            } else {                view.setBackgroundColor(Color.parseColor("#303F9F"));            }            addView(view);        }    }    private float mLastY;    @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {            case MotionEvent.ACTION_MOVE:                int offsetY = (int) (event.getY() - mLastY);                ((View) getParent()).scrollBy(0, -offsetY);                break;        }        return true;    }}

来看看效果图，只要手指停下。就不移动了，达不到View滚动的效果。

实现View的滚动

注意，这里说的是滚动、是滚动、滚动、动。不是移动！

我们在 onInterceptTouchEvent（） 方法中主要处理事件的一些初始化，和是否拦截当前事件的相关操作。而 onTouchEvent（） 则主要处理事件的滑动与滚动。不必要的代码我已经剔除了。只留了最基本有用的代码，注释也补充了。雅酷，伊利卡通，代码，开！

package com.tianzhao.demo;import android.content.Context;import android.support.annotation.AttrRes;import android.support.annotation.NonNull;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.VelocityTracker;import android.view.ViewConfiguration;import android.webkit.WebView;import android.widget.LinearLayout;import android.widget.Scroller;/** * Desc:使用LinearLayout的事件来操控WebView的滚动 * Created by tianzhao on 2017/8/31. */public class CustomView extends LinearLayout {    private static final String TAG = "CustomView";    private static final boolean DEBUG_LOG = true;    private Scroller mScroll;    private VelocityTracker mVelocityTracker;    private int mTouchSlop;    private int mMinimumVelocity;    private int mMaximumVelocity;    private WebView mWebView;    public CustomView(@NonNull Context context) {        super(context);        init(context);    }    public CustomView(@NonNull Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init(context);    }    public CustomView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    private void init(Context context) {        mScroll = new Scroller(context);        ViewConfiguration viewConfiguration = ViewConfiguration.get(context);        mTouchSlop = viewConfiguration.getScaledTouchSlop();        mMaximumVelocity = viewConfiguration.getScaledMaximumFlingVelocity();        mMinimumVelocity = viewConfiguration.getScaledMinimumFlingVelocity();        initChildView(context);    }    private void initChildView(Context context) {        mWebView = new WebView(context);        mWebView.loadUrl("file:///android_asset/index.html");        mWebView.setFocusable(false);        addView(mWebView);    }    /**     * 初始化值,并且选择是否拦截事件     */    @Override    public boolean onInterceptTouchEvent(MotionEvent event) {        boolean isIntercept = false;        /*         * 这里不能使用event.getAction()         * 注意event.getAction()和event.getActionMasked()的区别         * 当MotionEvent对象只包含一个触摸点的事件时，上边两个函数的结果是相同的，         * 但是当包含多个触摸点时，二者的结果就不同啦。         * getAction获得的int值是由pointer的index值和事件类型值组合而成的，         * 而getActionWithMasked则只返回事件的类型值         */        switch (event.getActionMasked()) {            case MotionEvent.ACTION_DOWN:                boolean flingFinished = stopFling();                mTouchLastY = event.getY();                mPointerID = event.getPointerId(0);                if (!flingFinished) {                    return true;                } else {                    addVelocityTracker(event);                }                break;            case MotionEvent.ACTION_MOVE:                int pointerIndex = event.findPointerIndex(mPointerID);                if (pointerIndex < 0) {                    break;                }                int offsetY = (int) (mTouchLastY - event.getY(pointerIndex));                mTouchLastY = event.getY();                //判断上下滑动距离是否大于最小滑动距离                //如果大于，则将事件向下传递给onTouchEvent处理                //反之则进行拦截，不进行任何响应                if (Math.abs(offsetY) >= mTouchSlop) {                    isIntercept = true;                }                break;            case MotionEvent.ACTION_POINTER_DOWN:                isIntercept = true;                break;        }        return isIntercept;    }    private float mTouchLastY;    private int mPointerID;    @Override    public boolean onTouchEvent(MotionEvent event) {        addVelocityTracker(event);        //这里不能使用event.getAction()        //注意event.getAction()和event.getActionMasked()的区别        switch (event.getActionMasked()) {            case MotionEvent.ACTION_MOVE:                //将当前LinearLayout的滑动事件透传给WebView去进行滚动                int pointerIndex = event.findPointerIndex(mPointerID);                int offsetY = (int) (mTouchLastY - event.getY(pointerIndex));                mTouchLastY = event.getY(pointerIndex);                mWebView.scrollBy(0, offsetY);                break;            case MotionEvent.ACTION_CANCEL:            case MotionEvent.ACTION_UP:                //手指离开时，计算当前的滑动速率                //使用Scroll和VelocityTracker进行滚动                startFling(-(int) getScrollVelocityY());                recycleVelocityTracker();                break;            case MotionEvent.ACTION_POINTER_UP:                //当两个触摸点，有一个离开屏幕时                //将当前的触摸点                solvePointerUp(event);                break;        }        return true;    }    private void solvePointerUp(MotionEvent event) {        // 获取离开屏幕的手指的索引        int pointerIndexLeave = event.getActionIndex();        int pointerIdLeave = event.getPointerId(pointerIndexLeave);        // 离开屏幕的手指如果正是目前的有效手指，此处需要重新调整        if (mPointerID == pointerIdLeave) {            // 将还在屏幕的手指标记为有效手指，并且重置VelocityTracker            int reIndex = pointerIndexLeave == 0 ? 1 : 0;            mPointerID = event.getPointerId(reIndex);            // 调整触摸位置，防止出现跳动            mTouchLastY = event.getY(reIndex);            // 清除mVelocityTracker记录的信息            clearVelocity();        }    }    /**     * VelocityTracker也有最大值和最小值     * computeCurrentVelocity获取到的只 <= mMaximumVelocity     * 所以需要判断是否大于最小值     */    private float getScrollVelocityY() {        float velocityY = 0;        if (mVelocityTracker != null) {            mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);            velocityY = mVelocityTracker.getYVelocity(mPointerID);            print("getScrollVelocityY : " + velocityY);        }        if (Math.abs(velocityY) > mMinimumVelocity) {            return velocityY;        }        return 0;    }    private int mLastFlingY;    private void startFling(int velocityY) {        mLastFlingY = 0;        print(" startFling : " + velocityY);        mScroll.fling(0, 0, 0, velocityY, 0, 0, Integer.MIN_VALUE, Integer.MAX_VALUE);        //注意此处一定要调用postInvalidate()或者invalidate()，置于两者的区别，这块就不多做解释了        postInvalidate();    }    private boolean stopFling() {        if (mScroll != null && !mScroll.isFinished()) {            mScroll.abortAnimation();//停止滚动            return false;        }        return true;    }    @Override    public void computeScroll() {        //此处一定要通过 mScroll.computeScrollOffset() 方法判断是否滚动结束        //要不然发生死循环就GG了        if (mScroll != null && mScroll.computeScrollOffset()) {            int y = mScroll.getCurrY();            print(" offsetY : " + (y - mLastFlingY));            mWebView.scrollBy(0, y - mLastFlingY);            mLastFlingY = y;            //注意此处同上一样一定要调用postInvalidate()或者invalidate()            //以达成一种循环的效果            postInvalidate();        }    }    private void addVelocityTracker(MotionEvent event) {        if (mVelocityTracker == null) {            mVelocityTracker = VelocityTracker.obtain();        }        mVelocityTracker.addMovement(event);    }    private void recycleVelocityTracker() {        if (mVelocityTracker != null) {            mVelocityTracker.clear();            mVelocityTracker.recycle();            mVelocityTracker = null;        }    }    private void clearVelocity() {        if (mVelocityTracker != null) {            mVelocityTracker.clear();        }    }    private void print(String msg) {        if (DEBUG_LOG) {            Log.d(TAG, msg);        }    }}

这次来看一下最终的效果

这节就说道这里把，下节来正式进入主题——WebView与ListView共存。