圖解 Android ImageView 的 scaleType 屬性

2021-02-19 柵川中學的技術探究部

ImageView 是 Android 中最常用的控制項之一,而在使用 ImageView 時,必不可少的會使用到它的 scaleType 屬性。該屬性指定了你想讓ImageView 如何顯示圖片,包括是否進行縮放、等比縮放、縮放後展示位置等。Android 提供了八種 scaleType 的屬性值,每種都對應了一種展示方式,下面就對每一種 scaleType 屬性值進行圖文解釋。

首先,這個是測試放到 ImageView 中的圖從左到右依次有各個角色,便於區分,這張圖是 1920*1080 ,無論長寬都比測試所用的 ImageView 大。

這個是用於測試的ImageView布局:

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/colorAccent">
<ImageView android:id="@+id/image_view" android:layout_width="300dip" android:layout_height="300dip" android:layout_gravity="center" android:background="@android:color/holo_purple"/>
</FrameLayout>

可以看到ImageView是正方形的,其背景色為紫色,父布局設置其背景色為紅色,這樣可以很容易看到各個控制項的大小。在手機上這個布局看起來是這個樣子的,紫色空間就是ImageView:


寫在前面scaleType屬性既可以在 XML 中設置,也可以在代碼中設置:
android:scaleType="centerInside"          imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);    


八個 ScaleType,其實可以分為三個類型:

以FIT_開頭的4種,它們的共同點是都會對圖片進行縮放;

以CENTER_開頭的3種,它們的共同點是居中顯示,圖片的中心點會與ImageView的中心點重疊;

ScaleType.MATRIX,這種就直接翻到最後看內容吧;

ScaleType.FIT_CENTER 默認該模式是ImageView的默認模式,如果沒有設置ScaleType時,將採用這種模式展示圖片。在該模式下,圖片會被等比縮放到能夠填充控制項大小,並居中展示:

這裡例子裡因為圖片寬大於高,於是被縮放到控制項大小並居中展示,上下會留白。如果圖片的高大於寬,那麼居中顯示就會在左右留白。

ScaleType.FIT_START圖片等比縮放到控制項大小,並放置在控制項的上邊或左邊展示。如圖所示,此模式下會在ImageView的下半部分留白,如果圖片高度大於寬,那麼就會在ImageView的右半部份留白:


ScaleType.FIT_END圖片等比縮放到控制項大小,並放置在控制項的下邊或右邊展示。如圖所示,此模式下會在ImageView的上半部分留白,如果圖片高度大於寬,那麼就會在ImageView的左半部分留白。


ScaleType.FIT_XY圖片縮放到控制項大小,完全填充控制項大小展示。注意,此模式不是等比縮放。這個模式理解也是最簡單的,如圖:


ScaleType.CENTER不使用縮放,ImageView會展示圖片的中心部分,即圖片的中心點和ImageView的中心點重疊,如圖。如果圖片的大小小於控制項的寬高,那麼圖片會被居中顯示。


ScaleType.CENTER_CROP這是我最喜歡的模式,因為在該模式下,圖片會被等比縮放直到完全填充整個ImageView,並居中顯示。該模式也是最常用的模式了。如圖可以看到,圖片的高度是能完全展示出來的:


ScaleType.CENTER_INSIDE使用此模式以完全展示圖片的內容為目的。圖片將被等比縮放到能夠完整展示在ImageView中並居中,如果圖片大小小於控制項大小,那麼就直接居中展示該圖片:

這裡大家看到這個模式的效果與ScaleType.FIT_CENTER的效果相同,這是因為所用圖片是是大於ImageView的大小的,如果圖片是小於控制項大小,那麼就能夠看出來這兩個模式下的差別了。


ScaleType.MATRIX一般情況下重點都放在最後,在這八種ScaleType中,這個模式就是重點了。該模式需要與ImageView.setImageMatrix(Matrix matrix) 配合使用,因為該模式需要用於指定一個變換矩陣用於指定圖片如何展示。其實前面的7種模式都是通過ImageView在內部生成了相應的變換矩陣,等於是提供了該模式的一種特定值,使用這個模式只要傳入相應矩陣,也就能實現上述七種顯示效果。
關於如何使用矩陣的內容,不是很快能說完,所以這裡就不說了。
另外注意,在使用時,需要先調用
imageView.setScaleType(ImageView.ScaleType.MATRIX);

再調用

imageView.setImageMatrix(matrix);


注意順序不要搞錯,否則會出現問題的。下面看一下代碼:

imageView.setScaleType(ImageView.ScaleType.MATRIX);  
Matrix matrix = new Matrix(); matrix.setTranslate(100, 100); matrix.preRotate(30); imageView.setImageMatrix(matrix);


每行代碼都有注釋,其展示的效果如下圖顯示。

