移动端App全布局底部出现空白问题求助

问题描述 #

我的移动应用在平板等大屏设备上运行完全正常，但在手机设备（测试机型：Motorola E13、Samsung A71）上，所有布局底部都会出现一块空白区域。以下以无ActionBar的登录布局为例说明问题：

登录布局代码（login_layout.axml） #

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:background="@color/white"
    android:fitsSystemWindows="true"
    android:id="@+id/login_layout">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">
        <ImageView
            android:layout_height="70dp"
            android:src="@drawable/img_rdscan_black"
            android:layout_width="300dp" />
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="26dp"
            android:gravity="center_vertical"
            android:layout_gravity="center_horizontal">
            <android.support.design.widget.TextInputLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/TextInputLayoutOutlined">
                <android.support.design.widget.TextInputEditText
                    android:id="@+id/txtLogin"
                    android:layout_width="300dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:inputType="number"
                    android:hint="CPF"
                    android:textColor="@color/primary"
                    android:textSize="@dimen/smaller_font_size" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/TextInputLayoutOutlined"
                android:layout_marginTop="10dp">
                <android.support.design.widget.TextInputEditText
                    android:id="@+id/txtPassword"
                    android:layout_width="300dp"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:hint="Senha"
                    android:textColor="@color/primary"
                    android:textSize="@dimen/smaller_font_size" />
            </android.support.design.widget.TextInputLayout>
            <Button
                android:id="@+id/btnLogin"
                android:text="Entrar"
                android:backgroundTint="@color/primary"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:textColor="@color/white"
                android:textSize="@dimen/smaller_font_size"
                android:background="@drawable/bg_button_dark_rounded"
                android:fontFamily="sans-serif-condensed-light" />
        </LinearLayout>
        <ProgressBar
            android:id="@+id/pbLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:progressTint="@color/primary_active"
            android:indeterminate="true"
            android:visibility="gone" />

        <TextView
            android:id="@+id/txtLoginVersionSNHash"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:textStyle="normal"
            android:textSize="16sp"
            android:text="@string/app_version"
            android:fontFamily="sans-serif-condensed-light"
            android:gravity="center_horizontal"
            android:textColor="@color/accent" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabSettingsWifi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:src="@drawable/ic_action_wifi"
        app:fabSize="normal"
        app:backgroundTint="#272B35"
        app:rippleColor="@color/accent" />
</android.support.design.widget.CoordinatorLayout>

样式代码（styles.xml） #

<style name="AppThemeLogin" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:actionBarSize">0dp</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/primary_active</item>
    <item name="colorControlHighlight">@color/accent</item>
    <item name="android:textColorHint">@color/accent</item>
</style>

已尝试的方案 #

• 尝试过常见的底部空白修复方案，但均未解决问题

解决思路 #

1. 移除fitsSystemWindows属性冲突 #

根布局CoordinatorLayout设置的android:fitsSystemWindows="true"，在无ActionBar主题下会强制预留系统状态栏/导航栏的空白空间，这是手机端底部空白的核心原因。

修复：
将该属性改为false或直接删除：

<android.support.design.widget.CoordinatorLayout
    ...
    android:fitsSystemWindows="false"
    ...>

2. 补充主题全屏适配配置 #

当前主题仅隐藏了ActionBar，未处理系统窗口的全屏适配，部分手机会因导航栏预留空间导致空白。

修复：
在AppThemeLogin中添加全屏相关属性：

<style name="AppThemeLogin" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

3. 统一布局宽高属性 #

将fill_parent替换为高版本Android推荐的match_parent，避免旧版本解析差异：

<android.support.design.widget.CoordinatorLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ...>

4. 代码层面强制全屏（可选） #

若布局修改无效，在LoginActivity中添加代码强制隐藏系统栏：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                        WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.login_layout);
}

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