Android 调用API时ProgressBar显示在页面按钮文本等内容下层问题咨询

问题根源 #

• 你使用的FrameLayout容器的子视图绘制顺序遵循「先添加的视图在下层，后添加的视图在上层」的规则，你的代码里将承载ProgressBar的LinearLayout写在了表单LinearLayout的前面，所以进度条自然会被上层的表单控件遮挡。

修复方案 #

方案1：调整布局顺序（最简单） #

直接把承载ProgressBar的线性布局挪到FrameLayout所有子视图的最后面，即可让进度条渲染在最上层，修改后的核心代码如下：

<FrameLayout
    android:id="@+id/linearLayout5"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 原来的表单LinearLayout放在前面，作为下层内容 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints">
        <!-- 原有表单控件内容不变 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dip"
            android:text="@string/txt_setup"
            android:layout_marginBottom="16dp"/>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="42dp"
            android:layout_marginTop="8dp"
            android:id="@+id/spinner_layout"
            android:background="@drawable/spinner_back">
            <Spinner
                android:id="@+id/spinner"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:dropDownWidth="match_parent"
                android:dropDownVerticalOffset="40dp"
                android:background="@android:color/transparent"
                android:spinnerMode="dropdown" />
            <ImageView
                android:id="@+id/spinner_arr"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/ic__2_web_icons_ic_caretdown_gra"/>
        </RelativeLayout>
    </LinearLayout>
    <!-- 进度条布局挪到最后，作为上层内容 -->
    <LinearLayout
        android:id="@+id/progress_linear"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:background="#80000000"> <!-- 可选：加半透明黑色背景遮罩下层内容，体验更好 -->
        <ProgressBar
            style="?android:attr/progressBarStyleInverse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:theme="@style/ProgressBarTheme"
            android:id="@+id/progress"
            android:layout_gravity="center" />
    </LinearLayout>
</FrameLayout>

方案2：主动提升视图层级 #

如果不想调整布局顺序，可以给进度条的父布局加android:elevation属性，设置比下层控件更高的海拔值，也能让进度条显示在上层：

<LinearLayout
    android:id="@+id/progress_linear"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:elevation="4dp"> <!-- 海拔值高于下层控件即可 -->
    <ProgressBar
        .../>
</LinearLayout>

额外优化建议 #

• 可以给progress_linear加点击事件拦截，避免进度条显示时用户还能点击下层的表单控件，逻辑更严谨。
• 不需要显示进度条时直接把progress_linear设置为View.GONE即可，不要用View.INVISIBLE，避免占用点击事件。

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