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>

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

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

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

贊助我們的創作

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

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