ThinkPower University
回昕力大學瀏覽更多文章分享

主題:

Hello Xamarin !

文章簡介:

介紹Xamarin,使如何讓你使用C#Visual Studio 來開發iOSAndroidapp,以及簡單的HelloWorld範例。

作者:

Terry Lin

版本/產出日期:

2014



Hello Xamarin !


作者: Terry Lin


前言


應用程式發展的腳步,從來沒有停過。從早期的Windows 應用程式,到網路時代的web 應用程式,再到近幾年相當盛行的行動裝置應用程式(Mobile Application),身為C#的開發人員與Visual Studio的使用者。Windows PhoneWindows Store App的開發是否已滿足不了你了呢? 如果能夠讓你使用C#Visual Studio 來開發iOSAndroidapp。是否能再度喚醒你的開發魂? Xamain 正是為了這樣的需求而誔生的framework.


系統需求


iOS :由於Apple限制iOS應用程式編譯都需要透過Xcode,因此需要1MAC的機器作為Build Host

Windows 7 或更新的作業系統版本

Visual Studio 2010 / 2012

OS X Lion 或更新的作業系統版本

Xcode IDE 以及 iOS SDK

Android :對於Android開發,則可以完全在Windows 上進行。其系統需求如下:

Windows 7 或更新的作業系統版本

Java SDK

Android SDK

Xamarin.Android for Visual Studio

安裝Xamarin


無論是在Windows或是MAC上安裝Xamarin都相當簡單,只要在http://xamarin.com/download 上填入名稱及Email帳號,便可以進行下載。而只要依照安裝精靈點選下一步,就可以將Android SDK等相關元件裝好.



Windows 版安裝晝面

MAC版安裝畫面


使用Visual Studio 開發Android HelloWorld!


Xamarin 是一個商業的Framework,但您可以完整試用30天,或是使用免費版本。但免費版本限制開發人員編譯後的IL code大小不能超過32K,且無法使用Visual Studio進行開發(只能使用Xamarin提供的Xamarin Studio)。安裝好Xamarin之後,需要註冊一個Xamarin帳號進行啟動。
1。開啟Visual Studio,點選工具=>Xamarin Account



2。若先前已經註冊過Xamarin帳號(請注意,Xamarin帳號與先前下載所填的Email不同),請直接輸入帳號密碼登入,若您是第一次使用,請申請新的Xamarin帳號.


登入後便可以開始開發AndroidiOS應用程式!!

使用Xamarin 開發Android應用程式可說是相當的方便,不僅支援在Visual Studio中使用拖曳的方式設計使用者介面,還整合如AVDSDK Manager等工具。廢話不多說,開始我們在Visual Studio上的第1Android程式吧
1。在Visual Studio 中新增專案,在專案範本中,請展開C#節點,你會發現專案範本會多出AndroidiOS類型的專案範本,我們在這個範例中選擇Android Application,並在名稱中輸入"HelloDroid (當然您可以改成任何您想要的名稱)



2。專案建立後,您會發現工具列中多出幾個項目:



登入後便可以開始開發AndroidiOS應用程式囉!說明如下(由左至右)



目標裝置:可以選擇將目前的專案部署到哪一個裝置,預設的"Prompt for Device則是會在開始除錯/部署時,彈出視窗供使用者選擇。若有接上實體裝置,也會出現在此選單中。



裝置記錄: 可以挑選裝置並顯示目前裝置的活動記錄。




開啟Android 虛擬裝置管理員(AVD),透過此管理員,您可以新增,開啟或編輯Android模擬器



3。預設的專案中會內建一個Button控制項並寫著"Hello WorldClick Me!”,開啟專案下的Resources->Layout->Main.axml可以進行頁面的設計。



4。而此範例的主要程式碼則是Activity1.cs,直接透過下圖的註解來說明:



看到這樣的程式碼,我想大家應該都不會感到陌生。筆者有一些學員跟我說,感覺跟開發Windows Form應用程式好像~~ Activity1.cs 相當於MVC分層的Controller。透過SetContentView方法,告訴系統要載入哪一個頁面。接著透過FindViewById方法取得畫面上按鈕的物件實體。接著便可以針對按鈕的屬性或方法撰寫相關的程式碼,或是處理按鈕的事件。如上圖所示,預設的範例是使用匿名方法,我們將它註解後,改用Lambda Expression來撰寫。

5。接著按下F5,便可以開始進行除錯,若沒有預先開啟Android模擬器,則Running devices列表會是空的,這時可以點擊下方的"Start emulator image連結來啟動模擬器.



6。執行結果如下:



是不是相當簡單呢? 接下來我們來開始iOSHello World


使用Visual Studio 開發iOS HelloWorld!


與開發Android不同,目前Xamarin尚未支援在Visual Studio中設計應用程式頁面,但官方表示目前已在研發當中,並會在不久之後的版本提供此功能。因此目前iOS專案的UI設計必須透過MACInterface Builder (XCode的一部份),或是直接在程式中宣告控制項的位置及大小,Visual Studio中的HelloWorld Application便是使用此方法.

1. Visual Studio 中新增專案,在專案範本中選擇iOS下的iPhone,並在右邊的範本中選擇HelloWorld Application,接著指定專案名稱(此處為HelloIOS)