相關焦點

  • 眾多Android開源控制項庫收藏分享
    blackfizz/EazeGraphhttps://github.com/limccn/Android-Chartshttps://github.com/PhilJay/MPAndroidChart(推薦)https://github.com/Androguide/HoloGraphLibraryhttps://github.com/lecho/hellocharts-android
  • Android 8.0 自適應圖標
    ><vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="108dp" android:height="108dp" android:viewportHeight="108" android:viewportWidth
  • Android高斯模糊你所不知道的坑
    從效果還是可以看出,當點擊籤到按鈕的時候,會伴隨籤到頁面和分享按鈕的自下向上的彈出效果,這個動畫直接使用屬性動畫就能實現沒什麼好說的,最主要的就是後面的高斯模糊效果,仔細看的話可以發現是有一個從清晰逐漸模糊的漸變效果,這個不是本文重點,這裡想說的是在實現自定義高斯模糊效果的時候自己所遇到的一個坑。
  • 理解Android中的Bitmap
    int register_android_graphics_Graphics(JNIEnv* env){    jmethodID m;    jclass c;    ...    mPinnedRefCount = %d", mPinnedRefCount);        env->DeleteWeakGlobalRef(mPixelStorage.java.jweakRef);        break;    }    if (android::uirenderer::Caches::hasInstance()) {        android::uirenderer
  • Unity Android Plugin開發指南
    我們利用已有的Android構建任務鏈,創建Jar構建任務。已有的構建腳本位於RootDir/Android/SDK_Android/build.gradle,在其中加入Jar構建任務:android.libraryVariants.all { v ->  def type = v.name.capitalize()  task("jar$type", type: Jar) {      archiveName "sdk
  • Android Study之跳轉自啟動管理頁
    介紹實現關鍵類1.獲取手機型號(Build)所屬包: android.os.Build作用(含義): 從系統屬性中提取設備硬體和版本信息靜態屬性:1.1 BOARD 主板:        1.4 CPU_ABI cpu指令集:The name of the instruction set (CPU type + ABI convention) of native code.
  • Android Checkbox詳解
    今天我就來聊聊android控制項中擁有著0和1這種特性的魔力控制項checkbox.先來講講Checkbox的基本使用.在XML中定義.<?xml version="1.0" encoding="utf-8"?
  • Android 動態修改Linker實現LD_PRELOAD PLT Hook
    /system/bin/sh export LD_PRELOAD=/data/local/tmp/ld-test.so exec "$@"設置全局屬性setprop wrap.app.package path/to/mywrap.sh,或者直接設置屬性setprop wrap.app.package LD_PRELOAD=/data/local/tmp/ld-test.so
  • 抖音上很火的字符畫 Android 實現
    抖音上炫代碼的不少,有些真的讓人嘆為觀止,作為一個androider,當我看到下面這段舞蹈的時候,終於忍不住了,想要通過android實現一樣的效果。這麼好玩的東西,為啥就沒有大佬做呢,原因可能有兩個,一是真的難,二是出力不討好,難以達到最終效果,一番嘗試後,技術問題都解決了,但並沒有達到電腦端美感,手機屏幕還是太小了。
  • Android中SettingsProvider源碼解析
    SettingsProvider 只接受 int、float、string等基本類型的數據;SettingsProvider 由 Android 系統 framework 進行了封裝,使用更加快捷方便SettingsProvider 的數據由鍵值對組成SettingsProvider 有點類似 Android 的 properties 系統(Android 屬性系統
  • Android高斯模糊技術,實現毛玻璃效果
    終於實現出來了 ,效果圖如下:本示例是在ConvenientBanner這個開源庫demo上改的,自己寫一個浪費時間,直接拿來用,地址為:https://github.com/saiwu-bigkoo/Android-ConvenientBanner在找遍了所有高斯模糊的算法代碼後,發現android
  • 還在用 android.support?谷歌強推 AndroidX 啦!
    :1.0.0com.android.support:designcom.google.android.material:material:1.0.0-rc01com.android.support:drawerlayoutandroidx.drawerlayout:drawerlayout:1.0.0com.android.support:gridlayout-v7androidx.gridlayout
  • Android 約束布局(ConstraintLayout)詳解
    當然,在布局編輯器當中所做的操作,XML 布局當中就會自動生成對應的屬性。其中生成的一些屬性,有可能並不是必須需要的。所以在生成後,你可能還需要手動檢查、清理一下。或者你也可以直接在 XML 中編寫屬性,ConstraintLayout 的屬性雖多,但是都是成組的,還是很容易掌握的。
  • Android用戶態啟動流程分析
    注意此時我們還是在 kernel domain 中,加載完 sepolicy 之後,需要重新設置 /init 文件的 SELinux 屬性(selinux_android_restorecon("/init", 0)),並以新的 init domain 重新執行 init 程序,進入第二階段。
  • App安全評估手冊-Android
    Proxy type代理方式選擇 Plain,之後出現下圖樣式:Filter default value 選擇 Direct all可以在桌面生成快捷方式,應用程式的入口4.Icon屬性:指定應用程式的圖標5.android:theme屬性:指定主題android:theme="@android:style/Theme.Dialog"android:exported是否允許外部程序調用下面就是我們再AndroidManifest.xml中定義的組件的常見形式
  • Android Design Support Library v28 新增組件詳解
    "        app:strokeWidth="2dp" /></LinearLayout>2.MaterialButtonMaterialButton組件繼承於Button,因此可以使用Button的大部分屬性,可以更便捷的設置按鈕圓角、邊框、圖標等屬性,看下效果:image.png注意:MaterialButton
  • 帶你了解 Android 約束布局 ConstraintLayout
    相對位置的屬性下面是ConstraintLayout確定位置的屬性:layout_constraintLeft_toLeftOflayout_constraintLeft_toRightOflayout_constraintRight_toLeftOflayout_constraintRight_toRightOf
  • Android Input 子系統初探
    每一個事件上報都是通過input_event接口來完成,在判定事件類型是否支持後,主要是調用input_handle_event來完成:該接口中,首先根據type、code判定該事件的disposition,當disposition為INPUT_PASS_TO_DEVICE時,將該事件傳遞給input_dev設備自身的event函數處理;當disposition為INPUT_PASS_TO_HANDLERS