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控件的目標寬高都是120dp,即寬高都是360x360。
FIT_XY
圖片完全填充 ImageView,不保持原始寬高比,可能會導致圖片拉伸或壓縮變形。本質(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-08Android中Fragmen首選項使用自定義的ListPreference的方法
Android中Fragmen的首選項可以使用自定義的ListPreference,這樣Fragment的PreferenceFragment就可以更方便地保存配置信息,需要的朋友可以參考下2016-05-05