2017年1月31日 星期二

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


當我們在面對圖片利用各種不同的資料儲存方式存在時,就有讀取上的一些問題要解決,而在前一篇的介紹中我們已經知道若要利用 ImageView 的元件來顯示圖片時,要如何在 Android 中運用各種方式讀取所儲存的圖片檔案。

所以本篇文章繼續討論圖片存在手機裝置的相簿讓使用者選取圖片,或者圖片是在網路上可讀取的一個網路位址時,如何透過 ImageView 呈現該圖片。

開始吧!!!

 

前置準備

  • 圖片準備:
    在測試的手機裝置中放置幾張測試圖片到相簿當中,如下圖所示:

1

 

  • 準備一個圖檔放在可讀取的網路位址中,如下圖:

2

 

  • 測試程式的 Layout 外觀的準備:沿用前一篇的測試App1專案,找到Resources->layout當中打開Main.axml,將設計畫面處理成如下圖所示:

    3
    紅色框內的元件為Button,由上到下的命名各別為LoadImageFromGalleryButton、LoadImageFromUrlButton。

 

選取手機當中的圖片程式實際撰寫

由於要選取手機當中的圖片資料,會由我們的測試App切換到檔案選取的部分後,等使用者選擇圖片後,再回到我們的測試App中來讀取該圖片。

所以在開發程式的部份我們會透過 Intent 來做這些切換,利用 StartActivityForResult() 搭配 Activity 的 OnActivityResult 方法覆寫的部分,來處理使用者選擇圖片後的圖片位址回傳,所以 ImageView 的 Image 設定方式就會類似前一篇的最後一個例子一樣,透過SetImageURL 的方法來設定即可。

 

打開專案底下的 MainActivity.cs,繼續在 OnCreate 的方法當中設定新增 loadImageFromGalleryButton 的按鈕元件跟建立 Activity 的 OnActivityResult 的方法覆寫部分,如下圖紅色框所示的程式碼:

4

 

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

5
在這邊我們透過Intent去準備檔案切換時所需的資訊。


接著看到建立Activity的 OnActivityResult 的方法覆寫部分,我們加入如下圖片紅色框所示的程式碼:

6

由於我們在前面選取時所產生的Intent當中有些限制的設計,所以使用者所選取到的資料必定會是圖片型態,並且會回傳圖片所在的位置,因此在這邊只要丟給SetImageURI的方法來設定Image即可。

 

網路當中可讀取的網路位址圖片程式實際撰寫

幾乎所有我們App當中的資料並非是在App本身就有的,而是可能透過網路讀取後所載入的,當然圖片也是。所以,在這邊我們來討論有一個既有的可讀取的網路位址來讀取圖片並呈現到ImageView當中。

而我們在讀取網路上的圖片程式的程式不使用WebClient來讀取,而改用HttpClient操作來讀取,但HttpClient則必須在額外透過Nuget安裝HttpClient套件(在未使用.NETStandardLibary做為基底類別庫的時候)。在該專案安裝好HttpClient套件後,會看到參考底下有多增加的引用,且若打開Nuget套件管理,會看到類似如下圖呈現:

7


另外,也請記得到專案的屬性找到Android Manifest分頁中勾選 Internet權限,不然此測試App在Release模式時,執行網路資料讀取時會因權限不足而無法讀取。

8


接著打開專案底下的MainActivity.cs,繼續在OnCreate的方法當中設定新增loadImageFromUrlButton的按鈕元件,如下圖所示:

9



接著在MainActivity類別當中,建立一個自訂的GetImageFromUrlAsync方法,如下圖程式碼:

10
在這自訂的GetImageFromUrlAsync方法當中,我們利用了HttpClient去給定的網路位址下載圖片成ByteArray後,將該ByteArray透過BitmapFactory將ByteArry轉換成Bitmap物件回。

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

11
透過我們所撰寫的 GetImageFromUrlAsync 方法,給定一個可讀取的已知圖片網路位址,讓回傳的 Bitmap 物件透過 ImageView 的SetImageBitmap 方法來設定 Image。

 

測試執行與結果

點選LoadImageFromGalleryButton按鈕:

12


切換畫面到圖片選擇,在這邊點選最下面藍色的Xamarin圖片:


13


畫面回到我們的測試App中,ImageView呈現結果如下:


14


點選LoadImageFromUrlButton按鈕:

15


等待網路讀取完畢後,ImageView呈現結果如下:

16

 


本篇文章同步發表於 昕力大學 ,網址是:

https://tpu.thinkpower.com.tw/tpu/File/html/201701/20170131193312_f.html

歡迎前往 昕力大學 觀看更多有關 Xamarin 的文章。

 

參考來源

Selecting a Gallery Image:
https://developer.xamarin.com/recipes/android/data/files/selecting_a_gallery_image/

Image from Url in ImageView:
https://forums.xamarin.com/discussion/4323/image-from-url-in-imageview

1 則留言:

  1. This is a very interesting and informative article that you have published. I truly appreciate the work that you have put into giving us all this valuable information.
    Blockchain Development Services

    回覆刪除