2. 第一次開啟iOS專案時,Xamarin會提示使用者只有在商業版或更高的版本才能在Visual Studio中開發iOS專案.



接著Xamarin便會自動啟用試用版本的授權,啟動完畢後,會提示使用者Visual Studio將會重新啟動.




若您MAC上的Xamarin授權尚未啟動,將會看到系統提示,說明Build Server(也就是MAC)尚未啟用授權。此時按下Activate按鈕可能沒有作用,請依照下面的步驟,在MAC上啟用Xamarin授權.



3. 由於XamarinMAC上預設是以免費版本開啟。因此可以透過以下方法強制啟用Xamarin試用授權。首先在MACFinder開啟Xamarin Studio



新增一個專案,選擇iPhone =>Single View Application。專案建立後,點擊功能表中的專案=>Profile Mono



此時會看到授權啟用的畫面。當完成啟用後,我們就可以回到Visual Studio來指定我們的Build Host.



4. Visual Studio的工具=>選項中,可以看到多出了一個Xamarin節點,點擊Xamarin下的iOS Settings,在右邊可以指定Mac Build Host.您可以直接輸入MAC的電腦名稱或IP位址,或按下Configure 進行設定.



在設定視窗中,Xamarin會搜尋同一網段中已安裝並啟用XamarinMAC機器。若狀態顯示為"Ready",請按下Connect進行連線。



若狀態不是"Ready,可以按下Diagnose按鈕進行連線診斷。如下圖所示,若某一個或多個項目無法通過連線診斷,則會出現failed,您可以展開failed的項目了解失敗的原因.



5. 請在組態管理中,將平台設定為iPhoneSimulator,預設為部署至實體機器,但這需要向Apple申請付費的開發者帳號.



接著在工具列中,可以選擇iOS 模擬器的版本,右邊綠色打勾的符號表示已與MAC Build Host的連線正常,若是反灰的狀態,請按一下右邊的圖示重新與指定的Build Host連線.



6. 開啟專案中的MyViewConrtoller.cs 檔。在此範例中,同樣是在畫面中間放置一個Button控制項(iOS中的類別名稱為UIButton)並顯示點擊的次數。由於我們是在程式中產生控制項,因此有部份程式碼是在宣告物件的佈局屬性,請參考下圖中程式碼的註解:



7. 接下來才是範例程式的重點,若您是在XCode中設計好UI,則可以取代上面的程式.



如同先前AndroidHelloWorld,在iOS中,按鈕的點擊事件不叫Click,而是TouchUpInside,因此我們透過此事件的處理,在使用者點擊了按鈕後,改變按鈕的顯示文字(使用UIButtonSetTitle方法)。最後將Button控制項透過View.AddSubview方法加入到畫面當中。執行結果如下:




跨平台開發簡介


作為一個跨平台的解決方案,使用Visual Studio 搭配Xamarin開發行動裝置應用程式具有以下特色:
可以在同一方案中包含所有平台的專案: 包括Windows PhoneWindows 8 Store AppiOS以及Android。如下圖所示:



程式碼共享:在設計時,將與平台無關的商業邏輯、服務存取、資料存取以及資料層從介面抽離出來,如下圖所示:







底下說明如何才能達成上述的專案整合以及程式碼共用,首先來看看架構示意圖:



從上述的示意圖,我們可以看到,左半邊是可以抽離出來的共用程式碼,這部份將獨立成一個專案,並只加入常用的組件(Base Class Library),若有部份程式碼使用到與平台相關的組件或技術,可以在程式碼中加入條件式編譯 的指示詞,供各平台直接使用,不需要進行修改。
而在各平台的專案中,可以透過檔案連結的方式,將共用程式碼的部份連結到各平台專案。但由於目前Visual Studio並沒有提供可以同時設定多個檔案或整個資料夾連結的方式,因此若每個檔案都要手動連結,其實是較不實際的。而且日後共用程式碼專案若有檔案的異動,如新增或刪除。各平台專案並不會同步更新。此時我們可以透過1個叫做Project Linker 2012的擴充功能進行協助(它也有對應Visual Studio 2010的版本).




安裝好Project Linker後,我們便可以在各平台專案點擊滑鼠右鍵=>Add project link



接著選擇來源專案,之後便會為來源專案的每資料夾及檔案進行連結.



連結的檔案在Visual Studio中都會有個藍色箭頭的圖示




透過上述的設定後,便可以在各平台專案共用程式碼。在開發平台專案時,只要針對使用者介面以及針對控制項的操作撰寫程式即可。對於商業邏輯,資料存取的部份則可以在各平台共用,這是使用原生的開發方式(Objective-CJava)所無法達到的。實際執行結果如下:



結語


本文說明了Xamarin 的特色以及開發架構。希望透過簡單的範例讓第一次接觸的開發人員能夠立即著手進行安裝及開發。在接下來的系列文章中,將會介紹如何使用XamarinVisual Studio 使用iOS以及Android的基本控制項及多頁面的串接。


參考資訊


http://blog.xamarin.com/android-in-c-sharp/

http://www.thinkpower.com.tw/xamarin/

http://docs.xamarin.com/guides/ios/getting_started

http://docs.xamarin.com/guides/android/getting_started