在 Xamarin.Android 當中讀取圖片來顯示的方法…I

1. 前言

• 若是細數一下Android 本身設計資料儲存的方式，就會發現有相當多種使用的方式，所以當我們在面對圖片利用各種不同的資料儲存方式存在時，就會有讀取上的一些問題要解決。

• 本篇文章先討論圖片可能根據本身所存在App內部可有的位置，所會產生的幾種讀取方式。

2. 環境準備

• 可測試執行Xamarin.Android的專案環境

3. 本文

前置準備

• 圖片準備:

我們在已經既有的Xamarin.Android專案當中找到”Asserts”與”Resources”，並且在其中各放置兩張圖片，如下圖所示:



注意其中放在Asserts的圖片，其屬性的建置動作要設定為”AndroidAsset”；放在Resources->drawable的圖片，其屬性的建置動作要設定為”AndroidResource”。

• 測試程式的 Layout 外觀的準備:

在該App1專案的Resources->layout當中打開Main.axml，將設計畫面處理成如下圖所示:



紅色框內的元件為Button，由上到下的命名各別為LoadImageFromResourceButton、LoadImageFromDrawableButton、LoadImageFromAssertsButton、LoadImageFromLocalFileButton，綠色框內的元件為ImageView命名為MainImageView，

ImageView設定Image的方法討論

如果從Android官網上說明ImageView的部分來看(https://developer.android.com/
reference/android/widget/ImageView.html )，如何設定ImageView的Image方式有很多中，以下我們討論其中四種方式。

• SetImageBitmap



透過將圖片讀取到Bitmap物件後，再設定給ImageView的Image。

• SetImageDrawable



將Resource當中的drawable圖片讀取成Deawable的物件後，再設定給ImageView的Image。

• SetImageResource



將Resource當中的圖片透過Resource取得Resource的Id值，再設定給ImageView的Image。

• SetImageURI(是I不是L)



指定圖片所在的URI位置，再設定給ImageView的Image。

程式的實際撰寫

• 接著打開專案底下的MainActivity.cs，在OnCreate的方法當中直接設定Layout的讀取、圖片元件、按鈕元件的部分，如下圖所示:

• 接著看到loadImageFromResourceButton的Click事件程式，我們加入如下圖片紅色框所示的程式碼:



透過Resource.Drawable直接取得Xamarin_Logo1.png在Resource中的Id值，再將該Id值丟給SetImageResource的方法來設定Image。

• 接著看到loadImageFromDrawableButton的Click事件程式，我們加入如下圖片紅色框所示的程式碼:



or



先取得Xamarin_Logo2.png在Resource中的Id值後，再透過GetDrawable將該圖片讀取成Drawable物件後，再丟給SetImageDrawable的方法來設定Image。注意的是如果是透過GetIdentifier的方式來取得Id值，字串全為小寫並且不要加上檔案的副檔名。

• 接著看到loadImageFromDrawableButton的Click事件程式，我們加入如下圖片紅色框所示的程式碼:



or



透過Asserts.Open來取得放在Asserts底下的圖片Stream物件後，可以選擇使用讀取Stream的方式搭配SetImageDrawable或SetImageImage的方式來設定ImageView的Image。

• 接著看到loadImageFromLocalFileButton的Click事件程式，我們加入如下圖片紅色框所示的程式碼:



綠色框當中的程式碼是為了防止該路徑沒有圖片時，直接將Asserts的圖片複製到該路徑底下，所以在這邊我們就利用了SetImageURI的方法來設定ImageView當中的Image。

測試執行與結果

• 放置在App1專案當中的圖片如下:

• 點選LoadImageFromResourceButton按鈕後，ImageView呈現結果如下:

• 點選LoadImageFromDrawableButton按鈕後，ImageView呈現結果如下:

• 點選LoadImageFromAssertsButton按鈕後，ImageView呈現結果如下:

• 點選LoadImageFromLocalFileButton按鈕後，ImageView呈現結果如下:

4. 參考來源

• How to load a image from assets?:
http://stackoverflow.com/questions/7645268/how-to-load-a-image-from-assets

• Display An Image:
https://developer.xamarin.com/recipes/android/controls/imageview/display_an_image/

• Android Developers Android API ImageView:

https://developer.android.com/reference/android /widget/ImageView.html