如何在未知父视图尺寸的Android ConstraintLayout中居中四个ImageView并保持宽高比

需求说明 #

• 在Android ConstraintLayout中放置4个ImageView，需适配任意父视图宽高及横竖屏模式
• 每个ImageView需以父视图中心为基准对齐，同时严格保持自身宽高比
• 布局效果：四个ImageView分别对应父视图的左上、右上、左下、右下区域，每个视图的展示范围以父中心为边界，图片在对应区域内保持比例显示（如左上角视图的图片在左上区域内靠左上角展示，右下角视图的图片在右下区域内靠右下角展示）

已尝试方案的问题 #

• 曾将ImageView宽高设为match_parent，通过对齐父视图中心与边缘，结合scaleType="fitStart"实现了左上角视图的预期效果，scaleType="fitEnd"实现了右下角视图效果
• 但由于系统没有fitRightTop、fitLeftBottom这类scaleType选项，右上和左下的视图无法达到预期布局

可行解决方案 #

通过ConstraintLayout的**中心辅助线（Guideline）**结合视图约束，搭配合适的scaleType即可实现需求，无需自定义View。

完整布局代码示例 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <!-- 垂直中心辅助线，将父视图分为左右两半 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/vertical_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <!-- 水平中心辅助线，将父视图分为上下两半 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/horizontal_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <!-- 左上角ImageView -->
    <ImageView
        android:id="@+id/img_top_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitStart"
        android:src="@drawable/your_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@id/vertical_center"
        app:layout_constraintBottom_toTopOf="@id/horizontal_center"
        app:layout_constraintDimensionRatio="1:1" /> <!-- 替换为你的图片实际宽高比，如4:3 -->

    <!-- 右上角ImageView -->
    <ImageView
        android:id="@+id/img_top_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitEnd"
        android:src="@drawable/your_image"
        app:layout_constraintLeft_toRightOf="@id/vertical_center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/horizontal_center"
        app:layout_constraintDimensionRatio="1:1" />

    <!-- 左下角ImageView -->
    <ImageView
        android:id="@+id/img_bottom_left"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitEnd"
        android:src="@drawable/your_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/horizontal_center"
        app:layout_constraintRight_toLeftOf="@id/vertical_center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1" />

    <!-- 右下角ImageView -->
    <ImageView
        android:id="@+id/img_bottom_right"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitStart"
        android:src="@drawable/your_image"
        app:layout_constraintLeft_toRightOf="@id/vertical_center"
        app:layout_constraintTop_toBottomOf="@id/horizontal_center"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1" />

</androidx.constraintlayout.widget.ConstraintLayout>

代码说明 #

1. 中心辅助线：通过两条占比50%的Guideline，将父视图均匀分割为四个象限，每个ImageView对应一个象限
2. 视图约束：每个ImageView的宽高设为0dp（匹配约束），约束到对应象限的边界（父视图边缘+中心辅助线），确保无论横竖屏都能填充对应区域
3. 宽高比保持：通过app:layout_constraintDimensionRatio设置图片的宽高比，保证图片不会拉伸变形
4. ScaleType选择：
   • 左上/右下视图用fitStart：图片在对应象限内靠左上角/右下角展示，保持比例
   • 右上/左下视图用fitEnd：图片在对应象限内靠右上角/左下角展示，保持比例

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