2014年3月3日 星期一

在Visual Studio中透過Xamarin建立iOS多層頁面程式(上)

 

在iOS的App開發當中,多層頁面架構出來的App是很稀鬆平常的事情,自從在XCode當中有了StoryBoard的輔助使用,要開發多層頁面時變得相對簡單了些,但是如果要做一些比較複雜的控制時,還是得了解基本的頁面切換控制概念,而非靠StoryBoard的設定就能輕易完成的。

 

iOS_1iOS_2iOS_3


不過因為在Visual Studio中透過Xamarin開發iOS App,目前為止還沒有辦法”直接”使用StoryBoard來建立多層頁面,所以我們就只能靠直接撰寫程式的方式來完成多層頁面的開發了…

 

(迷之聲: 何時才可以呢??透過直接撰寫程式的方式實在太麻煩了...)

(編按: 透過直接撰寫程式的方式,可以更了解多層頁面轉換的關係,不是很好嗎?!不過也別太難過,相信在不久以後的將來可以...握!!!)

 

首先,我們先來建立一個iOS範本當中的iPhone Empty專案吧~~

image

這專案我們取名叫"iOSMutiScreenedApp",接著就按下確定,等待Visual Studio建立相關的專案程式檔~~~

因為是空專案,所以接著立馬新增一個UI的UIViewController來當作App的主要ViewController,來取名叫做"MainViewController"。

image

而因為我們又想要有多層頁面的展現,所以我們再繼續新增兩個UIViewController來做為下兩層的轉跳頁面。我們分別取名叫做"SecondViewController"及"EditViewController"。

完成後,目前的方案總管的檔案狀況會如下。

image

 

緊接著打開AppDelegate.cs,來加入導覽與控制頁面轉跳的程式吧~~

找到AppDelegate.cs當中的FinishedLaunching這段程式。將整個AppDelegate類別的撰寫修改成如下圖:

image

(紅色框為新增,綠色框為修改)

 

接著一樣按下"開始(F5)",在Mac上面應該就能夠順利看到如下的畫面了~~

image

趕緊打開MainViewController.cs找到ViewDidLoad(),來設定一下App畫面上的導覽列Title文字~~

程式修改會如下圖修改的狀況:

image

(紅色框為新增)

 

再按下"開始(F5)",在Mac上面應該就能夠順利看到如下的畫面了(紅色框是跟前面的畫面不一樣的地方)~~

image

 

接著我們再繼續增加一個按鈕的程式碼,準備來可以切換到下一個畫面的操作。

image

 

完成後再按下"開始(F5)",Mac上的模擬器應該就能夠順利看到如下的畫面了:

image

 

但注意,現在按下產生的按鈕也沒有用,甚至還會發生程式中斷執行的例外...

(看倌...是沒看到事件處理常式當中寫著throw new NotImplementedException()嗎???當然是會發生中斷執行的例外阿...)

 

緊接著再加入以下程式碼:

image

(紅色框為新增)

 

在這邊我們透過 NaigationController.PushViewController()這個方法,要將我們的secondVC這個ViewController加入進來。

 

所以再次執行起來,點選按鈕就能夠切換到下一個頁面啦~~

imageimageimage

而在下一個畫面當中的NavigationBar當中,點選左邊的NavigationBarButton就可以再切換回主畫面囉~~

 

各位看倌...有沒有成功呢?

 

接著我們就要進行更進階的頁面切換方式啦!!!

敬請期待~~~

 

(迷之聲: 可別富奸阿...)

(編按: 這次沒富奸阿...兩天後就有下集了呀...請看"在Visual Studio中透過Xamarin建立iOS多層頁面程式(下)")

沒有留言:

張貼留言