什么是 ImageView.ScaleType？

ImageView.ScaleType 是一個(gè)枚舉類，它定義了不同的縮放方式，用于控制圖片如何在 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>

我的測(cè)試機(jī)上density = 3，而ImageView控件的目標(biāo)寬高都是120dp，即寬高都是360x360。

FIT_XY

圖片完全填充 ImageView，不保持原始寬高比，可能會(huì)導(dǎo)致圖片拉伸或壓縮變形。本質(zhì)上使用 Matrix.ScaleToFit.FILL 來(lái)實(shí)現(xiàn)，上面代碼中加上android:scaleType="fitXY"，效果如下：

FIT_START

等比縮放圖片，使其寬高都不超過 ImageView 的尺寸，然后左上角對(duì)齊。上面代碼中加上android:scaleType="fitStart"，效果如下：

FIT_CENTER

等比縮放圖片，使其寬高都不超過 ImageView 的尺寸，然后居中顯示。上面代碼中加上android:scaleType="fitCenter"，效果如下：

FIT_END

等比縮放圖片，使其寬高都不超過 ImageView 的尺寸，然后對(duì)齊到底部或右側(cè)。上面代碼中加上android:scaleType="fitEnd"，效果如下：

CENTER

不縮放圖片，直接居中顯示，如果圖片大于 ImageView，超出的部分不會(huì)顯示。上面代碼中加上android:scaleType="center"，效果如下：

CENTER_CROP

等比放大圖片，確保 ImageView 填滿，超出的部分裁剪掉，居中對(duì)齊，適用于頭像、封面圖等，填滿 ImageView 且保持圖片比例。上面代碼中加上android:scaleType="centerCrop"，效果如下：

CENTER_INSIDE

等比縮小圖片，確保整個(gè)圖片顯示在 ImageView 里。如果圖片小于 ImageView，不會(huì)放大。上面代碼中加上android:scaleType="fitStart"，效果如下：

MATRIX

完全由開發(fā)者控制，允許精確地設(shè)置圖片的縮放、旋轉(zhuǎn)、平移等變換。ScaleType.MATRIX不會(huì)自動(dòng)進(jìn)行縮放或平移，開發(fā)者需要通過 Matrix 來(lái)手動(dòng)調(diào)整。默認(rèn)上面代碼中加上android:scaleType="matrix"，效果如下：

特殊需求：從頂部裁剪圖片

在某些情況下，你可能希望圖片從頂部開始展示，裁剪掉底部溢出的部分。默認(rèn)的 CENTER_CROP 會(huì)居中裁剪圖片，但如果希望圖片從頂部開始裁剪，可以使用 scaleType="matrix"，然后通過 Matrix 來(lái)控制，代碼如下：

imageView.post {
    val drawable = imageView.drawable
    drawable?.let {
        val matrix = Matrix()
        //計(jì)算縮放比例，確保寬度填充滿 ImageView
        val scale = imageView.width.toFloat() / it.intrinsicWidth
        matrix.setScale(scale, scale)
        //不平移，確保圖片從頂部開始展示
        matrix.postTranslate(0f, 0f)
        //應(yīng)用 Matrix 到 ImageView
        imageView.imageMatrix = matrix
    }
}

執(zhí)行效果：

可以看到結(jié)果中，圖片1 因?yàn)閷?gt;高，所以會(huì)直接從上往下排完；而圖片2 寬<高，所以從上往下排列后，底部被裁剪了；圖片3 寬等于高，所以還是可以完全展示。

結(jié)論

• 以FIT_開頭的4種(fitCenter、fitXY、fitStart、fitEnd)，都可以對(duì)圖片進(jìn)行縮放；
• 以CENTER_開頭的3種(center、centerCrop、centerInside)，都可以居中顯示；圖片中心點(diǎn)與ImageView中心點(diǎn)重疊；
• fitCenter 和 centerInside 都可以居中展示，兩者區(qū)別：centerInside 只縮小，不放大；fitCenter 可放大可縮小。
• MATRIX 是最靈活的 ScaleType，能夠完全控制圖片的縮放、平移和旋轉(zhuǎn)，適合需要自定義展示的場(chǎng)景。

選擇合適的 ScaleType，可以大大提高圖片顯示的效果和用戶體驗(yàn)。理解并靈活應(yīng)用這些選項(xiàng)，可以幫助我們更好地處理不同的圖片展示需求。

以上就是Android使用ImageView.ScaleType實(shí)現(xiàn)圖片的縮放與裁剪功能的詳細(xì)內(nèi)容，更多關(guān)于Android ImageView.ScaleType圖片縮放與裁剪的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論