Android Studio中如何为自定义WebView显示布局预览？

WebView在布局编辑模式下会默认绘制灰色背景，且内部默认视图可能会覆盖你通过inflate添加的预览布局，导致自定义预览内容无法显示。以下是具体解决步骤：

• 第一步：修改自定义View的init代码，在编辑模式下先清除WebView的默认内容和背景，再加载预览布局：

class CustomView(context: Context, attrs: AttributeSet?) : WebView(context, attrs) {

    constructor(context: Context) : this(context, null)

    init {
        if (isInEditMode) {
            // 清除WebView默认子视图
            removeAllViews()
            // 移除默认灰色背景
            setBackgroundColor(Color.TRANSPARENT)
            // 加载自定义预览布局
            LayoutInflater.from(context).inflate(R.layout.widget_match_preview, this, true)
        }
    }
}

• 第二步：检查widget_match_preview布局的根节点宽高设置，确保为match_parent，避免预览布局因尺寸问题无法显示：

<!-- 示例widget_match_preview根布局 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF">

    <!-- 自定义预览内容 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自定义预览占位内容"/>

</LinearLayout>

• 第三步：若修改后预览仍无变化，点击布局预览窗口的刷新按钮重新加载预览，或执行File > Invalidate Caches... > Invalidate and Restart重启Android Studio。

内容的提问来源于stack exchange，提问作者Trace171