Android ImageView中scaleType屬性的理解

1.概念

scaleType主要是根據(jù)ImagView設(shè)置的長(zhǎng)寬大小來適配圖片的顯示，達(dá)到預(yù)期的效果。

2.屬性

近期：fitCenter、fitXY、fitStart、fitEnd、centerCrop、center、centerInside、matrix
早期：fit_center、fit_xy、fit_start、fit_end、center_crop、center、center_inside、matrix

3.效果測(cè)試

3.1 首先查看默認(rèn)情況和android:scaleType="fitCenter"對(duì)比

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:src="@drawable/demo" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="fitCenter"
            android:src="@drawable/demo" />

    </LinearLayout>

</LinearLayout>
fitCenter.png

根據(jù)效果圖可以看出，在默認(rèn)和android:scaleType="fitCenter"情況下，兩者的樣式一樣。**

3.2 android:scaleType="fitXY" 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="fitXY"
            android:src="@drawable/demo" />
</LinearLayout>
fitXY.png

該屬性是適配xy（長(zhǎng)寬），根據(jù)圖片任意拉伸長(zhǎng)寬，已達(dá)到ImageView設(shè)置的長(zhǎng)寬，這種方式很容易導(dǎo)致圖片失真，效果非常差。

3.3 android:scaleType="fitStart" 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="fitStart"
            android:src="@drawable/demo" />
</LinearLayout>
fitStart.png

在這種情況下，圖片會(huì)進(jìn)行左上排列。當(dāng)圖片的長(zhǎng)度小于ImageView的長(zhǎng)度，會(huì)居左排布，右邊會(huì)空白留出空白；當(dāng)圖片的高度小于ImageView的高度，會(huì)居上排布，下邊會(huì)留出空白；如果圖片的長(zhǎng)度和寬度分別都小于ImageView的長(zhǎng)度和寬度，則居左上排布，右邊和下邊都會(huì)留出空白。上圖的案例充分說明了，圖片的高度小于ImageView的高度（圖片的高度小于200dp）。

3.4 android:scaleType="fitEnd" 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="fitEnd"
            android:src="@drawable/demo" />
</LinearLayout>
fitEnd.png

在這種情況下，圖片會(huì)進(jìn)行右下排列。當(dāng)圖片的長(zhǎng)度小于ImageView的長(zhǎng)度，會(huì)居右排布，左邊會(huì)空白留出空白；當(dāng)圖片的高度小于ImageView的高度，會(huì)居下排布，上邊會(huì)留出空白；如果圖片的長(zhǎng)度和寬度分別都小于ImageView的長(zhǎng)度和寬度，則居右下排布，左邊和上邊都會(huì)留出空白。上圖的案例充分說明了，圖片的高度小于ImageView的高度（圖片的高度小于200dp）。

3.5 android:scaleType="centerCrop" 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="centerCrop"
            android:src="@drawable/demo" />
</LinearLayout>
centerCrop.png

觀察效果圖可以發(fā)現(xiàn)這個(gè)效果還是非常實(shí)用的，在大多數(shù)情況下，我們都會(huì)用這個(gè)屬性進(jìn)行圖片布局。當(dāng)然這個(gè)屬性和android:scaleType="fitXY"有相似之處，下邊簡(jiǎn)單給大家分析一下。

android:scaleType="fitXY"是“硬”拉伸，為什么是硬拉伸，當(dāng)一個(gè)圖片的長(zhǎng)度不滿足ImageView的長(zhǎng)度時(shí)，就直接拉伸長(zhǎng)度，寬度不變的，這樣就會(huì)導(dǎo)致圖片嚴(yán)重影響效果，同理當(dāng)一個(gè)圖片的寬度不滿足Imag的寬度時(shí)，就直接拉伸寬度，長(zhǎng)度保持不變。這樣圖片只是單方向拉伸。這時(shí)會(huì)有同學(xué)說如果長(zhǎng)度和寬度都不滿足Imag時(shí)會(huì)怎樣，一樣的，長(zhǎng)度和寬度都會(huì)拉伸，但是拉伸的比例不是相等的，展現(xiàn)出來的圖片效果非常差。
android:scaleType="centerCrop"是“柔”拉伸，是根據(jù)圖片進(jìn)行等比例拉伸，當(dāng)長(zhǎng)度滿足但寬度不滿足ImageView時(shí)，寬度會(huì)進(jìn)行拉伸同時(shí)長(zhǎng)度也會(huì)等比例拉伸，這種情況下不會(huì)導(dǎo)致圖片失真，但是會(huì)在最左和最右方向上丟失部分顯示，同樣的當(dāng)長(zhǎng)度不滿足但寬度滿足ImageView時(shí)，長(zhǎng)度會(huì)進(jìn)行拉伸同時(shí)高度也會(huì)等比例拉伸，但是會(huì)在最上和最下方向上丟失部分顯示。
總的來說，android:scaleType="centerCrop"可以簡(jiǎn)單用一例子說明，就是我們點(diǎn)擊圖片進(jìn)行放大的時(shí)候，不管你怎樣放大或者縮小，圖片都是在長(zhǎng)度和寬度上等比例放大縮小。

fitXY_centerCrop.png

對(duì)比效果圖，雖然android:scaleType="fitXY"在圖片上沒有丟失顯示，但是圖片嚴(yán)重拉伸，盡管android:scaleType="centerCrop"在左右方向上丟失部分顯示，但是總體效果比android:scaleType="fitXY"好很多。

3.6 android:scaleType="center" 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="center"
            android:src="@drawable/demo" />

    </LinearLayout>
center.png

圖片居中顯示，但是不進(jìn)行縮放。如果圖片過大，則只能部分顯示，超出ImageView的部分無法顯示。

3.7 android:scaleType="center_inside" 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="centerInside"
            android:src="@drawable/demo" />

    </LinearLayout>
centerInside.png

圖片居中顯示，如果圖片較小時(shí)，直接顯示原圖；如果圖片較大時(shí)，將圖片按比例縮放，使得長(zhǎng)邊達(dá)到ImageVie邊界(“長(zhǎng)邊”指從小放大過程中先達(dá)到ImageView邊界的邊，反之，為短邊)，保證圖像完全顯示在ImageView中。

3.8 android:scaleType="matrix" 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:background="@color/blue"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            android:scaleType="matrix"
            android:src="@drawable/demo" />

    </LinearLayout>
matrix.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容