iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Mobile Development

新手向Android&Kotlin學習紀錄30天系列 第 5

第5天 UI基礎元件(三) : ImageView

  • 分享至 

  • xImage
  •  

ImageView

用來展示圖片的元件,如drawable檔內的圖片,可以讓我們的畫面更豐富吸引人。

圖片在哪裡?

在IDE左側工具欄用Project模式檢視,最直接就會看到drawable跟mipmap兩種資料夾,兩種都是圖片為什麼分開放呢?

res/drawable可以放這些

點陣圖Bitmap files (.png, .9.png, .jpg, .gif) or XML files >that are compiled into the following drawable >resource subtypes:

  • Bitmap files
  • Nine-Patches (re-sizable bitmaps)
  • State lists
  • Shapes
  • Animation drawables
  • Other drawables

了解Drawable Resource官方文件
討論串:mipmap文件夾和drawable文件夾的區別

  • 看了上面討論串,大概是除了Launch圖標放mipmap,其他使用到的圖片就放這裡。
  • drwable 跟 drawable-v24 的有不同嗎? 問了google大神,看了一些文章或討論,因應手機版本做的分類,若將圖片資源放在drawable-v24,可能會導致Android API 24(Android 7.0)之前的版本的手機找不到資源檔而報錯。

注意:您可能想知道為什麼啟動器圖標資產位於與位於mipmap目錄中的其他應用程序資產不同的目錄中drawable。這是因為某些啟動器可能會以比設備默認密度桶提供的尺寸更大的尺寸顯示您的應用程序圖標。例如,在 hdpi 設備上,某個設備啟動器可能希望使用 xhdpi 版本的應用程序圖標。引自code lab -Change the app icon

res/mipmap

mipmap是官方文檔建議存放Launch圖標(App的icon)的資料夾,因應手機螢幕尺寸、像素密度的不同而使用不同像素密度(hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi、nodpi、anydpi)的圖檔而分不同的資料夾存放(Project模式下可見,如本文第1張圖)。

  • mdpi:適用於中密度螢幕 (約 160 dpi) 的資源
  • hdpi:適用於高密度螢幕 (約 240 dpi) 的資源
  • xhdpi:適用於 extra-high 密度螢幕 (約 320 dpi) 的資源
  • xxhdpi:適用於 extra-extra-high 像素密度螢幕 (約 480dpi) 的資源。
  • xxxhdpi:適用於 extra-extra-extra-high 密度螢幕 (約 640 dpi) 的資源
  • nodpi:不論螢幕的像素密度為何都不能縮放的資源
  • anydpi:可調整為各種密度的資源

mipmap-anydpi-v26為何多加「-v26」?

注意:若自動調整圖示(Adaptive icons) 新增到 API 版本 26的設備平台上,自動調整圖示應是在具有 -v26 資源限定詞的 mipmap 資源目錄中宣告。
這表示此「res > mipmap-anydpi-v26」 資源目錄中的資源僅適用於執行 API 26 (Android 8.0) 以上版本的裝置。執行舊版平台的裝置會忽略此目錄中的資源檔案。
引自code lab -Change the app icon

官方文件

如何放入圖片

  1. 複製圖片-> 滑鼠右鍵 -> 貼上
  2. 輸入圖片名稱及指定的drawable資料夾,完成後應該就可以左側res/drawable中看到這個圖片檔了。
  • 也可以把圖檔用ctrl+滑鼠游標拖曳到資料夾中,接來一樣是命名及選資料夾畫面。
  • 或是直接把圖檔存到電腦中的專案資料夾中(D:...\該專案資料夾\app\src\main\res\drawable)

新增向量圖片

  1. drawable資料夾右鍵 -> New -> Vector Asset -> 叫出Vector Asset Studio工具
  2. 選擇內建的向量圖檔(如下圖)或是選擇 Local file(SVG、PSD),從自己電腦中的圖檔新增到 res/drawble
  3. 命名、調整顏色、尺寸、透明度 ->Next -> Finish

常用屬性

  • src :設定圖檔來源
  • scaleType : 圖片在元件中縮放及擺放的模式
    • center : 圖片尺寸不變,放在元件正中央。
    • centerCrop : 按圖片比例縮放,居中顯示填滿元件,超出的部分被裁切。
    • centerInside : 按圖片比例縮放,居中完整顯示,圖片尺寸若遠小於元件尺寸,圖片不會放大,反之,圖片原尺寸大於元件的話就會配合元件縮小。
    • fitCenter : 按圖片比例居中完整顯示,圖片原尺寸不論大於或小於元件尺寸都會配合元件尺寸作縮放。
    • fitStart : 按圖片比例靠左或靠上顯示。
    • fitEnd : 按圖片比例靠右或靠下。
    • fitXY : 依照元件的寬高去顯示,比例可能會變形。
    • matrix : 依照matrix矩陣顯示圖片。
  • contentDescription : 圖片描述, ImageView、ImageButton、CheckBox都會建議設置,友善視力障礙的朋友,屬於Google無障礙工具的一部分。
  • tint : 更改圖片色調,預設模式為SRC_ATOP。
  • tintMode : 多種色調的混色模式,自己玩玩看吧。TintMode
    官方文件更多屬性介紹
   <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:contentDescription="@string/image_description"
        android:scaleType="fitCenter"
        android:src="@drawable/diamond"
         />
  • 以寬、高度都100dp的ImageView,呈現各種scaleType:

上一篇
第4天 UI基礎元件(二) : EditText
下一篇
第6天 UI基礎元件(四) : ProgressBar
系列文
新手向Android&Kotlin學習紀錄30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
YC
iT邦研究生 2 級 ‧ 2023-06-15 13:01:53

Yimin請問什麼情境下,
會需要放到drawable-v24?
我想不出什麼情況下,要特地放另一個到drawable-v24。

我要留言

立即登入留言