Question

我向ScrollListener添加了ObservableWebView。我希望达到与Chrome或Firefox相同的效果，当用户向下滚动并在用户向上滚动时显示操作栏。我得到了这个几乎工作。我在marginTop上有一个webView（查看网页访问的顶部）并在用户滚动超过工具栏高度时将其删除。

问题是，由于滚动正在改变，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。这是我发现实现这一目标的选项，而工具栏隐藏/显示滚动闪烁：

继续pdf简要介绍 Chrome （以及 Firefox ？）正在做什么。 Chrome 正在改变Chromium WebView，看起来非常hacky，我甚至没有详细介绍。
Opera ， Apus浏览器，其他一些不会调整webview的大小，但将高度设置为screenHeight - toolbarHeight，只需在底部有一个静态工具栏当顶部工具栏显示时webview隐藏的位置。 webview本身上下移动。
其他浏览器，例如 CM 和 Mercury 设置等于topMargin和bottomMargin到webview并将它们一起动画。这很好，因为同时增加顶部和底部边距可以避免滚动条跳跃。此外，性能比我预期的要好。
UC浏览器有一个按钮，您单击该按钮可显示工具栏，并在滚动时再次隐藏。

Webview的快速返回（滚动时自动隐藏操作栏）

1 个答案: