如何在不使用nestedScrollView的情况下在webview的滚动上隐藏和显示FAB

Question

这是我的 XML 布局中的一个浮动操作按钮。

我在 NestedScrollView 中的 Webview 导致捏缩放支持崩溃。

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@drawable/filter_icon"
    android:tint="#FFFFFF"
    app:backgroundTint="@color/colorPrimary"
    app:elevation="4dp"
    app:fabSize="normal"
    app:useCompatPadding="true"
    app:layout_anchorGravity="bottom|end|right"
    app:layout_behavior=".ScrollAwareFABBehavior">
</android.support.design.widget.FloatingActionButton>

Answer 1

在不使用 NestedScrollView 的情况下，在 webview 滚动上隐藏和显示 FAB 的完整工作代码。

public class NestedWebView extends WebView {

    private OnScrollChangedCallback  mOnScrollChangedCallback;

    public NestedWebView(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollChangedCallback != null) {
            mOnScrollChangedCallback.onScrollChange(this, l, t, oldl, oldt);
        }

    }

    public void setOnScrollChangedCallback(final OnScrollChangedCallback mOnScrollChangedCallback) {
        this.mOnScrollChangedCallback = mOnScrollChangedCallback;
    }

    public OnScrollChangedCallback getOnScrollChangedCallback() {
        return mOnScrollChangedCallback;
    }

    public interface OnScrollChangedCallback {
        /**
         * Called when the scroll position of a view changes.
         *
         * @param v          The view whose scroll position has changed.
         * @param scrollX    Current horizontal scroll origin.
         * @param scrollY    Current vertical scroll origin.
         * @param oldScrollX Previous horizontal scroll origin.
         * @param oldScrollY Previous vertical scroll origin.
         */
        void onScrollChange(WebView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY);
    }
}

---

在xml中使用这样的自定义Webview，

<com.essence.linuxcommands.NestedWebView
                android:id="@+id/myWebView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:elevation="@dimen/card_margin"
                android:scrollbarStyle="outsideOverlay"
                android:shadowRadius="2"
                android:visibility="gone"
            />

---

在 Activity 或片段中

NestedWebView webview = (NestedWebView) rootView.findViewById(R.id.myWebView);
webview.setOnScrollChangedCallback(new NestedWebView.OnScrollChangedCallback() {
           @Override
           public void onScrollChange(WebView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
               if (scrollY > oldScrollY && scrollY > 0) {
                   fab.hide();
               }
               if (scrollY < oldScrollY) {
                   fab.show();
               }
           }
       });

Answer 2

行为类

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {


    public ScrollAwareFABBehavior() {
        super();
    }

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

    private int mXonTouchDown;
    private int mXonTouchUp;

    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, FloatingActionButton child, MotionEvent ev) {


        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            mXonTouchDown = (int) ev.getY();
        } else if (ev.getAction() == MotionEvent.ACTION_UP) {
            mXonTouchUp = (int) ev.getY();
        }
        if(mXonTouchDown > mXonTouchUp)
            child.hide();
        else
            child.show();

        return super.onInterceptTouchEvent(parent, child, ev);
    }
}

Answer 3

你可以创建新的类名TouchyWebView

package your.package.name;

public class TouchyWebView extends WebView {

        public TouchyWebView(Context context) {
            super(context);
        }

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

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

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            requestDisallowInterceptTouchEvent(true);
            int action = event.getActionMasked();
            String TAG = ActivityName.class.getSimpleName();
            float initialX = 0, initialY = 0;
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    initialX = event.getX();
                    initialY = event.getY();
                    Log.d(TAG, "Action was DOWN");
                    break;

                case MotionEvent.ACTION_MOVE:
                    Log.d(TAG, "Action was MOVE");
                    break;

                case MotionEvent.ACTION_UP:
                    float finalX = event.getX();
                    float finalY = event.getY();
                    Log.d(TAG, "Action was UP");
                    if (initialX < finalX) {
                        Log.d(TAG, "Left to Right swipe performed");
                    }
                    if (initialX > finalX) {
                        Log.d(TAG, "Right to Left swipe performed");
                    }
                    if (initialY < finalY) {
                        Log.d(TAG, "Up to Down swipe performed");
                        // hide or show fab button here?
                        //fab.hide();
                    }
                    if (initialY > finalY) {
                        Log.d(TAG, "Down to Up swipe performed");
                        // hide or show fab button here?
                        //fab.show();
                    }
                    break;
                case MotionEvent.ACTION_CANCEL:
                    Log.d(TAG, "Action was CANCEL");
                    break;

                case MotionEvent.ACTION_OUTSIDE:
                    Log.d(TAG, "Movement occurred outside bounds of current screen element");
                    break;
            }

            return super.onTouchEvent(event);
        }
    }

现在使用下面新创建的外观来代替 XML 中的 webview

您的网络视图：

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/webview"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
/>

替换为：

<your.package.name.TouchyWebView 
  android:id="@+id/description_web"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"/>

现在你喜欢 webview 对象

WebView webview = (WebView)findViewById(R.id.webView);

改成

TouchyWebView touchyWebView = (TouchyWebView) findViewById(R.id.description_web);

webView Touchy

Answer 4

 final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.myFAB);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            webview.setOnScrollChangeListener(new View.OnScrollChangeListener() {
                @Override
                public void onScrollChange(View Webview,int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                    if (scrollY > oldScrollY && scrollY > 0) {
                        fab.hide();
                    }
                    if (scrollY < oldScrollY) {
                        fab.show();
                    }
                }

            });