提高班1:ImageView中ScaleType屬性詳解,配圖詳解

三藏師父的柒徒弟發表於2019-04-15
前言:
複製程式碼

    為什麼我的第一期提高班準備做這個專題呢?針對初學者哈,相信很多初學的兄弟對這個屬性的熟悉度是暫時及格的狀態,現在的網路框架,像Glide,Picasso,這些框架中都是封裝好了對圖片的載入,而且現在網上還有很多對Glide,Picasso這些框架的封裝好的工具類,也就是說,我們在程式碼中給ImageView載入圖片時,直接一行程式碼搞定,比如:GlideUtils.loadPic(引數1,引數2,引數......),這確實方便好多,反正圖片載入出來了啊,還載入的挺完美,快看,還沒有白邊哎......但是其中對ImageView屬性的設定,無情的隱藏了,比如ScaleType。

    這個ScaleType到底有什麼用呢?兄弟們有沒有發現,在載入圖片的時候,有些圖片顯示會留“上下白邊”或者“左右白邊”,有些圖片顯示會變形,還有些圖片顯示會被擷取,就像你自己的全身照,在手機上顯示的時候,發現頭沒啦,示例如下,請看那位“呆萌的獼猴桃”同學:

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

正文部分:
複製程式碼

一、ScaleType的設定的值產生的變換結果,和哪些因素有關?

ScaleType的設定值和ImageView搭配起來產生的化學反應為什麼讓照片中的頭沒了呢?即ScaleType的設定的值產生的變換結果,和哪些因素有關?

因素只有兩個:
1.ImageView的寬高。
2.圖片的寬高----這也可以叫圖片的解析度,寬*高=圖片解析度。

與以上兩個因素相對情況有以下3種:
(以下示例的ImageView寬高為100dp*100dp,手機為1280 * 720,所以換算後,1dp=2px,所以下述示例的圖片的寬高也可以看做為----這塊不懂得,請轉向我的:提高班2:螢幕適配詳解)
第一種:ImageView的寬高>=圖片寬高:

提高班1:ImageView中ScaleType屬性詳解,配圖詳解
上圖寬高為72px*32px

第二種:ImageView的寬高<圖片寬高:

提高班1:ImageView中ScaleType屬性詳解,配圖詳解
上圖寬高:480px*800px
第三種:ImageView的寬>圖片的寬,ImageView的高 < 圖片的高
或者ImageView的寬<圖片的寬,ImageView的高 > 圖片的高
即圖片的1條 > ImageView,另一條邊 < ImageView。

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

上圖寬高:100px*500px

好了,情況,就是這麼個情況,而ScaleType的屬性各個值就是對上述的三種可能出現的情況分別做處理。

二、ScaleType屬性值詳解
1.android:scaleType="matrix"
matrix表示原圖從ImageView的左上角開始繪製,如果原圖大於ImageView,那麼多餘的部分則剪裁掉,如果原圖小於ImageView,那麼對原圖不做任何處理,直接全部展示。
示例:(這裡說明一下,為了好區分和展示效果,下面的示例圖,包括scaleType其他值的示例圖,紅色是ImageView的背景色,藍色Activity的背景色)

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

2.android:scaleType="fitXY",圖片可能變形,必須完全填充控制元件。
fitXY的目標是填充整個ImageView,,它需要對圖片進行一些縮放操作,如果圖片的寬 > ImageView的寬,則圖片在寬方向上需要縮放到ImageView的寬度;如果圖片的寬 < ImageView的寬,則圖片在寬方向上需要擴張到ImageView的寬度;這個規則同理與高方向。----最終造成的結果:圖片變形,並且填充ImageView
示例:

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

3.android:scaleType="center"
以原圖的幾何中心點和ImagView的幾何中心點為基準,按圖片的原來size居中顯示,不縮放,當圖片長/寬超過View的長/寬,則擷取圖片的居中部分顯示ImageView的size.當圖片小於View 的長寬時,只顯示圖片的size,不放大。關鍵字:不縮放,截圖

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

4.android:scaleType="centerInside"
全部顯示圖片。 以原圖的幾何中心點和ImagView的幾何中心點為基準,將圖片的內容完整居中顯示,不放大,只縮小。當原圖>imageView時,縮小原圖,使其小於等於ImageView,顯示全圖(類似fitCenter);當原圖 < imageView時,不放大,居中顯示原圖。

示例圖:

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

5.android:scaleType="centerCrop" 按照下述規則完全填充控制元件,超出部分會被裁剪。
(1)當圖片大於ImageView的寬高:以圖片的中心點和ImageView的中心點為基準,按比例縮小圖片,直到圖片的寬高有一邊等於ImageView的寬高,則對於另一邊,圖片的長度大於或等於ImageView的長度,最後用ImageView的大小居中擷取該圖片。 (2)當圖片小於ImageView的寬高:以圖片的中心店和ImageView的中心點為基準,按比例擴大圖片,直到圖片的寬高大於或等於ImageView的寬高,並按ImageView的大小居中擷取該圖片。 最終結論: 1.圖片的大小肯定是>=ImageView的大小; 2.在放大或者縮小的最終節點為:圖片的寬和高比ImageView的寬和高都要大的時候,比如一張圖片寬>高,ImageView的寬高都是100dp,在圖片擴大或者縮小的過程中,肯定是圖片寬的擴大或者縮小的程度先>=ImageView,但是這個時候,高擴大或者縮小的程度肯定是<=ImageView的,那麼這個時候,圖片的擴大和縮小不會停止,直到圖片的高>=ImageView的時候,才會停止擴大或者縮小。 3.圖片會填滿整個控制元件,圖片可能會被裁剪。
示例圖:

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

6.fitXXX系列
android:scaleType="fitCenter"
android:scaleType="fitStart"
android:scaleType="fitEnd"
完全顯示圖片,圖片不會被裁剪
(1).fitCenter:
把圖片按比例擴大(縮小)到View的寬度(短的邊),居中顯示。顯示全部圖片,通過按比例縮小(擴大)原來的size使得圖片長(寬)等於或小於ImageView的長(寬)。關鍵字:按比例縮放,居中顯示全圖,不裁剪。----圖片肯定會全部顯示。

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

(2).fitStart:
把圖片按比例擴大(縮小)到View的寬度,顯示在View的上部分位置。關鍵字:按比例縮放,靠左顯示全圖,不裁剪----以左上角為基準點。

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

(3).fitEnd:
把圖片按比例擴大(縮小)到View的寬度,顯示在View的下部分位置。關鍵字:按比例縮放,靠右顯示全圖,不裁剪----以右下角為基準點。

提高班1:ImageView中ScaleType屬性詳解,配圖詳解

相關文章