Android开发：如何在TextView与Button间自适应定位布局？

问题描述 #

需要将内含ImageView的LinearLayout固定在TextView和Button之间，使其能根据不同屏幕尺寸自动调整大小。但为LinearLayout设置layout_below和layout_above属性后，布局被压扁。

原布局代码：

<RelativeLayout>
<TextView
        android:id="@+id/forecast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50sp"
        android:textSize="20sp"
        android:text="egegegeg"
        android:textColor="@color/logo_color"
        android:textAlignment="center" />

    <LinearLayout
            android:id="@+id/forecast_layout"
            android:layout_width="match_parent"
            android:layout_height="200sp"
            >
        <ImageView
                android:id="@+id/imageView3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@raw/yaya"
                android:layout_marginTop="10sp"
                android:layout_marginBottom="10sp"
                android:layout_marginHorizontal="50sp"

                android:contentDescription="@string/image" />
    </LinearLayout>

<Button
        android:id="@+id/search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="120sp"

        android:text="@string/search_button"
        android:backgroundTint="@color/light_blue"
        />
</RelativeLayout>

预期布局效果：

解决方法 #

方法一：修正RelativeLayout属性 #

问题核心是固定高度+上下约束冲突，同时布局单位误用sp（sp仅用于字体大小，布局间距/高度应使用dp）。修改步骤：

• 给LinearLayout添加上下约束，同时将高度设为match_parent，让它填充TextView和Button之间的空间
• 将所有布局margin的sp替换为dp
• 给Button添加layout_alignParentBottom="true"，固定在底部
• 给ImageView设置scaleType，保证图片适配容器且不变形

修改后的代码：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/forecast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:textSize="20sp"
        android:text="egegegeg"
        android:textColor="@color/logo_color"
        android:textAlignment="center" />

    <LinearLayout
        android:id="@+id/forecast_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/forecast"
        android:layout_above="@id/search"
        android:gravity="center">
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:layout_marginHorizontal="50dp"
            android:scaleType="fitCenter"
            app:srcCompat="@raw/yaya"
            android:contentDescription="@string/image" />
    </LinearLayout>

    <Button
        android:id="@+id/search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="120dp"
        android:layout_alignParentBottom="true"
        android:text="@string/search_button"
        android:backgroundTint="@color/light_blue" />
</RelativeLayout>

方法二：使用ConstraintLayout（更推荐） #

ConstraintLayout的约束系统更灵活，适配性更强：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/forecast"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:textSize="20sp"
        android:text="egegegeg"
        android:textColor="@color/logo_color"
        android:textAlignment="center"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/forecast_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginHorizontal="50dp"
        android:gravity="center"
        app:layout_constraintTop_toBottomOf="@id/forecast"
        app:layout_constraintBottom_toTopOf="@id/search">
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginVertical="10dp"
            android:scaleType="fitCenter"
            app:srcCompat="@raw/yaya"
            android:contentDescription="@string/image" />
    </LinearLayout>

    <Button
        android:id="@+id/search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="120dp"
        android:layout_marginBottom="20dp"
        android:text="@string/search_button"
        android:backgroundTint="@color/light_blue"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

关键说明 #

• sp仅用于字体大小设置，布局的间距、高度等必须用dp，保证不同屏幕的适配一致性
• ImageView的scaleType按需选择，fitCenter是常用的保持比例适配容器的选项
• RelativeLayout中用match_parent+上下约束实现填充，ConstraintLayout中用0dp+上下约束实现"match constraints"

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