天天看點

Visual Studio跨平台開發實戰(5) - Xamarin Android多頁面應用程式開發

前言

大部份的Andr​​oid 都具有實體或虛拟的Back鍵. 是以在處理多頁面應用程式時, 與先前所介紹的iOS Navigation controller 比較起來會簡單許多.

1. 開啟Visual Studio 并新增Android Application 專案并命名為Lab4-MultiScreen

<a href="http://files.dotblogs.com.tw/taihon64/1308/VisualStudio5XamarinAndroid_8AEB/clip_image002_2.jpg"></a>

2. 在Layout資料夾中新增Second.axml

<a href="http://files.dotblogs.com.tw/taihon64/1308/VisualStudio5XamarinAndroid_8AEB/clip_image003_2.jpg"></a>

在Second.axml 中拖放1個TextView并标示此為第2個Activity

<a href="http://files.dotblogs.com.tw/taihon64/1308/VisualStudio5XamarinAndroid_8AEB/clip_image004_2.jpg"></a>

2. 在專案底下新增一個SecondActivity.cs. 在OnCreate事件中撰寫以下程式碼:

3. 開啟Activity1.cs, 在class name的地方按滑鼠右鍵=&gt;重構=&gt;重新命名. 将類别名稱改為FirstActivity. 記得在方案總管中的檔名也一并改為FirstActivity.cs

<a href="http://files.dotblogs.com.tw/taihon64/1308/VisualStudio5XamarinAndroid_8AEB/clip_image006_2.jpg"></a>

4. 開啟Main.axml, 在畫面中放置1個Button并指定Text屬性值為”Load Second Activity”并将id 的屬性值變更為”@+id/ShowSecond”

5. 開啟FirstActivity.cs, 在OnCreate事件中撰寫以下程式碼:

<code>3</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;</code><code>//宣告並取得按鈕物件, 並在按鈕的click事件處理中載入SecondActivity&lt;/span&gt; //宣告并取得按鈕物件, 并在按鈕的click事件進行中載入SecondActivity&lt;/span&gt;</code>

<code>4</code>

<code>5</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;Button button = FindViewById&lt; Button &gt;(Resource.Id.showSecond);&lt;/span&gt; Button button = FindViewById&lt; Button &gt;(Resource.Id.showSecond);&lt;/span&gt;</code>

<code>6</code>

<code>7</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;button.Click += </code><code>delegate</code><code>&lt;/span&gt; button.Click += </code><code>delegate</code><code>&lt;/span&gt;</code>

<code>8</code>

<code>9</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;{…….按鈕處理函式}&lt;/span&gt; {…….按鈕處理函式}&lt;/span&gt;</code>

Button的click處理函式中, 我們将使用3種方法來載入SecondActivity.

方法一: 使用内建的StartActivity方法, 程式碼如下:

<code>1</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;</code><code>//呼叫其他Activity的第一種方法(隱含的建立Intent)&lt;/span&gt; //呼叫其他Activity的第一種方法(隐含的建立Intent)&lt;/span&gt;</code>

<code>2</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;StartActivity(</code><code>typeof</code><code>(SecondActivity));&lt;/span&gt; StartActivity(</code><code>typeof</code><code>(SecondActivity));&lt;/span&gt;</code>

方法二: 建立Intent, 然後使用StartActivity載入其他SecondActivity. 程式碼如下:

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;</code><code>//呼叫其他Activity的第二種方法, 建立Intent, 然後使用StartActivity載入其他Activity&lt;/span&gt; //呼叫其他Activity的第二種方法, 建立Intent, 然後使用StartActivity載入其他Activity&lt;/span&gt;</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;var second = </code><code>new</code> <code>Intent(</code><code>this</code><code>, </code><code>typeof</code><code>(SecondActivity));&lt;/span&gt; var second = </code><code>new</code> <code>Intent(</code><code>this</code><code>, </code><code>typeof</code><code>(SecondActivity));&lt;/span&gt;</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;StartActivity(second);&lt;/span&gt; StartActivity(second);&lt;/span&gt;</code>

方法三: 建立Intent, 并透過Intent.PutExtra載入Activity并傳​​入參數. 程式碼如下:

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;</code><code>//使用Intent.PutExtra載入Activity並傳入參數var second = new Intent(this, typeof(SecondActivity));&lt;/span&gt; //使用Intent.PutExtra載入Activity并傳​​入參數var second = new Intent(this, typeof(SecondActivity));&lt;/span&gt;</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;second.PutExtra(</code><code>"FirstData"</code><code>, </code><code>"Data from FirstActivity"</code><code>);&lt;/span&gt; second.PutExtra(</code><code>"FirstData"</code><code>, </code><code>"Data from FirstActivity"</code><code>);&lt;/span&gt;</code>

上述的3種方式, 第1個跟第2個是一樣的, 使用第1種方式, 會隐含建立一個Intent物件。

6. 執行專案并檢視結果.

7. 透過上述的第3個方法, 可以像QueryString般傳遞參數到下一個Activity. 現在我們開啟SecondActivity.cs. 透過Intent的GetStringExtra方法來取得參數的值. 在Oncreate方法中撰寫以下程式碼:

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;</code><code>//載入頁面SetContentView(Resource.Layout.Second);&lt;/span&gt; //載入頁面SetContentView(Resource.Layout.Second);&lt;/span&gt;</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;</code><code>//宣告並取得TextView物件var label = FindViewById&lt;/span&gt; //宣告并取得TextView物件var label = FindViewById&lt;/span&gt; &lt;textview&gt; &lt;span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"&gt;&lt;span class="google-src-text" &gt;(Resource.Id.screen2Label);&lt;/span&gt; (Resource.Id.screen2Label);&lt;/span&gt;</code>

<code>&lt;span </code><code>class</code><code>=</code><code>"notranslate"</code> <code>onmouseover=</code><code>"_tipon(this)"</code> <code>onmouseout=</code><code>"_tipoff()"</code><code>&gt;&lt;span </code><code>class</code><code>=</code><code>"google-src-text"</code> <code>style=</code><code>"direction: ltr; text-align: left"</code><code>&gt;</code><code>//透過Intent.GetStringExtra取得從前一個Activity所傳來的訊息label.Text = Intent.GetStringExtra("FirstData") ?? "Data not available";&lt;/span&gt; //透過Intent.GetStringExtra取得從前一個Activity所傳來的訊息label.Text = Intent.GetStringExtra("FirstData") ?? "Data not available";&lt;/span&gt; &lt;/textview&gt;</code>

在上述程式碼中, 我們透過Intent的GetStringExtra(“參數名稱”)來取得字串型别的參數. 事實上還可以透過類似的方法取得不同型别的參數值. 如下圖所示:

<a href="http://files.dotblogs.com.tw/taihon64/1308/VisualStudio5XamarinAndroid_8AEB/clip_image007_2.jpg"></a>

而??陳述式則是用來判斷是否為Null的友善寫法. 若取出的值為Null則顯示後面的字串.

8. 執行專案并檢視結果, 如下圖所示

<a href="http://files.dotblogs.com.tw/taihon64/1308/VisualStudio5XamarinAndroid_8AEB/clip_image009_2.jpg"></a>

結語

在本篇文章中, 我們介紹Android 應用程式在多頁面中的切換, 相較于iOS, Android 對于多頁面的處理較為友善. 另外在Android中也提供Tab控制項在多頁面之間進行切換. 有興趣的朋友可以參考以下文章:

Tab Layout

<a href="http://docs.xamarin.com/guides/android/user_interface/tab_layout">http://docs.xamarin.com/guides/android/user_interface/tab_layout</a>

繼續閱讀