Android多ImageView统一缩放：分割图无变形适配全屏幕

核心思路是保持三个ImageView的宽高比与原始图片一致，同时让它们的宽度同步适配屏幕宽度（或父容器可用宽度），这样就能保证三者的缩放比例完全相同，不会出现变形或缩放不一致的情况。

方案一：使用ConstraintLayout（推荐） #

ConstraintLayout可以通过app:layout_constraintDimensionRatio属性轻松固定View的宽高比，同时让宽度自适应父容器，高度自动按比例计算，无需额外代码。

修改后的布局代码如下：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="25dp"
    android:paddingHorizontal="20dp">

    <!-- 顶部图片：原始宽高320x57，宽高比为320:57 -->
    <ImageView
        android:id="@+id/Top"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription="top part"
        android:scaleType="fitCenter"
        android:src="@drawable/tops"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="320:57"/>

    <!-- 中部图片容器：原始宽高320x138，宽高比320:138 -->
    <RelativeLayout
        android:id="@+id/middleContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/Top"
        app:layout_constraintDimensionRatio="320:138">

        <ImageView
            android:id="@+id/Middle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="middle part"
            android:scaleType="fitCenter"
            android:src="@drawable/middles"/>

        <AutoResizeTextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/Middle"
            android:layout_alignTop="@+id/Middle"
            android:layout_alignRight="@+id/Middle"
            android:layout_alignBottom="@+id/Middle"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="5dp"/>
    </RelativeLayout>

    <!-- 底部图片：原始宽高320x233，宽高比320:233 -->
    <ImageView
        android:id="@+id/Bottom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription="bottom part"
        android:scaleType="fitCenter"
        android:src="@drawable/bottoms"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/middleContainer"
        app:layout_constraintDimensionRatio="320:233"/>
</androidx.constraintlayout.widget.ConstraintLayout>

关键说明：

• 所有图片容器的layout_width设为0dp，通过左右约束匹配父容器宽度，自适应屏幕可用空间。
• layout_height设为0dp，通过layout_constraintDimensionRatio绑定与原始图片一致的宽高比，高度会自动按比例计算，保证缩放统一。
• scaleType选择fitCenter，确保图片按比例填充容器，避免拉伸变形。

方案二：使用LinearLayout配合代码动态计算 #

如果必须保留LinearLayout结构，可以通过代码计算统一缩放比例，动态设置各View的高度：

1. 布局基础修改：

<LinearLayout
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingTop="25dp"
    android:paddingHorizontal="20dp">

    <ImageView
        android:id="@+id/Top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="top part"
        android:scaleType="fitCenter"
        android:src="@drawable/tops"/>

    <RelativeLayout
        android:id="@+id/middleContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/Middle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="middle part"
            android:scaleType="fitCenter"
            android:src="@drawable/middles"/>

        <AutoResizeTextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/Middle"
            android:layout_alignTop="@+id/Middle"
            android:layout_alignRight="@+id/Middle"
            android:layout_alignBottom="@+id/Middle"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="5dp"/>
    </RelativeLayout>

    <ImageView
        android:id="@+id/Bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="bottom part"
        android:scaleType="fitCenter"
        android:src="@drawable/bottoms"/>
</LinearLayout>

2. 在Activity/Fragment中添加逻辑：

@Override
protected void onStart() {
    super.onStart();
    // 等待布局完成后计算尺寸
    rootLayout.post(() -> {
        int availableWidth = rootLayout.getWidth();
        // 基于原始宽度320计算缩放比例
        float scaleRatio = (float) availableWidth / 320f;

        // 设置Top的高度：原始高度57 × 缩放比例
        LinearLayout.LayoutParams topParams = (LinearLayout.LayoutParams) Top.getLayoutParams();
        topParams.height = (int) (57 * scaleRatio);
        Top.setLayoutParams(topParams);

        // 设置Middle容器的高度：原始高度138 × 缩放比例
        LinearLayout.LayoutParams middleParams = (LinearLayout.LayoutParams) middleContainer.getLayoutParams();
        middleParams.height = (int) (138 * scaleRatio);
        middleContainer.setLayoutParams(middleParams);

        // 设置Bottom的高度：原始高度233 × 缩放比例
        LinearLayout.LayoutParams bottomParams = (LinearLayout.LayoutParams) Bottom.getLayoutParams();
        bottomParams.height = (int) (233 * scaleRatio);
        Bottom.setLayoutParams(bottomParams);
    });
}

关键说明：

• 通过post()确保布局完成测量，能获取到父容器的真实宽度。
• 用统一的缩放比例计算每个View的高度，保证三者缩放比例完全一致。

注意事项 #

• 移除原布局中分散的paddingLeft、layout_marginRight，统一用父容器的paddingHorizontal控制左右间距，避免干扰宽度计算。
• 不要使用fitXY作为scaleType，会导致图片拉伸变形。

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