引子

App上可能会加载各种宽高比的图片。理论上，我们即希望让图片保持宽高比展示，又想让图片可以等比例缩放。针对此问题我尝试过很多种方法，没有遇到特别完美的。今日不经意间，发现了ConstraintLayout貌似可以完美解决。

案例

这是一个500x745的图

500*745

layout.xml如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@mipmap/p4"
        app:layout_constraintDimensionRatio="h,500:745"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_margin="10dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

最终显示出的效果就是：

image.png

在宽度占满的情况下（上下左右间距10dp），保持宽高比为：500:745

如果想要效果再明显一点：
多放几个，改变一下实际宽度:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    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.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="100dp"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:scaleType="fitXY"
            android:src="@mipmap/p4"
            app:layout_constraintDimensionRatio="h,500:745"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="200dp"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:scaleType="fitXY"
            android:src="@mipmap/p4"
            app:layout_constraintDimensionRatio="h,500:745"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/iv1" />

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="300dp"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:scaleType="fitXY"
            android:src="@mipmap/p4"
            app:layout_constraintDimensionRatio="h,500:745"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/iv2" />


        <ImageView
            android:id="@+id/iv4"
            android:layout_width="400dp"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:scaleType="fitXY"
            android:src="@mipmap/p4"
            app:layout_constraintDimensionRatio="h,500:745"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/iv3" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</ScrollView>

效果

GIF.gif

我放了4张图，

• 只规定了宽度为100dp / 200dp / 300dp / 400dp,高度都是0dp，
• 使用constraintLayout的自定义属性：layout_constraintDimensionRatio="h,500:745"
  含义为：h高度自适应，宽高比为 500:745

完美解决方案。

思考

此方案的核心思想，是用ConstraintLayout把图片包裹起来，然后使用它的自定义属性 layout_constraintDimensionRatio 来指定宽高比。思想可行，但是用在实际项目代码中，会比较尴尬。
因为：很多ImageView的父容器不一定是ConstraintLayout，这就需要我们把单独给每一个ImageView包裹上一层ConstraintLayout。强迫症这么写一定会很难受。
所以，应该想办法构建一个自定义ViewGroup，支持单张图的 完美等比例缩放 写好了再放上例子.