避免Android Webview滑入滑出屏幕时闪烁的解决方案

2023-12-12 10:41:58

避免 Android Webview 中滑动时的闪烁：一个深入的解决方案

问题根源

使用 Android Webview 时，当从屏幕可见区域外向内滑动时，您可能会遇到恼人的闪烁问题。这是因为 Webview 在屏幕外时处于未渲染状态，重新渲染时会导致内容区域短暂显示为空白块。

这种闪烁问题通常发生在 Webview 嵌套在 NestedScrollView 或 ScrollView 等可滚动布局中。当从屏幕外向内滑动 Webview 时，嵌套布局会优先滚动，而 Webview 则稍后才开始渲染，导致内容出现之前短暂显示为白色块。

解决方案

为了解决此问题，我们需要修改 Webview 的布局结构，使其在滑入或滑出屏幕时始终保持渲染状态。

一种有效的方法是将 Webview 放置在 FrameLayout 中，并通过修改嵌套布局的属性来实现。

具体步骤：

在布局文件中，将 Webview 包裹在一个 FrameLayout 中：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

在 Activity 或 Fragment 的代码中，通过修改 NestedScrollView 的属性，使其在 Webview 滑入或滑出屏幕时保持嵌套滚动状态：

NestedScrollView nestedScrollView = findViewById(R.id.nestedScrollView);
nestedScrollView.setNestedScrollingEnabled(false);
nestedScrollView.post(() -> nestedScrollView.setNestedScrollingEnabled(true));

示例代码

为了更清楚地展示解决方案的应用，这里提供一个示例代码片段：

public class MainActivity extends AppCompatActivity {

    private NestedScrollView nestedScrollView;
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        // 修改 NestedScrollView 的属性
        nestedScrollView.setNestedScrollingEnabled(false);
        nestedScrollView.post(() -> nestedScrollView.setNestedScrollingEnabled(true));
    }
}