當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

ImageView的scaleType详解

發(fā)布時(shí)間：2025/3/8 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 ImageView的scaleType详解小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 網(wǎng)上的誤解

不得不說(shuō)很失望，到網(wǎng)上搜索了幾篇帖子，然后看到的都是相互復(fù)制粘貼，就算不是粘貼的，有幾篇還是只是拿著自己的幾個(gè)簡(jiǎn)單例子，然后做測(cè)試，這種以一種現(xiàn)象結(jié)合自己的猜測(cè)便得出結(jié)論，其實(shí)只是想由不完全歸納得出完全歸納的結(jié)果，然而很令人失望，原因是：數(shù)據(jù)取樣過(guò)于片面，只是單純的測(cè)試了一種情況，導(dǎo)致大家對(duì)這些帖子相當(dāng)失望。

2. scaleType存在的形式

1） CENTER

2） CENTER_CROP

3） CENTER_INSIDE

4） FIT_CENTER

5） FIT_END

6） FIT_START

7） FIT_XY

8） MATRIX

3.Google的官方解釋以及我的個(gè)人分析?

type	google官方說(shuō)明	我的解釋
CENTER?	Center the image in the view, but perform no scaling.?	劇中顯示，不做縮放
CENTER_CROP?	Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).?	劇中顯示，等比例縮放，兩邊都大于或等于對(duì)示窗口對(duì)應(yīng)的那一邊
CENTER_INSIDE?	Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).?	劇中顯示，等比例縮放，兩邊都小于或等于顯示窗口對(duì)應(yīng)的那一邊
FIT_CENTER?	Scale the image using?CENTER. CENTER: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.	劇中顯示，等比例縮放，兩邊至少有一邊等于顯示窗口對(duì)應(yīng)的那一邊，另一邊小于或等于顯示窗口對(duì)應(yīng)的那一邊
FIT_END?	Scale the image using?END END: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END aligns the result to the right and bottom edges of dst.	圖片右下角和窗口右下角對(duì)其，等比例縮放，兩邊至少有一邊等于顯示窗口對(duì)應(yīng)的那一邊，另一邊小于或等于顯示窗口對(duì)應(yīng)的那一邊
FIT_START?	Scale the image using?START START: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.	圖片左上角和窗口左上角對(duì)其，等比例縮放，兩邊至少有一邊等于顯示窗口對(duì)應(yīng)的那一邊，另一邊小于或等于顯示窗口對(duì)應(yīng)的那一邊
FIT_XY?	Scale the image using?FILL FILL: Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src.	不等比例縮放，x縮放到等于等于顯示窗口對(duì)應(yīng)的那一邊，y縮放到等于顯示窗口對(duì)應(yīng)的那一邊
MATRIX?	Scale using the image matrix when drawing.?	?圖片左上角和窗口左上角對(duì)其，不做縮放處理

4.?數(shù)據(jù)測(cè)試

為了表明測(cè)試的準(zhǔn)確性，我準(zhǔn)備了兩組數(shù)據(jù)，一組是圖片的分辨率高于ImageView自身的寬高，另外一組是圖片的分辨率低于ImageView自身的寬高，這樣才具有測(cè)試的完整性。

第一組： 圖片的分辨率高于ImageView自身的寬高

原圖：屏幕截圖：尺寸：1080*1920 即1080p的屏幕截圖

將各組數(shù)據(jù)分別做顯示，為了表示特點(diǎn)，將ImageView的背景設(shè)置為黑色，ImageView的大小設(shè)置為100dp*100dp

行\列	1	2	3
1	center	centerCrop	centerInside
2	fitCenter	fitEnd	fitXY
3	fitStart	matrix	?

咱們逐個(gè)開始看

CENTER ：首先將圖片放置到了中間，然后能夠顯示多少，就顯示多少，圖片不做處理，因而圖片只是顯示了中間支付寶錢包和快牙圖標(biāo)的一部分

CENTERCROP ：同樣先將圖片放置到了中間，然后開始等比例伸縮圖片，直到兩邊有一邊適配了邊界，由于圖片高度大于寬度，因而首先高度適配了，但是此時(shí)寬度還夠不著邊界，不符合上面表格的要求：高度和寬度要均大于等于對(duì)應(yīng)ImageView的高度和寬度，因而要繼續(xù)伸縮至寬度達(dá)到邊界，所以寬度可以顯示完整，而高度顯示不完整

CENTERINSIDE ：同樣現(xiàn)將圖片放置到了中間，將圖片伸縮（如果圖片小于ImageView的寬高，那么是不伸縮的），直到兩側(cè)同時(shí)小于或者等于圖片的邊界，由于寬度會(huì)先適配，高度后適配，因而兩側(cè)會(huì)顯示出黑色的背景

FIT_CENTER :　將圖片放置到ImageView的中間，保持圖片的寬高比，圖片由小變大一步一步擴(kuò)大，直到一個(gè)方向已經(jīng)適配，由于高度大于寬度，因而高度會(huì)先適配，故兩側(cè)會(huì)出現(xiàn)黑色的背景

FIT_END ：將圖片放置到ImageView的右下角，保持圖片的寬高比，圖片由小變大一部一部擴(kuò)大，直到一個(gè)方向已經(jīng)適配，高度大于寬度，高度先適配，故左側(cè)出現(xiàn)黑色背景

FIT_XY ：不保持圖片的寬高比進(jìn)行伸縮，從ImageView的中心，由小到大，一部一部擴(kuò)大，直到兩個(gè)方向都已經(jīng)適配

MATRIX ：不熟悉，不做解釋?

第二組測(cè)試數(shù)據(jù)：圖片分辨率小于ImageView大小的各種數(shù)據(jù)?

原圖：分辨率： 165*220?

ImageView大小： 200dp*200dp?

類型以及結(jié)果：?

CENTER: ???

? ? ? 2. CENTER_CROP: 同樣：由于會(huì)縮放，圖片高度大于寬度，因而最終的效果是寬度填充滿，而高度上部分顯示不出來(lái)??

? ? ? 3. CENTER_INSIDE : 剛才已經(jīng)提到，如果圖片小于屏幕的大小，那么CENTER_INSIDE是不會(huì)做縮放的

此時(shí)可能有人會(huì)提出疑問(wèn)，假如說(shuō)圖片一側(cè)大于屏幕的大小，而另外一側(cè)小于屏幕的大小，那么會(huì)怎么處理呢？處理的方式還是要符合原則，最終的結(jié)果是兩側(cè)都要小于等于屏幕對(duì)應(yīng)的尺寸，就是在ImageView的大小內(nèi)，顯示完整這個(gè)圖片，并且是按照等比例縮放的

，以這個(gè)圖片為例：

用Nexus5（分辨率為1080*1920）做測(cè)試，假如說(shuō)ImageView的大小為60dp*60dp，Nexus5下的大小為： 180px*180px

而圖片的大小：165px*220px，這時(shí)圖片的高度已經(jīng)超過(guò)了ImageView的高度，所以會(huì)將高度縮放到ImageView的大小，因而出現(xiàn)如下的效果

? ? ?4. FIT_CENTER :?

? ? ?5.?FIT_END:

? ? ?6.?FIT_START

? ? ?7. MATRIX

總結(jié)

以上是生活随笔為你收集整理的ImageView的scaleType详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： javascript OOP（下）（九）
下一篇：这是一个UIImage集合类，可以很方便