Xamarin Android Image

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

James Tsai 2017/02/01 10:35:59
1313

主題

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

文章簡介

由於在Android 本身的設計當中就有很多種儲存圖片的方式,若要利用ImageView的元件來顯示圖片時,該要如何搭配與應用Android的儲存圖片方式,來讓我們在使用Xamarin.Android 開發時正確的讀取呢?本篇文章來解說吧!

作者

James Tsai

版本/產出日期

V1.0/2017.1.29



1. 前言


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

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


2. 環境準備


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


3. 本文


前置準備


圖片準備:

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



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

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

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



紅色框的元件為Button,由上到下的命名各別LoadImageFromResourceButtonLoadImageFromDrawableButtonLoadImageFromAssertsButtonLoadImageFromLocalFileButton,綠色框內的元件為ImageView命名為MainImageView


ImageView設定Image的方法討論


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


SetImageBitmap



透過將圖片讀取到Bitmap物件後,再設定給ImageViewImage

SetImageDrawable



Resource當中的drawable圖片讀取成Deawable的物件後,再設定給ImageViewImage

SetImageResource



Resource當中的圖片透過Resource取得ResourceId值,再設定給ImageViewImage

SetImageURI(I不是L)



指定圖片所在的URI位置,再設定給ImageViewImage


程式的實際撰寫


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



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



透過Resource.Drawable直接取得Xamarin_Logo1.pngResourceId,再將該Id值丟給SetImageResource的方法來設定Image

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



or



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

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



or



透過Asserts.Open來取得放在Asserts底下的圖片Stream物件後,可以選擇使用讀取Stream的方式搭配SetImageDrawableSetImageImage的方式來設定ImageViewImage

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



綠色框當中的程式碼是為了防止該路徑沒有圖片時,直接將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


James Tsai