2013年9月20日 星期五

第一次使用Xamarin就上手(四) - Xamarin for Android 初體驗 with VS 2012


在完成Xamarin的安裝後,我們趕緊來介紹與體驗一下如何在Visual Studio 2012當中,透過Xamarin來開發Android的Native App吧~~

(而各位看倌繼續看下去之前,請先確認手上的環境都已經有按照"第一次使用Xamarin就上手(一) - 安裝Xamarin Step-by-Step Part1"準備好了。)


首先,照慣例,還是要先打開親切迷人的Visual Studio 2012。

1

然後在Visual Studio 2012的功能選單列中,點選"檔案" –> "新增" –> "專案"。

2

在出現的"新增專案"的對話視窗當中,我們選擇"Android"底下的"AndroidApplication",並且將此專案的名稱命名為"AndroidXamarinApp"後,點選"確定"。

3

而有時在建立專案的過程當中會遇到類似下面的畫面時,就是Xamarin又有針對Xamarin.Android有新的Library的更新了,就趕緊點選"Ready to download"做更新吧~~

(下載完成後若要想安裝更新,請務必先關閉Visual Studio 2012後再安裝。)

4-14-2

經過一陣專案檔案建立的"陣痛"(如果HD是用SSD的看倌,應該就不會等這麼久),最後終於看到Visual Studio 2012完成建立Xamarin.Android的Android Application的開發專案了。

(這並非Xamarin or VS 2012的問題,而是用Eclipse開Android的專案時,也是要等一段時間才會建立好,相較之下,在VS 2012用Xamarin所建立的Android App專案檔,所要花的時間已經好很多了,SSD才是王道...)

 

讓我們來看一下在Visual Studio 2012利用Xamarin.Android建立Android Application的專案檔會包含哪些東西,並且對照一下在Eclipse當中利用"Android Application"專案範本所建立出來的的專案資料。

6-1 6-2

看起來在Visual Studio 2012當中所建立出來的Android Application專案檔案,好像少了不少東西耶!!但實際上,所建立出來的專案檔案已經,包含一個基本Android Application當中所需要用到的必要檔案啦~~

所以此時我們在專案當中什麼都不動,就直接"建置"該Android Application範本專案。只要相關設定都沒問題,正常來講應該要能看到該專案順利建置成功。

7

再來就可以準備執行看看目前的這個Android Application的專案了。 接著我們來按下"開始(F5)"來執行我們建立好的這個Android Application專案吧~~

在出現的"Select Device"當中,點選"Start emulator image”,來選擇我們想要部署測試Android模擬器。

8

若無建立過Android emulator image的話,請點選"Create new emulator image”,來建立Android模擬器。若已有建立過的話,則可在"Select Emulator"的對話視窗當中就會看到可選的image。點選想要執行的Android模擬器後,點選"OK"。

9

接著就會看到Android的模擬器執行起來。

10

再回到"Select Device”對話視窗當中,就會看到"Running Devices"當中(若沒有,可點選一下旁邊的"Refresh”),列出我們目前正在執行的(模擬)裝置。點選後,再點選"OK”。

11

接著等待模擬器啟動完成後,就會看到我們程式完成的部屬動作後,執行起來。

12

接著我們回到Visual Studio 2012當中,按下"停止偵錯(Shift + F5)”後。讓我們來把專案預設的畫面與程式來刪除掉,來認識Xamarin所建立的Andorid Application專案的最基本設定與使用。

先在方案總管當中找到預設建立出來的"Main.axml" 與 "Aativity1.cs"這兩個檔案,點選後並在右鍵選單上點選"刪除"。

13

接著再Resources資料夾底下Layout資料夾上點選右鍵選單->加入->新增項目。

14

在加入新項目的對話視窗當中,選擇"Android Layout",在此命名為"MyMainLayout.axml",後點選"新增"。

15

接著在AndroidXamarinApp專案上,點選右鍵選單->加入->新增項目。

16

在加入新項目的對話視窗當中,選擇"Activity",在此命名為"MyMainActivity.axml",後點選"新增"。

17

完成後,方案總管的呈現應該會變成這樣。

18

此時如果直接按下"開始(F5)"的話,你就會遇到下面這個對話視窗。

19

這個對話視窗也就是告訴你,必須要幫你的應用程式設定啟動的Activity,不然無法正確的啟動這個Application的執行。

所以我們趕緊在我們所增加的MyMainActivity.cs這個檔案,按照對話視窗上面所說的來增加相關的自訂屬性類別的撰寫。

20

加入完畢後,再重新按下"開始(F5)",就可以看到在模擬器當中,這個應用程式順利的執行起來了。

21

天啊~~所出現的畫面,跟之前的畫面當中所出現的圖示不同啊!!!而且還是只有出現那隻醜醜的Andorid綠色怪獸,要能夠自訂出現自己的圖示阿~~~

沒關係,緊接著我們就趕緊來設定出現自己的圖示吧!!!

首先,我們先在方案總管當中找到Resources->Drawable->Icon.png,並且把它置換成我們自己的圖檔。

22

繼續在Activity的自訂屬性類別,加上如下的撰寫。

23

加入完畢後,再重新按下"開始(F5)",就可以這次所執行起來的畫面,是我們自己在專案當中自訂的圖示了。

24

這下我們真的證實利用Visual Studio來寫出Android的App了~~~

不過,Android的App設計當中,如果有一個Activity的建立,通常都會對應一個Layout的畫面規劃,那我們又該如何把之前加好的Layout畫面檔案對應到這個Activity呢?!才不會讓App一直是一片黑色的畫面阿~~~

(沒有畫面、沒有畫面...完全沒有畫面)

在方案總管當中,找到我們之前所建立的MyMainLayout.axml。

25

然後我們點選下方的LinearLayout,並且來變更他的屬性background設定為白色(按照圖片上的數字點選)。

26

接著就會看到以下改變。

27

接著再回到MyMainActivity.cs,在OnCreate的方法當中,加入以下的程式碼。

28

再次按下"開始(F5)",就可以這次所執行起來的畫面,就是我們自訂的Layout畫面了。

29

 

終於阿~~~

而我們若是完成到這裡,有關於Xamarin.Android的相關使用,就可以一點一滴的繼續建立與完成啦!!!

而相關的Xamarin.Android的進階使用,可到以下連結來參考當麻兄的網誌,有關於Xamarin的介紹與使用喔~~

http://www.dotblogs.com.tw/junegoat/Tags/Xamarin/default.aspx

沒有留言:

張貼留言