這一次,完全幫你搞明白 ImageView ScaleType

1、概述

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

  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 的做用是十分有必要的。ide

2、詳述

  1. CENTER3d

    Center the image in the view, but perform no scalingorm

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

    • Image 尺寸比 ImageView 尺寸大
      • 只顯示 Image 中間與 ImageView 尺寸相等的部分
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 完整地顯示在 ImageView 中間
  2. CENTER_CROPblog

    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.it

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

    • Image 尺寸比 ImageView 尺寸大
      • Image 短邊縮小至與 ImageView 對應邊相等,Image 長邊根據相應的縮放係數進行縮放,以後將 Image 中間顯示在 ImageView 中間。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 短邊放大至與 ImageView 對應邊相等,Image 長邊根據相應的縮放係數進行縮放,以後將 Image 中間顯示在 ImageView 中間。
  3. CENTER_INSIDEast

    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.form

    完整地將 Image 顯示在 ImageView 中間。若是 Image 比 ImageView 尺寸大,則將長邊縮放至與 ImageView 對應邊相等,同時,短邊根據縮放係數縮放。以後,將縮放後的 Image 完整地顯示在 ImageView 上;若是 Image 比 ImageView 尺寸小,直接將 Image 顯示在 ImageView 中間。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據相應的縮放係數進行縮放,以後將 Image 顯示在 ImageView 中間。
    • Image 尺寸與 Image View 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 不進行任何處理,直接顯示在 ImageView 中間。
  4. 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 對應邊相等,同時,短邊根據縮放係數縮放,以後將縮放後的 Image 完整地顯示在 ImageView 上;若是 Image 比 ImageView 尺寸小,則將長邊放大至與 ImageView 對應邊相等,以後將縮放後的 Image 完整地顯示在 ImageView 上。總之,在保證 Image 完整顯示在 ImageView 裏面的前提下,保證在一個方向上,Image 與 ImageView 是相等的。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據相應的縮放係數進行縮放,以後將 Image 顯示在 ImageView 中間。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 長邊放大至與 ImageView 對應邊相等,Image 短邊根據相應的縮放係數進行縮放,以後將 Image 顯示在 ImageView 中間。
  5. 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 對應邊相等,同時,短邊根據縮放係數縮放,以後將縮放後的 Image 完整地顯示在 ImageView 右邊或下邊;若是 Image 比 ImageView 尺寸小,則將長邊放大至與 ImageView 對應邊相等,以後將縮放後的 Image 完整地顯示在 ImageView 右邊或下邊。總之,在保證 Image 完整顯示在 ImageView 裏面的前提下,保證在一個方向上,Image 與 ImageView 是相等的。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據相應的縮放係數進行縮放,以後將 Image 顯示在 ImageView 右邊或下邊。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 長邊放大至與 ImageView 對應邊相等,Image 短邊根據相應的縮放係數進行縮放,以後將 Image 顯示在 ImageView 右邊或下邊。
  6. 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 對應邊相等,同時,短邊根據縮放係數縮放,以後將縮放後的 Image 完整地顯示在 ImageView 左邊或上;若是 Image 比 ImageView 尺寸小,則將長邊放大至與 ImageView 對應邊相等,以後將縮放後的 Image 完整地顯示在 ImageView 左邊或上邊。總之,在保證 Image 完整顯示在 ImageView 裏面的前提下,保證在一個方向上,Image 與 ImageView 是相等的。

    • Image 尺寸比 ImageView 尺寸大
      • Image 長邊縮小至與 ImageView 對應邊相等,Image 短邊根據相應的縮放係數進行縮放,以後將 Image 顯示在 ImageView 左邊或上邊。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 長邊放大至與 ImageView 對應邊相等,Image 短邊根據相應的縮放係數進行縮放,以後將 Image 顯示在 ImageView 左邊或上邊。
  7. 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 縮放係數能夠不一致。

    • Image 尺寸比 ImageView 尺寸大
      • Image 的 Width、Height 分別縮放至與 ImageView 對應邊相等,以後將 Image 完整地顯示在 ImageView 裏面。
    • Image 尺寸與 ImageView 尺寸相等
      • 完整顯示
    • Image 尺寸比 ImageView 尺寸小
      • Image 的 Width、Height 分別縮放至與 ImageView 對應邊相等,以後將 Image 完整地顯示在 ImageView 裏面。
  8. MATRIX

    Scale using the image matrix when drawing.

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

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

    ImageView ScaleType 的默認值(我本身加的,用於作對比), ScaleType 的默認值爲 FIT_CENTER。

下面是對上面全部狀況的彙總,從左至右、從上到下,分別對應上面提到的條目:

      

相關文章
相關標籤/搜索