美文网首页
在CordinatorLayout中使用Webview

在CordinatorLayout中使用Webview

作者: E木聿一 | 来源:发表于2017-08-22 11:57 被阅读0次

    为了实现webview向上滑动可以隐藏title栏,目前最简便的方法就是使用CordinatorLayout,要在CordinatorLayout中使用Webview,就必须使Webview实现NestedScrollingChild接口或者将WebView嵌套在实现了NestedScrollingChild接口的View(例如NestedScrollView,RecylerView)中。

    Webview嵌套在NestedScrollView中

    先贴一下布局文件

    <android.support.design.widget.CoordinatorLayout
        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"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        tools:context="com.example.young.webviewhidetitledemo.MainActivity">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="0dp">
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="25sp"
                    android:gravity="center"
                    android:text="I am a title!"/>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <WebView
                android:id="@+id/my_web"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></WebView>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
    

    此时webview的高度为当前页面全部内容的高度,由于硬件性能限制,图层绘制的高度有最大值,超过最大值会造成无法绘制图层异常,同时如果没有crash,也会因为滑动被NestedScrollView拦截无法判断内容是否滑到底部去加载更多;如果尝试在页面加载完成后重新绘制Webview的大小以避免上述异常,则会因为滑动操作被NestedScrollView拦截而网页内容无法滑动,因此,Google给出的建议是不要将Webview放在NestedScrollView中。
    参考:https://issuetracker.google.com/issues/37077954

    Webview实现了NestedScrollingChild接口

    如果要在CordinatorLayout中使用Webview,Google推荐的方法是使用NestedScroll机制,从 Android 5.0 Lollipop 开始提供一套 API 来支持嵌入的滑动效果。同样在最新的 Support V4 包中也提供了前向的兼容。NestedScrolling 提供了一套父 View 和子 View 滑动交互机制。要完成这样的交互,父 View 需要实现 NestedScrollingParent 接口,而子 View 需要实现 NestedScrollingChild 接口。
      接下来简单的介绍一下这两个类:

    NestedScrollingChild
    public interface NestedScrollingChild {
    // 参数enabled:true表示view使用嵌套滚动,false表示禁用.
    public void setNestedScrollingEnabled(boolean enabled);
    
    public boolean isNestedScrollingEnabled();
    
    // 参数axes:表示滚动的方向如:ViewCompat.SCROLL_AXIS_VERTICAL(垂直方向滚动)和
    // ViewCompat.SCROLL_AXIS_HORIZONTAL(水平方向滚动)
    // 返回值:true表示本次滚动支持嵌套滚动,false不支持
    public boolean startNestedScroll(int axes);
    
    public void stopNestedScroll();
    
    public boolean hasNestedScrollingParent();
    
    // 参数dxConsumed: 表示view消费了x方向的距离长度
    // 参数dyConsumed: 表示view消费了y方向的距离长度
    // 参数dxUnconsumed: 表示滚动产生的x滚动距离还剩下多少没有消费
    // 参数dyUnconsumed: 表示滚动产生的y滚动距离还剩下多少没有消费
    // 参数offsetInWindow: 表示剩下的距离dxUnconsumed和dyUnconsumed使得view在父布局中的位置偏移了多少
    public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed,
            int dxUnconsumed, int dyUnconsumed, int[] offsetInWindow);
    
    // 参数dx: 表示view本次x方向的滚动的总距离长度
    // 参数dy: 表示view本次y方向的滚动的总距离长度
    // 参数consumed: 表示父布局消费的距离,consumed[0]表示x方向,consumed[1]表示y方向
    // 参数offsetInWindow: 表示剩下的距离dxUnconsumed和dyUnconsumed使得view在父布局中的位置偏移了多少
    public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow);
    
    public boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed);
    
    public boolean dispatchNestedPreFling(float velocityX, float velocityY);
    }
    
    • setNestedScrollingEnabled 实现该结构的View要调用

    • setNestedScrollingEnabled(true)才可以使用嵌套滚动

    • isNestedScrollingEnabled判断当前view能否使用嵌套滚动

    • startNestedScroll和stopNestedScroll是配对使的startNestedScroll表示view开始滚动了,一般是在ACTION_DOWN中调用,如果返回true则表示父布局支持嵌套滚动.在事件结束比如ACTION_UP或者ACTION_CANCLE中调用stopNestedScroll,告诉父布局滚动结束.

    • dispatchNestedScroll,把view消费滚动距离之后,把剩下的滑动距离再次传给父布局.

    • dispatchNestedPreScroll,在view消费滚动距离之前把总得滑动距离传给父布局.

    • dispatchNestedFling和dispatchNestedPreFling就是view传递滑动的信息给父布局的.

    NestedScrollingparent
    public interface NestedScrollingParent {
    /**
     * 有嵌套滑动到来了,问下该父View是否接受嵌套滑动
     * @param child 嵌套滑动对应的父类的子类(因为嵌套滑动对于的父View不一定是一级就能找到的,可能挑了两级父View的父View,child的辈分>=target)
     * @param target 具体嵌套滑动的那个子类
     * @param nestedScrollAxes 支持嵌套滚动轴。水平方向,垂直方向,或者不指定
     * @return 是否接受该嵌套滑动
     */
    public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes);
    
    /**
     * 该父View接受了嵌套滑动的请求该函数调用。onStartNestedScroll返回true该函数会被调用。
     * 参数和onStartNestedScroll一样
     */
    public void onNestedScrollAccepted(View child, View target, int nestedScrollAxes);
    
    /**
     * 停止嵌套滑动
     * @param target 具体嵌套滑动的那个子类
     */
    public void onStopNestedScroll(View target);
    
    /**
     * 嵌套滑动的子View在滑动之后报告过来的滑动情况
     *
     * @param target 具体嵌套滑动的那个子类
     * @param dxConsumed 水平方向嵌套滑动的子View滑动的距离(消耗的距离)
     * @param dyConsumed 垂直方向嵌套滑动的子View滑动的距离(消耗的距离)
     * @param dxUnconsumed 水平方向嵌套滑动的子View未滑动的距离(未消耗的距离)
     * @param dyUnconsumed 垂直方向嵌套滑动的子View未滑动的距离(未消耗的距离)
     */
    public void onNestedScroll(View target, int dxConsumed, int dyConsumed,
                               int dxUnconsumed, int dyUnconsumed);
    
    /**
     * 在嵌套滑动的子View未滑动之前告诉过来的准备滑动的情况
     * @param target 具体嵌套滑动的那个子类
     * @param dx 水平方向嵌套滑动的子View想要变化的距离
     * @param dy 垂直方向嵌套滑动的子View想要变化的距离
     * @param consumed 这个参数要我们在实现这个函数的时候指定,回头告诉子View当前父View消耗的距离 
     *                    consumed[0] 水平消耗的距离,consumed[1] 垂直消耗的距离 好让子view做出相应的调整
     */
    public void onNestedPreScroll(View target, int dx, int dy, int[] consumed);
    
    /**
     * 嵌套滑动的子View在fling之后报告过来的fling情况
     * @param target 具体嵌套滑动的那个子类
     * @param velocityX 水平方向速度
     * @param velocityY 垂直方向速度
     * @param consumed 子view是否fling了
     * @return true 父View是否消耗了fling
     */
    public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed);
    
    /**
     * 在嵌套滑动的子View未fling之前告诉过来的准备fling的情况
     * @param target 具体嵌套滑动的那个子类
     * @param velocityX 水平方向速度
     * @param velocityY 垂直方向速度
     * @return true 父View是否消耗了fling
     */
    public boolean onNestedPreFling(View target, float velocityX, float velocityY);
    
    /**
     * 获取嵌套滑动的轴
     * @see ViewCompat#SCROLL_AXIS_HORIZONTAL 垂直
     * @see ViewCompat#SCROLL_AXIS_VERTICAL 水平
     * @see ViewCompat#SCROLL_AXIS_NONE 都支持
     */
    public int getNestedScrollAxes();
    }
    
    • onStartNestedScroll.当子view的调用NestedScrollingChild的方法startNestedScroll时,会调用该方法.

    • onNestedScrollAccepted.如果onStartNestedScroll方法返回的是true的话,那么紧接着就会调用该方法.它是让嵌套滚动在开始滚动之前,让布局容器(viewGroup)或者它的父类执行一些配置的初始化的.下面是原文:
      (It offers an opportunity for the view and its superclasses to perform initial configuration for the nested scroll.)

    • onStopNestedScroll停止滚动了,当子view调用stopNestedScroll时会调用该方法.

    • onNestedScroll,当子view调用dispatchNestedScroll方法时,会调用该方法.

    • onNestedPreScroll,当子view调用dispatchNestedPreScroll方法是,会调用该方法.

    • dispatchNestedFling和dispatchNestedPreFling对应的就是滑动了

    由于CordinatorLayout是支持NestedScrollingParent的,所以一般情况下直接使用就可以了,只需要webview或自定义view等不支持NestedScrollingChild的view继承NestedScrollingChild并实现接口中的方法,如以下示例:

    
    import android.content.Context;
    import android.support.v4.view.MotionEventCompat;
    import android.support.v4.view.NestedScrollingChild;
    import android.support.v4.view.NestedScrollingChildHelper;
    import android.support.v4.view.ViewCompat;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    import android.webkit.WebView;
    
    /**
     * Created by young on 17/8/21.
     */
    
    public class NestedWebView extends WebView implements NestedScrollingChild{
    
        private int mLastY;
        private final int[] mScrollOffset = new int[2];
        private final int[] mScrollConsumed = new int[2];
        private int mNestedOffsetY;
        private NestedScrollingChildHelper mChildHelper;
    
        public NestedWebView(Context context) {
            super(context);
            init();
        }
    
        public NestedWebView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        public NestedWebView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }
    
        private void init() {
            mChildHelper = new NestedScrollingChildHelper(this);
            setNestedScrollingEnabled(true);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            boolean result = false;
    
            MotionEvent trackedEvent = MotionEvent.obtain(event);
    
            final int action = MotionEventCompat.getActionMasked(event);
    
            if (action == MotionEvent.ACTION_DOWN) {
                mNestedOffsetY = 0;
            }
    
            int y = (int) event.getY();
    
            event.offsetLocation(0, mNestedOffsetY);
    
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    mLastY = y;
                    startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL);
                    result = super.onTouchEvent(event);
                    break;
                case MotionEvent.ACTION_MOVE:
                    int deltaY = mLastY - y;
    
                    if (dispatchNestedPreScroll(0, deltaY, mScrollConsumed, mScrollOffset)) {
                        deltaY -= mScrollConsumed[1];
                        trackedEvent.offsetLocation(0, mScrollOffset[1]);
                        mNestedOffsetY += mScrollOffset[1];
                    }
    
                    int oldY = getScrollY();
                    mLastY = y - mScrollOffset[1];
                    if (deltaY < 0) {
                        int newScrollY = Math.max(0, oldY + deltaY);
                        deltaY -= newScrollY - oldY;
                        if (dispatchNestedScroll(0, newScrollY - deltaY, 0, deltaY, mScrollOffset)) {
                            mLastY -= mScrollOffset[1];
                            trackedEvent.offsetLocation(0, mScrollOffset[1]);
                            mNestedOffsetY += mScrollOffset[1];
                        }
                    }
    
                    trackedEvent.recycle();
                    result = super.onTouchEvent(trackedEvent);
                    break;
                case MotionEvent.ACTION_POINTER_DOWN:
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    stopNestedScroll();
                    result = super.onTouchEvent(event);
                    break;
            }
            return result;
        }
    
        // Nested Scroll implements
        @Override
        public void setNestedScrollingEnabled(boolean enabled) {
            mChildHelper.setNestedScrollingEnabled(enabled);
        }
    
        @Override
        public boolean isNestedScrollingEnabled() {
            return mChildHelper.isNestedScrollingEnabled();
        }
    
        @Override
        public boolean startNestedScroll(int axes) {
            return mChildHelper.startNestedScroll(axes);
        }
    
        @Override
        public void stopNestedScroll() {
            mChildHelper.stopNestedScroll();
        }
    
        @Override
        public boolean hasNestedScrollingParent() {
            return mChildHelper.hasNestedScrollingParent();
        }
    
        @Override
        public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed,
                int[] offsetInWindow) {
            return mChildHelper.dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow);
        }
    
        @Override
        public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) {
            return mChildHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow);
        }
    
        @Override
        public boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed) {
            return mChildHelper.dispatchNestedFling(velocityX, velocityY, consumed);
        }
    
        @Override
        public boolean dispatchNestedPreFling(float velocityX, float velocityY) {
            return mChildHelper.dispatchNestedPreFling(velocityX, velocityY);
        }
    }
    

    在布局文件中,NestedWebView直接作为Cordinatorlayout的子控件并设置属性app:layout_behavior="@string/appbar_scrolling_view_behavior"就可以支持正常的嵌套滑动。
      其实NestedScrolling最核心的内容就是对滑动事件重新分配根据滑动位置将动作分发到对应的控件并由对应控件消费以达到嵌套滑动的连带效果。
    参考:
    1.https://developer.android.com/reference/android/support/v4/view/NestedScrollingParent.html
    2.http://blog.csdn.net/chen930724/article/details/50307193
    3.https://github.com/takahirom/webview-in-coordinatorlayout/tree/master/app/src/main/java/com/github/takahirom/webview_in_coodinator_layout

    相关文章

      网友评论

          本文标题:在CordinatorLayout中使用Webview

          本文链接:https://www.haomeiwen.com/subject/pnvkdxtx.html