ImageView ScaleType 屬性詳解

一、概述

ImageView 的 ScaleType 一共八種類型,分別是:

  1. CENTER;
  2. CENTER_CROP;
  3. CENTER_INSIDE;
  4. FIT_CENTER;
  5. FIT_END;
  6. FIT_START;
  7. FIT_XY;
  8. MATRIX;

由于不同類型的 ScaleType 最終展示的 ImageView 不一樣,再加上 ImageView 的使用頻率非常高,因此,了解不同類型的 ScaleType 的作用是十分有必要的。

二、詳述

  1. CENTER

    Center the image in the view, but perform no scaling

    在不縮放的前提下,將 Image 的中間顯示在 ImageView 的中間

    • Image 尺寸比 ImageView 尺寸大
      • 只顯示 Image 中間與 ImageView 尺寸相等的部分
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 完整地顯示在 ImageView 中間
CENTER
  1. 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). The image is then centered in the view.

    Image Width Height 等比例縮放至至少一個方向上 Image 與 ImageView 尺寸一樣(Image 短邊縮放至與 ImageView 對應邊相等(Width 對應 Width,Height 對應 Height)),之后將縮放后的 Image 的中間顯示在 ImageView 的中間

    • Image 尺寸比 ImageView 尺寸大
      • Image 短邊縮小至與 ImageView 對應邊相等,Image 長邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 中間顯示在 ImageView 中間。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 短邊放大至與 ImageView 對應邊相等,Image 長邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 中間顯示在 ImageView 中間。
CENTER_CROP
  1. 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). The image is then centered in the view.

    完整地將 Image 顯示在 ImageView 中間。如果 Image 比 ImageView 尺寸大,則將長邊縮放至與 ImageView 對應邊相等,同時,短邊根據(jù)縮放系數(shù)縮放。之后,將縮放后的 Image 完整地顯示在 ImageView 上;如果 Image 比 ImageView 尺寸小,直接將 Image 顯示在 ImageView 中間。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 顯示在 ImageView 中間。
    • Image 尺寸與 Image View 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 不進行任何處理,直接顯示在 ImageView 中間。
    CENTER_INSIDE
  1. FIT_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.

    完整地將 Image 顯示在 ImageView 中間。如果 Image 比 ImageView 尺寸大,則將長邊縮放至與 ImageView 對應邊相等,同時,短邊根據(jù)縮放系數(shù)縮放,之后將縮放后的 Image 完整地顯示在 ImageView 上;如果 Image 比 ImageView 尺寸小,則將長邊放大至與 ImageView 對應邊相等,之后將縮放后的 Image 完整地顯示在 ImageView 上。總之,在保證 Image 完整顯示在 ImageView 里面的前提下,保證在一個方向上,Image 與 ImageView 是相等的。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 顯示在 ImageView 中間。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 長邊放大至與 ImageView 對應邊相等,Image 短邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 顯示在 ImageView 中間。
    FIT_CENTER
  1. FIT_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.

    完整地將 Image 顯示在 ImageView 右邊或下邊。 如果 Image 比 ImageView 尺寸大,則將長邊縮放至與 ImageView 對應邊相等,同時,短邊根據(jù)縮放系數(shù)縮放,之后將縮放后的 Image 完整地顯示在 ImageView 右邊或下邊;如果 Image 比 ImageView 尺寸小,則將長邊放大至與 ImageView 對應邊相等,之后將縮放后的 Image 完整地顯示在 ImageView 右邊或下邊??傊?,在保證 Image 完整顯示在 ImageView 里面的前提下,保證在一個方向上,Image 與 ImageView 是相等的。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 顯示在 ImageView 右邊或下邊。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 長邊放大至與 ImageView 對應邊相等,Image 短邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 顯示在 ImageView 右邊或下邊。
    FIT_END
  1. FIT_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.

    完整地將 Image 顯示在 ImageView 左邊或上邊。 如果 Image 比 ImageView 尺寸大,則將長邊縮放至與 ImageView 對應邊相等,同時,短邊根據(jù)縮放系數(shù)縮放,之后將縮放后的 Image 完整地顯示在 ImageView 左邊或上;如果 Image 比 ImageView 尺寸小,則將長邊放大至與 ImageView 對應邊相等,之后將縮放后的 Image 完整地顯示在 ImageView 左邊或上邊??傊诒WC Image 完整顯示在 ImageView 里面的前提下,保證在一個方向上,Image 與 ImageView 是相等的。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 顯示在 ImageView 左邊或上邊。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 長邊放大至與 ImageView 對應邊相等,Image 短邊根據(jù)相應的縮放系數(shù)進行縮放,之后將 Image 顯示在 ImageView 左邊或上邊。
    FIT_START
  1. FIT_XY

    Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src.

    完整地將 Image 顯示在 ImageView 里面。 Image X、Y 方向上分別縮放至與 ImageView 對應邊相等,Image 的 Width 和 Height 縮放系數(shù)可以不一致。

    • Image 尺寸比 ImageView 尺寸大
      • Image 的 Width、Height 分別縮放至與 ImageView 對應邊相等,之后將 Image 完整地顯示在 ImageView 里面。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 的 Width、Height 分別縮放至與 ImageView 對應邊相等,之后將 Image 完整地顯示在 ImageView 里面。
    FIT_XY
  1. MATRIX

    Scale using the image matrix when drawing.

    將 Image 從 ImageView 左上角開始顯示。

    • Image 尺寸比 ImageView 尺寸大
      • ImageView 只顯示 Image 中從左上角開始與 ImageView 尺寸相等的部分,多余的地方不顯示。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 顯示在 ImageView 的左上角。
    MATRIX
  1. ORIGIN

    ImageView ScaleType 的默認值(我自己加的,用于做對比), ScaleType 的默認值為 FIT_CENTER。

ORIGIN

下面是對上面所有情況的匯總,從左至右、從上到下,分別對應上面提到的條目


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

相關(guān)閱讀更多精彩內(nèi)容

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