今天,和大家聊聊ImageView上的adjustViewBounds屬性。這個屬性其實用的也比較多,可有意思的是,網上對這個屬性的解釋,大部分都是錯誤或者不準確的。
今天這篇文章,就結合我個人的理解,和大家聊聊adjustViewBounds到底是什么意思。
首先,澄清兩個概念:ImageView和圖片
ImageView:Android里用來顯示圖片的控件。ImageView的長寬可以設定為固定值:比如,100dp或match_parent。也可以設定為不固定值:wrap_content。
ImageView的比例:ImageView的長/寬
圖片:要顯示在ImageView上的圖片,起長寬由其物理size決定的。比如200px*300px等。
圖片的比例:圖片的長/寬
總之,ImageView有自己的長寬,也有自己的原始比例(長/寬)。圖片也有自己的長寬,有自己的原始比例。ImageView和圖片的長寬及其比例其實是獨立的。圖片如何被顯示在ImageView上,由scaleType、adjustViewBounds等屬性共同決定。
網上對adjustViewBounds的錯誤解釋
了解完兩個基本概念,接下來看看網上對adjustViewBounds都是怎么解釋的。
首先,大多數介紹adjustViewBounds的文章,都會先搬出Google的官方介紹:
Adjust the ImageView's bounds to preserve the aspect ration of its drawable.
然后對上面英文的解釋是:調整ImageView的界限來保持圖片縱橫比不變。
這個解釋是錯誤的!
首先,adjustViewBounds不管是設置成true還是false,都是不會影響圖片本身的比例的(長/寬)!注意,這里說的是長寬比例,而不是具體的長和寬。目前為止,只有scaleType=FIT_XY
的時候才會有可能影響到圖片的比例。
實際上,adjustViewBounds影響的是ImageView的比例(不是圖片的比例),所以,對于adjustViewBounds的定義應該是這樣:
調整ImageView的邊界,使得ImageView和圖片有一樣的長寬比例。
接下來我會用具體的例子給大家展示下adjustViewBounds的用法。
情況1,當ImageView的寬高都是固定值的時候,adjustViewBounds屬性無效
看下面這個例子:
<ImageView
android:layout_width="1000px"
android:layout_height="1000px"
android:background="@android:color/holo_red_light"
android:adjustViewBounds="false"
android:layout_gravity="center"
android:src="@drawable/image_300_400">
</ImageView>
首先,我有一個ImageView,寬高都設成固定的值:1000px,這個ImageView的寬高比例就是1。
在這個ImageView上我要顯示一個圖片(image_300_400),寬300px,高400px,寬高比是3:4。
另外我給這個ImageView設置了紅色的背景,方便大家查看ImageView和圖片的關系。
在ImageView大小固定的時候,adjustViewBounds的值無論設成什么,效果都是下面的樣子:
通過上圖,大家可以清楚的看到:ImageView和圖片都分別保持了自己原始比例(1:1和3:4),因為二者的比例不同,所以圖片是不會撐滿ImageView的,紅色的部分就是ImageView沒有被圖片填滿的部分(ImageView的background是紅色)。
在這個例子里,圖片的比例雖然沒有變,但是被拉伸了,這是因為ImageView的默認scaleType是FIT_CENTER,這個就是FIT_CENTER的效果。關于ImageView的scaleType的說明,可以參考這篇文章:圖文講解Android ImageView的ScaleType,幫你徹底搞明白
情況2,ImaegView一邊長度固定,另一邊為wrap_content的情況
我把上面的例子稍微改下,把ImageView的高度改成wrap_content,adjustViewBounds設為false:
<ImageView
android:layout_width="1000px"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:adjustViewBounds="false"
android:layout_gravity="center"
android:src="@drawable/image_300_400">
</ImageView>
出來的效果是這樣的:
怎么樣,是不是和你想的不一樣?
要理解上面這個效果,要先理解ImageView的wrap_content是什么意思?
當ImageView的某一個邊設置為wrap_content的時候,會根據內容的實際大小來決定實際長度。這里,就是根據圖片的實際長度來決定。在這個例子中,圖片的實際的高度是400px,所以ImageView的寬高就是1000px和400px。再加上FIT_CENTER,呈現的效果就是這樣。
下面我們把adjustViewBounds設為true試試,
<ImageView
android:layout_width="1000px"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:src="@drawable/image_300_400">
</ImageView>
現在的效果變成這個樣子:
adjustViewBounds屬性終于生效了!因為這個值,ImageView需要和圖片有一樣的寬高比,所以這時候ImageView的高度為1000*400/300。ImageView的寬高比也變成了3:4,再加上FIT_CENTER,圖片可以完美的鋪滿整個ImageView!沒有一點紅色背景露出。這也是我們大多數情況下想要的效果。
情況3,當ImageView的寬高都設置為wrap_content的情況
在這種情況下,adjustViewBounds也是無效的。
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:adjustViewBounds="true"
android:layout_gravity="center"
android:src="@drawable/image_300_400">
</ImageView>
這時候的效果是這樣的:
前面說了,wrap_content是用原始的圖片尺寸顯示,所以,這個時候ImageView的長寬和原始圖片一樣,都是400px和300px。比例自然和圖片也一樣(4:3),所以這個時候圖片也可以鋪滿整個ImageView。
總結:
綜上所述,adjustViewBounds只有在ImageView一邊固定,一邊為wrap_content的時候才有意義。設置為true的時候,可以讓ImageView的比例和原始圖片一樣,以達到讓圖片充滿的ImageView的效果。