在 Android 中想要呈現一張圖片可以使用 ImageView,但我們無法預設每張圖片長寬都一樣。
除了預先調整圖片長寬外,ImageView 也提供 ScaleType 屬性,讓 application 自動調整。

以下我將列出關於 ScaleType 的各屬性結果,方便各位找出適合需求的參數來使用。

環境

  • Mac @Mojave
  • Homebrew @2.2.17
  • Android Studio
  • Android SDK 21

範例照片(Dimensions:1500x2000)

center

尺寸 ☞ 圖片原尺寸 / 多餘部分裁切掉
位置 ☞ 居中
範例結果 ☞ 因為原圖很大,原尺寸手機塞不下,所以剩下兔鼻子了

android:scaleType="center"
imageView.setScaleType(ImageView.ScaleType.CENTER);

centerCrop

尺寸 ☞ 圖片原尺寸比例擴大、縮小 / 較長的寬、高會被裁切
位置 ☞ 居中
範例結果 ☞ 照片被依照高度比例放大,而寬度有小部分被裁切掉了

android:scaleType="centerCrop"
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

centerInside

尺寸 ☞ 圖片原尺寸比例擴大、縮小 / 較長的寬、高會被裁切
位置 ☞ 居中
範例結果 ☞ 照片被依照高度比例縮小

android:scaleType="centerInside"
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

fitCenter

尺寸 ☞ 圖片原尺寸比例擴大、縮小至與 ImageView 同寬 / 較長的高會被裁切
位置 ☞ 居中
範例結果 ☞ 照片被依照高度比例縮小、擺置中間

android:scaleType="fitCenter"
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

fitEnd

尺寸 ☞ 圖片原尺寸比例擴大、縮小至與 ImageView 同寬 / 較長的高會被裁切
位置 ☞ 底部
範例結果 ☞ 照片被依照高度比例縮小、擺置底部

android:scaleType="fitEnd"
imageView.setScaleType(ImageView.ScaleType.FIT_END);

fitStart

尺寸 ☞ 圖片原尺寸比例擴大、縮小至與 ImageView 同寬 / 較長的高會被裁切
位置 ☞ 頂部
範例結果 ☞ 照片被依照高度比例縮小、擺置頂部

android:scaleType="fitStart"
imageView.setScaleType(ImageView.ScaleType.FIT_START);

fitXY

尺寸 ☞ 圖片不按原尺寸比例擴大、縮小至塞滿 ImageView
位置 ☞ 無
範例結果 ☞ 照片被依 ImageView 大小縮放,導致照片變長(比例已不同)

android:scaleType="fitXY"
imageView.setScaleType(ImageView.ScaleType.FIT_XY);

矩陣繪製圖片

尺寸 ☞ 圖片左上開始繪製,多餘的寬、高會被裁切
位置 ☞ 左上
範例結果 ☞ 照片很大,從左上開始繪製,所以只剩籠子其餘被切掉

android:scaleType="matrix"

程式碼

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.demo.polly.imagescaletype.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/demo"
        android:scaleType="matrix"/>
</RelativeLayout>