如何在ConstraintLayout中居中ImageView与TextView，自适应尺寸保证TextView可见

如何在ConstraintLayout中居中放置ImageView和TextView，确保无论ConstraintLayout的高度如何，两者始终保持居中，同时在必要时让ImageView缩小以保证TextView的可见性？

预期效果 #

• 当ConstraintLayout尺寸较大时：居中显示，ImageView不超过原尺寸
  
• 当ConstraintLayout尺寸较小时：居中显示，ImageView缩小，TextView保持可见
  

可复现代码 #

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:srcCompat="@tools:sample/avatars"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/textView" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingHorizontal="@dimen/primary_margin"
            android:text="Just a text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

补充说明 #

目前找到的最接近的解决方案如下，但存在缺点：需要手动指定ImageView的最大宽高，理想情况是根据图片实际宽高动态调整。

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="16dp"
            app:layout_constraintHeight_max="200dp"
            app:layout_constraintWidth_max="200dp"
            tools:srcCompat="@tools:sample/avatars"
            app:layout_constraintVertical_chainStyle="packed"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/textView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingHorizontal="@dimen/primary_margin"
            android:text="Just a text"
            app:layout_constraintTop_toBottomOf="@id/imageView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

解决方案 #

要实现动态根据图片原尺寸限制大小，同时保证TextView始终可见且整体居中，你可以按以下方式修改布局：

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:layout_marginBottom="16dp"
        tools:srcCompat="@tools:sample/avatars"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="wrap"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingHorizontal="@dimen/primary_margin"
        android:text="Just a text"
        app:layout_constraintTop_toBottomOf="@id/imageView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键改动说明： #

• android:adjustViewBounds="true"：让ImageView保持图片的宽高比，避免拉伸变形
• android:scaleType="fitCenter"：确保图片在缩放时居中显示
• app:layout_constraintHeight_default="wrap" 和 app:layout_constraintWidth_default="wrap"：让ImageView默认包裹图片原大小，不会超过原尺寸
• 保留app:layout_constraintVertical_chainStyle="packed"：让ImageView和TextView整体在ConstraintLayout中垂直居中
• 使用0dp（match_constraint）作为宽高配合上述属性，既可以让ImageView在空间充足时保持原尺寸，又能在空间不足时自动缩小，同时保证TextView的空间不被挤压

这样就无需手动指定最大宽高，ImageView会自动根据自身图片的实际尺寸来限制最大大小，同时满足两种场景的需求。

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