Android使用ImageView.ScaleType實現(xiàn)圖片的縮放與裁剪功能
什么是 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控件的目標(biāo)寬高都是120dp,即寬高都是360x360。
FIT_XY
圖片完全填充 ImageView,不保持原始寬高比,可能會導(dǎo)致圖片拉伸或壓縮變形。本質(zhì)上使用 Matrix.ScaleToFit.FILL 來實現(xiàn),上面代碼中加上android:scaleType="fitXY",效果如下:

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

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

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

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

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

CENTER_INSIDE
等比縮小圖片,確保整個圖片顯示在 ImageView 里。如果圖片小于 ImageView,不會放大。上面代碼中加上android:scaleType="fitStart",效果如下:

MATRIX
完全由開發(fā)者控制,允許精確地設(shè)置圖片的縮放、旋轉(zhuǎn)、平移等變換。ScaleType.MATRIX不會自動進行縮放或平移,開發(fā)者需要通過 Matrix 來手動調(diào)整。默認上面代碼中加上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)
//應(yīng)用 Matrix 到 ImageView
imageView.imageMatrix = matrix
}
}
執(zhí)行效果:

可以看到結(jié)果中,圖片1 因為寬>高,所以會直接從上往下排完;而圖片2 寬<高,所以從上往下排列后,底部被裁剪了;圖片3 寬等于高,所以還是可以完全展示。
結(jié)論
- 以
FIT_開頭的4種(fitCenter、fitXY、fitStart、fitEnd),都可以對圖片進行縮放; - 以
CENTER_開頭的3種(center、centerCrop、centerInside),都可以居中顯示;圖片中心點與ImageView中心點重疊; fitCenter和centerInside都可以居中展示,兩者區(qū)別:centerInside 只縮小,不放大;fitCenter 可放大可縮小。MATRIX是最靈活的 ScaleType,能夠完全控制圖片的縮放、平移和旋轉(zhuǎn),適合需要自定義展示的場景。
| ScaleType | 縮放方式 | 是否填滿 | ImageView是否裁剪 | 對齊方式 |
|---|---|---|---|---|
| MATRIX | 自定義 | 否 | 否 | 由 Matrix 決定 |
| FIT_XY | 拉伸填充 | 是(可能會變形) | 否 | 填充整個 ImageView |
| FIT_START | 等比縮放 | 否 | 否 | 頂部/左側(cè)對齊 |
| FIT_CENTER | 等比縮放 | 否 | 否 | 居中對齊 |
| FIT_END | 等比縮放 | 否 | 否 | 底部/右側(cè)對齊 |
| CENTER | 不縮放 | 否 | 可能裁剪 | 居中對齊 |
| CENTER_CROP | 等比放大 | 是 | 可能裁剪 | 居中對齊 |
| CENTER_INSIDE | 等比縮小 | 否 | 否 | 居中對齊 |
選擇合適的 ScaleType,可以大大提高圖片顯示的效果和用戶體驗。理解并靈活應(yīng)用這些選項,可以幫助我們更好地處理不同的圖片展示需求。
以上就是Android使用ImageView.ScaleType實現(xiàn)圖片的縮放與裁剪功能的詳細內(nèi)容,更多關(guān)于Android ImageView.ScaleType圖片縮放與裁剪的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android系統(tǒng)優(yōu)化Ninja加快編譯
這篇文章主要為大家介紹了Android系統(tǒng)優(yōu)化使用Ninja加快編譯示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08
Android中Fragmen首選項使用自定義的ListPreference的方法
Android中Fragmen的首選項可以使用自定義的ListPreference,這樣Fragment的PreferenceFragment就可以更方便地保存配置信息,需要的朋友可以參考下2016-05-05

