Webview 的 Quick Return（滚动时自动隐藏操作栏）

Question

我在 ObservableWebView 中添加了 ScrollListener。我想实现与 Chrome 或 Firefox 相同的效果，其中操作栏在用户向下滚动时隐藏并在用户向上滚动时显示。我几乎可以正常工作了。我在 webView 上有一个 marginTop（以查看访问网页的顶部）并在用户滚动超过工具栏高度时将其删除。

问题是 webView 在更改页边距时会闪烁，因为滚动正在更改，我不知道如何解决这个问题。我看到有人用计时器但不确定。

这是我目前得到的：

webView.setOnScrollChangedCallback((currentX, currentY) -> {

    int sensitivity = (int) dp48;
    int deltaY = prevScroll - currentY;
    prevScroll = currentY;

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
        FrameLayout.LayoutParams.MATCH_PARENT,
        FrameLayout.LayoutParams.MATCH_PARENT
    );

    if (currentY > dp48 && atTop) {
        atTop = false;
        params.topMargin = 0;
        webView.setLayoutParams(params);
    } else if (currentY < dp48 && !atTop) {
        atTop = true;
        params.topMargin = (int) dp48;
        webView.setLayoutParams(params);
    } else {
        if (deltaY > sensitivity) {
            deltaY = sensitivity;
        } else if (deltaY < -sensitivity) {
            deltaY = -sensitivity;
        }
        if (Math.signum(deltaY) * Math.signum(actionBarAutoHideSignal) < 0) {
            // deltaY is a motion opposite to the accumulated signal, so reset signal
            actionBarAutoHideSignal = deltaY;
        } else {
            // add to accumulated signal
            mActionBarAutoHideSignal += deltaY;
        }
        boolean shouldShow = currentY < 0 || (actionBarAutoHideSignal <= -sensitivity);
        autoShowOrHideActionBar(shouldShow);
    }
});

private void autoShowOrHideActionBar(boolean hide) {
    if (hide == toolbarShowing) {
        return;
    }

    toolbarShowing = hide;

    if (hide) {
        toolbar.animate()
                .translationY(-toolbar.getBottom())
                .alpha(0)
                .setDuration(300)
                .setInterpolator(new DecelerateInterpolator());
    } else {
        toolbar.animate()
                .translationY(0)
                .alpha(1)
                .setDuration(300)
                .setInterpolator(new DecelerateInterpolator());
    }
}

XML:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/web_view_container_rail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
    <View
        android:id="@+id/left_shadow"
        android:layout_width="6dp"
        android:layout_height="match_parent"
        android:background="@drawable/dropshadow_left"/>
    <RelativeLayout
        android:id="@+id/web_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffff">
        <com.onedepth.search.view.BounceProgressBar
            android:id="@+id/web_view_progress_bar"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:elevation="8dp">
        </com.onedepth.search.view.BounceProgressBar>
        <com.onedepth.search.view.ObservableWebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fadeScrollbars="true"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="48dp"/>
        <!--<include layout="@layout/toolbar_dropshadow"/>!-->
        <RelativeLayout
            android:id="@+id/webview_toolbar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/white"
            android:elevation="8dp"
            android:layout_marginTop="0dp"
            >
            <ImageView
                android:id="@+id/web_view_close"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_gravity="center"
                android:layout_alignParentLeft="true"
                android:src="@drawable/x"
                android:scaleType="center"
                android:clickable="true"
                android:background="?attr/selectableItemBackground"/>
            <LinearLayout
                android:layout_width="192dp"
                android:layout_height="48dp"
                android:layout_alignParentRight="true"
                android:gravity="right"
                android:background="?attr/selectableItemBackground">
                <ImageView
                    android:id="@+id/web_view_reload"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:src="@drawable/replay"
                    android:scaleType="center"
                    android:clickable="true"
                    android:background="?attr/selectableItemBackground"/>
                <ImageView
                    android:id="@+id/web_view_action"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:src="@drawable/stack_icon_on"
                    android:scaleType="center"
                    android:clickable="true"
                    android:background="?attr/selectableItemBackground"/>
                <ImageView
                    android:id="@+id/web_view_screenshot"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:src="@drawable/screenshot"
                    android:scaleType="center"
                    android:clickable="true"
                    android:background="?attr/selectableItemBackground"/>
                <ImageView
                    android:id="@+id/web_view_overflow"
                    android:layout_width="36dp"
                    android:layout_height="48dp"
                    android:src="@drawable/overflow"
                    android:scaleType="center"
                    android:clickable="true"
                    android:background="?attr/selectableItemBackground"/>
            </LinearLayout>
        </RelativeLayout>

    </RelativeLayout>
</FrameLayout>

Answer 1

我正在查看其他浏览器正在做什么，我发现了一个非常有趣的 discussion。这是我发现的实现此目的的选项，而不会像工具栏那样滚动闪烁 hides/shows:

这里有一个pdf简要解释什么Chrome（还有Firefox？）是在做。 Chrome 正在更改 Chromium WebView，看起来很老套，我什至没有深入了解细节。
Opera, Apus Browser 和其他一些不调整 webview 的大小但将高度设置为 screenHeight - toolbarHeight 并且只是在底部有一个静态工具栏，当显示顶部工具栏时，webview 隐藏在下面。 webview 本身上下移动。
其他浏览器如CM和Mercury设置等于topMargin和bottomMargin 到 webview 并将它们一起制作动画。这很好，因为同时增加顶部和底部边距可以避免滚动条跳转。而且，性能比我预期的要好。
UC 浏览器 有一个按钮，您单击它可以显示工具栏，滚动时它会再次隐藏。

Webview 的 Quick Return（滚动时自动隐藏操作栏）

Quick Return (autohide actionbar when scrolling) for Webview

android

scroll

android-webview

hide