如何在ConstraintLayout中设置maxHeight和DimensionRatio？

Question

我正在尝试在父元素中居中显示一张图片，它的尺寸比例为1220:1000，并且最大高度为300dp（即使在大屏幕下也要保持图片较小）。

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1220:1000"
        app:layout_constraintHeight_max="200dp"  ==> This line break the ratio (the image is not displayed)
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

app:layout_constraintHeight_max属性破坏了比例关系。有没有什么方法可以解决？

- Bogy

Answer 1

如果您想强制实施max_height并保持尺寸比例不变，则需要根据高度约束宽度。您可以通过添加W到您的比例来实现此目的: app:layout_constraintDimensionRatio="W,1220:1000" 这将首先约束高度，然后设置相应的宽度以满足比例。

有关此尺寸比例如何工作的更多信息，请参见文档。

- Pawel Laskowski

---

它运行得非常好 :) app:layout_constraintDimensionRatio="W,1220:1000" 与 app:layout_constraintHeight_max="300dp" - Bogy

在 ConstraintLayout 2.0.3 中，似乎必须使用 H 代替 W。 - wrozwad

Answer 2

如果你想最大化一个给定长宽比和最大高度的区域，但你不知道是宽度还是高度会被调整，最好不要同时使用 layout_constraintDimensionRatio 和 layout_constraintHeight_max。它们在一起的效果并不好。

这里我提供了一个解决方案，针对一个 16:9 的图片，在未达到最大高度时将占满整个宽度，否则将保持最大高度，并调整宽度：

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

        <!-- This space view makes ImageView expands to its corresponding height -->
        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageview" />

        <com.a3.sgt.ui.widget.AspectRatioImageView
            android:id="@+id/imageview"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:adjustViewBounds="true"
            app:dominantMeasurement="height"
            app:aspectRatioEnabled="true"
            app:aspectRatio="1.778"
            android:scaleType="centerCrop"
            app:layout_constraintHeight_max="400dp"
            tools:src="@drawable/placeholder_glacier"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
</androidx.constraintlayout.widget.ConstraintLayout>

我使用了我在{{link1：我的gist}}中拥有的自定义ImageView，它会调整纵横比，以避免使用layout_constraintDimensionRatio，该属性与layout_constraintHeight_max一起会引起问题。

- Mario Velasco

Answer 3

你尝试过添加maxHeight标签吗？

android:maxHeight="200dp"

- Andrew