Android Studio：WebView超显示区域、按钮被遮挡，求类似iOS安全区方案

嘿，我来帮你理清这个问题！首先你遇到的WebView尺寸超出显示区域的问题，根源在于你给WebView设置了固定的尺寸值（412dp × 844dp）——这个尺寸只对应某一款特定设备的屏幕大小，在其他不同尺寸/分辨率的设备上，自然就会超出可视区域，导致跟着WebView底部走的按钮被屏幕边缘遮挡。

至于你提到的iOS安全区域（Safe Area），Android里确实有对应的适配方案，而且实现起来也不复杂，下面是具体的解决步骤：

1. 先修复WebView的尺寸问题 #

把WebView的固定宽高改成match_parent，让它自动适配当前设备的屏幕可用空间，而不是硬编码某款设备的尺寸：

<WebView
    android:id="@+id/blizzView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:keepScreenOn="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">
</WebView>

2. 开启Android的安全区域适配 #

在你的根布局（也就是ConstraintLayout）上添加android:fitsSystemWindows="true"属性，这个属性就相当于iOS的Safe Area，它会让布局自动避开状态栏、底部导航栏这些系统UI占用的区域，确保你的内容都显示在可视范围内：

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible"
    android:fitsSystemWindows="true" <!-- 加上这行 -->
    tools:context="de.blizz_z.onlineshop.FullscreenActivity">

3. 调整按钮的约束逻辑 #

现在按钮绑定的是WebView的底部，而如果WebView已经适配了安全区域，你可以直接把按钮的约束改成绑定到父布局的底部，同时保留你设置的margin，这样按钮就会稳稳地显示在安全区域内：

<Button
    android:id="@+id/backButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginLeft="32dp"
    android:layout_marginBottom="20dp"
    android:text="Zurück"
    app:layout_constraintBottom_toBottomOf="parent" <!-- 改成绑定父布局 -->
    app:layout_constraintStart_toStartOf="parent" /> <!-- 也可以绑定父布局的Start，更灵活 -->

完整修改后的代码 #

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible"
    android:fitsSystemWindows="true"
    tools:context="de.blizz_z.onlineshop.FullscreenActivity">

    <Button
        android:id="@+id/backButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginBottom="20dp"
        android:text="Zurück"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <WebView
        android:id="@+id/blizzView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:keepScreenOn="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </WebView>
</android.support.constraint.ConstraintLayout>

这样修改后，WebView会自动适配不同设备的屏幕大小，同时布局会避开系统UI的区域，你的按钮也不会再被屏幕边缘遮挡了。

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