Android ImageView 圖片縮放(ScaleType 屬性)

Posted on  Jun 28, 2020  in  Android  by  Zizi Chou  ‐ 2 min read

在 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>

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!