How to set maxHeight over DimensionRatio with ConstraintLayout?

问题

I'm trying to display an image centered in parent with a dimension ratio of 1220:1000 AND a maximum height of 300dp (to keep the image small even with large screen)

<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>

The app:layout_constraintHeight_max property break the ratio. Is there is a way to do it?

回答1:

If you want to enforce max_height and keep the dimension ratio at the same time, you need to constrain the width based on height. You can achieve that by adding W to your ratio:

app:layout_constraintDimensionRatio="W,1220:1000"

This will constrain the height first and then set the width accordingly to satisfy the ratio.

More info on how this dimension ratio works can be found in the documentation.

回答2:

If you want to maximize the area with a dimension ratio and a max height, but you don't know if width or height is going to be adjusted, better don't to use layout_constraintDimensionRatio + layout_constraintHeight_max. They don't work well together.

Here I put my solution in the case you have an image 16:9 which will use full width while max height is not yet reached, otherwise it will respect max height, and width will be adjusted:

<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>

I used a custom ImageView I had in my gist which adjusts to aspect ratio, in order to avoid using layout_constraintDimensionRatio which causes the problem together with layout_constraintHeight_max

回答3:

Have you tried to add the tag maxHeight?

android:maxHeight="200dp"

来源：https://stackoverflow.com/questions/57204709/how-to-set-maxheight-over-dimensionratio-with-constraintlayout