
今天,和大家聊聊ImageView上的adjustViewBounds屬性。這個(gè)屬性其實(shí)用的也比較多,可有意思的是,網(wǎng)上對(duì)這個(gè)屬性的解釋?zhuān)蟛糠侄际清e(cuò)誤或者不準(zhǔn)確的。
今天這篇文章,就結(jié)合我個(gè)人的理解,和大家聊聊adjustViewBounds到底是什么意思。
首先,澄清兩個(gè)概念:ImageView和圖片
ImageView:Android里用來(lái)顯示圖片的控件。ImageView的長(zhǎng)寬可以設(shè)定為固定值:比如,100dp或match_parent。也可以設(shè)定為不固定值:wrap_content。
ImageView的比例:ImageView的長(zhǎng)/寬
圖片:要顯示在ImageView上的圖片,起長(zhǎng)寬由其物理size決定的。比如200px*300px等。
圖片的比例:圖片的長(zhǎng)/寬
總之,ImageView有自己的長(zhǎng)寬,也有自己的原始比例(長(zhǎng)/寬)。圖片也有自己的長(zhǎng)寬,有自己的原始比例。ImageView和圖片的長(zhǎng)寬及其比例其實(shí)是獨(dú)立的。圖片如何被顯示在ImageView上,由scaleType、adjustViewBounds等屬性共同決定。
網(wǎng)上對(duì)adjustViewBounds的錯(cuò)誤解釋
了解完兩個(gè)基本概念,接下來(lái)看看網(wǎng)上對(duì)adjustViewBounds都是怎么解釋的。
首先,大多數(shù)介紹adjustViewBounds的文章,都會(huì)先搬出Google的官方介紹:
Adjust the ImageView's bounds to preserve the aspect ration of its drawable.
然后對(duì)上面英文的解釋是:調(diào)整ImageView的界限來(lái)保持圖片縱橫比不變。
這個(gè)解釋是錯(cuò)誤的!
首先,adjustViewBounds不管是設(shè)置成true還是false,都是不會(huì)影響圖片本身的比例的(長(zhǎng)/寬)!注意,這里說(shuō)的是長(zhǎng)寬比例,而不是具體的長(zhǎng)和寬。目前為止,只有scaleType=FIT_XY的時(shí)候才會(huì)有可能影響到圖片的比例。
實(shí)際上,adjustViewBounds影響的是ImageView的比例(不是圖片的比例),所以,對(duì)于adjustViewBounds的定義應(yīng)該是這樣:
調(diào)整ImageView的邊界,使得ImageView和圖片有一樣的長(zhǎng)寬比例。
接下來(lái)我會(huì)用具體的例子給大家展示下adjustViewBounds的用法。
情況1,當(dāng)ImageView的寬高都是固定值的時(shí)候,adjustViewBounds屬性無(wú)效
看下面這個(gè)例子:
<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>
首先,我有一個(gè)ImageView,寬高都設(shè)成固定的值:1000px,這個(gè)ImageView的寬高比例就是1。
在這個(gè)ImageView上我要顯示一個(gè)圖片(image_300_400),寬300px,高400px,寬高比是3:4。
另外我給這個(gè)ImageView設(shè)置了紅色的背景,方便大家查看ImageView和圖片的關(guān)系。
在ImageView大小固定的時(shí)候,adjustViewBounds的值無(wú)論設(shè)成什么,效果都是下面的樣子:

通過(guò)上圖,大家可以清楚的看到:ImageView和圖片都分別保持了自己原始比例(1:1和3:4),因?yàn)槎叩谋壤煌?,所以圖片是不會(huì)撐滿(mǎn)ImageView的,紅色的部分就是ImageView沒(méi)有被圖片填滿(mǎn)的部分(ImageView的background是紅色)。
在這個(gè)例子里,圖片的比例雖然沒(méi)有變,但是被拉伸了,這是因?yàn)镮mageView的默認(rèn)scaleType是FIT_CENTER,這個(gè)就是FIT_CENTER的效果。關(guān)于ImageView的scaleType的說(shuō)明,可以參考這篇文章:圖文講解Android ImageView的ScaleType,幫你徹底搞明白
情況2,ImaegView一邊長(zhǎng)度固定,另一邊為wrap_content的情況
我把上面的例子稍微改下,把ImageView的高度改成wrap_content,adjustViewBounds設(shè)為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>
出來(lái)的效果是這樣的:

怎么樣,是不是和你想的不一樣?
要理解上面這個(gè)效果,要先理解ImageView的wrap_content是什么意思?
當(dāng)ImageView的某一個(gè)邊設(shè)置為wrap_content的時(shí)候,會(huì)根據(jù)內(nèi)容的實(shí)際大小來(lái)決定實(shí)際長(zhǎng)度。這里,就是根據(jù)圖片的實(shí)際長(zhǎng)度來(lái)決定。在這個(gè)例子中,圖片的實(shí)際的高度是400px,所以ImageView的寬高就是1000px和400px。再加上FIT_CENTER,呈現(xiàn)的效果就是這樣。
下面我們把adjustViewBounds設(shè)為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>
現(xiàn)在的效果變成這個(gè)樣子:

adjustViewBounds屬性終于生效了!因?yàn)檫@個(gè)值,ImageView需要和圖片有一樣的寬高比,所以這時(shí)候ImageView的高度為1000*400/300。ImageView的寬高比也變成了3:4,再加上FIT_CENTER,圖片可以完美的鋪滿(mǎn)整個(gè)ImageView!沒(méi)有一點(diǎn)紅色背景露出。這也是我們大多數(shù)情況下想要的效果。
情況3,當(dāng)ImageView的寬高都設(shè)置為wrap_content的情況
在這種情況下,adjustViewBounds也是無(wú)效的。
<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>
這時(shí)候的效果是這樣的:

前面說(shuō)了,wrap_content是用原始的圖片尺寸顯示,所以,這個(gè)時(shí)候ImageView的長(zhǎng)寬和原始圖片一樣,都是400px和300px。比例自然和圖片也一樣(4:3),所以這個(gè)時(shí)候圖片也可以鋪滿(mǎn)整個(gè)ImageView。
總結(jié):
綜上所述,adjustViewBounds只有在ImageView一邊固定,一邊為wrap_content的時(shí)候才有意義。設(shè)置為true的時(shí)候,可以讓ImageView的比例和原始圖片一樣,以達(dá)到讓圖片充滿(mǎn)的ImageView的效果。