Android使用ImageView.ScaleType实现图片的缩放与裁剪功能_Android

什么是 imageview.scaletype？

imageview.scaletype 是一个枚举类，它定义了不同的缩放方式，用于控制图片如何在 imageview 中展示。

public enum scaletype {
      matrix      (0),
      fit_xy      (1),
      fit_start   (2),
      fit_center  (3),
      fit_end     (4),
      center      (5),
      center_crop (6),
      center_inside (7);

      scaletype(int ni) {
         nativeint = ni;
      }
      final int nativeint;
}

先看下源图：

图片1尺寸是1200x857，且宽 > 高；图片2尺寸967x1301，且宽<高；图片3尺寸60x60，且宽=高。 xml代码如下：

<linearlayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerinparent="true"
    android:orientation="horizontal"
    android:gravity="center">

    <imageview
        android:id="@+id/iv_1"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/gray_normal"
        android:src="@drawable/icon_cat_w" />

    <imageview
        android:id="@+id/iv_2"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="@color/gray_normal"
        android:layout_marginstart="10dp"
        android:src="@drawable/icon_cat_h" />

    <imageview
        android:id="@+id/iv_3"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginstart="10dp"
        android:background="@color/gray_normal"
        android:src="@drawable/chat_ask_message_error" />
</linearlayout>

我的测试机上density = 3，而imageview控件的目标宽高都是120dp，即宽高都是360x360。

fit_xy

图片完全填充 imageview，不保持原始宽高比，可能会导致图片拉伸或压缩变形。本质上使用 matrix.scaletofit.fill 来实现，上面代码中加上android:scaletype="fitxy"，效果如下：

fit_start

等比缩放图片，使其宽高都不超过 imageview 的尺寸，然后左上角对齐。上面代码中加上android:scaletype="fitstart"，效果如下：

fit_center

等比缩放图片，使其宽高都不超过 imageview 的尺寸，然后居中显示。上面代码中加上android:scaletype="fitcenter"，效果如下：

fit_end

等比缩放图片，使其宽高都不超过 imageview 的尺寸，然后对齐到底部或右侧。上面代码中加上android:scaletype="fitend"，效果如下：

center

不缩放图片，直接居中显示，如果图片大于 imageview，超出的部分不会显示。上面代码中加上android:scaletype="center"，效果如下：

center_crop

等比放大图片，确保 imageview 填满，超出的部分裁剪掉，居中对齐，适用于头像、封面图等，填满 imageview 且保持图片比例。上面代码中加上android:scaletype="centercrop"，效果如下：

center_inside

等比缩小图片，确保整个图片显示在 imageview 里。如果图片小于 imageview，不会放大。上面代码中加上android:scaletype="fitstart"，效果如下：

matrix

完全由开发者控制，允许精确地设置图片的缩放、旋转、平移等变换。scaletype.matrix不会自动进行缩放或平移，开发者需要通过 matrix 来手动调整。默认上面代码中加上android:scaletype="matrix"，效果如下：

特殊需求：从顶部裁剪图片

在某些情况下，你可能希望图片从顶部开始展示，裁剪掉底部溢出的部分。默认的 center_crop 会居中裁剪图片，但如果希望图片从顶部开始裁剪，可以使用 scaletype="matrix"，然后通过 matrix 来控制，代码如下：

imageview.post {
    val drawable = imageview.drawable
    drawable?.let {
        val matrix = matrix()
        //计算缩放比例，确保宽度填充满 imageview
        val scale = imageview.width.tofloat() / it.intrinsicwidth
        matrix.setscale(scale, scale)
        //不平移，确保图片从顶部开始展示
        matrix.posttranslate(0f, 0f)
        //应用 matrix 到 imageview
        imageview.imagematrix = matrix
    }
}

执行效果：

可以看到结果中，图片1 因为宽>高，所以会直接从上往下排完；而图片2 宽<高，所以从上往下排列后，底部被裁剪了；图片3 宽等于高，所以还是可以完全展示。

结论

以fit_开头的4种(fitcenter、fitxy、fitstart、fitend)，都可以对图片进行缩放；
以center_开头的3种(center、centercrop、centerinside)，都可以居中显示；图片中心点与imageview中心点重叠；
fitcenter 和 centerinside 都可以居中展示，两者区别：centerinside 只缩小，不放大；fitcenter 可放大可缩小。
matrix 是最灵活的 scaletype，能够完全控制图片的缩放、平移和旋转，适合需要自定义展示的场景。

scaletype	缩放方式	是否填满	imageview是否裁剪	对齐方式
matrix	自定义	否	否	由 matrix 决定
fit_xy	拉伸填充	是（可能会变形）	否	填充整个 imageview
fit_start	等比缩放	否	否	顶部/左侧对齐
fit_center	等比缩放	否	否	居中对齐
fit_end	等比缩放	否	否	底部/右侧对齐
center	不缩放	否	可能裁剪	居中对齐
center_crop	等比放大	是	可能裁剪	居中对齐
center_inside	等比缩小	否	否	居中对齐