LinearLayout中ImageView后的TextView无法显示问题排查

问题描述 #

我创建了一个垂直方向的LinearLayout，内部包含5个子LinearLayout，每个子LinearLayout的layout_weight设为1，用于平分屏幕高度。每个子LinearLayout为水平方向，内部有两个layout_weight为1的CardView，实现水平并排效果。CardView里嵌套垂直方向的LinearLayout，放置了AppCompatImageButton和AppCompatTextView，但TextView完全无法显示。请问问题出在哪里？是嵌套权重过多还是权重分配不当？

当前显示效果：

完整XML代码 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:elevation="10dp"
            android:orientation="horizontal"
            app:cardElevation="2dp">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <androidx.appcompat.widget.AppCompatImageButton
                    android:id="@+id/btn_calender_test"
                    style="@style/home_button_style"
                    android:layout_width="match_parent"
                    android:layout_gravity="center"
                    android:adjustViewBounds="true"
                    android:src="@drawable/home_3test_calender"
                    android:text="About">

                </androidx.appcompat.widget.AppCompatImageButton>

                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="About" />

            </androidx.appcompat.widget.LinearLayoutCompat>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:elevation="10dp"
            android:orientation="horizontal"
            app:cardElevation="2dp">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <androidx.appcompat.widget.AppCompatImageButton
                    android:id="@+id/btn_website_test"
                    style="@style/home_button_style"
                    android:layout_width="match_parent"
                    android:layout_gravity="center"
                    android:adjustViewBounds="true"
                    android:src="@drawable/home_4test_website"
                    android:text="About">

                </androidx.appcompat.widget.AppCompatImageButton>

                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="About" />

            </androidx.appcompat.widget.LinearLayoutCompat>

        </androidx.cardview.widget.CardView>

    </androidx.appcompat.widget.LinearLayoutCompat>

    <!-- 其余3组子LinearLayout结构与上述一致，此处省略 -->

</androidx.appcompat.widget.LinearLayoutCompat>

按钮样式代码 #

<style name="home_button_style">
        <item name="android:background">@color/transparent</item>
        <item name="android:textColor">@color/grey600</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:adjustViewBounds">true</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textAllCaps">false</item>
    </style>

问题根源 #

不是嵌套权重过多，而是CardView和内部控件的布局参数设置错误，导致TextView被挤出可视区域：

1. CardView的layout_height设为wrap_content，但父布局（水平LinearLayout）高度依赖权重分配为0dp，这会让CardView的高度被内部ImageButton完全撑满，没有剩余空间留给TextView。
2. ImageButton的样式中layout_height为wrap_content，加上adjustViewBounds="true"，如果图片本身高度接近CardView能分配到的最大高度，会直接占据全部空间，TextView被挤到布局外无法显示。

解决步骤 #

步骤1：修正CardView的布局参数 #

将CardView的layout_height改为match_parent，让它填满父布局分配的高度；同时把layout_width从wrap_content改为0dp（使用layout_weight的标准写法，避免布局计算偏差）：

<androidx.cardview.widget.CardView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:elevation="10dp"
    app:cardElevation="2dp">

步骤2：调整内部垂直LinearLayout的布局 #

让内部垂直LinearLayout填满CardView高度，并用权重分配ImageButton和TextView的空间，确保TextView有足够显示区域：

<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/btn_calender_test"
        style="@style/home_button_style"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:adjustViewBounds="true"
        android:src="@drawable/home_3test_calender">
    </androidx.appcompat.widget.AppCompatImageButton>

    <androidx.appcompat.widget.AppCompatTextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="About" />
</androidx.appcompat.widget.LinearLayoutCompat>

这里给ImageButton设layout_weight="3"，TextView设layout_weight="1"，让图片占3/4高度、文字占1/4，可根据需求自行调整比例。

步骤3：优化按钮样式（可选） #

移除样式中的layout_width和layout_height，避免与布局文件中的设置冲突：

<style name="home_button_style">
    <item name="android:background">@color/transparent</item>
    <item name="android:textColor">@color/grey600</item>
    <item name="android:adjustViewBounds">true</item>
    <item name="android:textAllCaps">false</item>
</style>

额外提示 #

• 使用layout_weight时，对应方向的布局宽度/高度必须设为0dp，这样布局计算会更准确，避免挤压或留白问题。
• 多层嵌套LinearLayout会增加布局绘制的性能开销，若布局复杂度较高，建议用ConstraintLayout替代，减少嵌套层级。

内容的提问来源于stack exchange，提问作者Maifee Ul Asad