前言

不同于iOS, Xamarin 在Visual Studio中針對(duì)Android, 可以直接設(shè)計(jì)使用者界面. 在本篇教學(xué)文章中, 筆者會(huì)針對(duì)Android的專案目錄結(jié)構(gòu)以及基本控制項(xiàng)進(jìn)行介紹, 包含TextView, EditView, Toggle/ Switch以及Seekbar控制項(xiàng).

Android 專案目錄結(jié)構(gòu)

在Visual Studio建立Android 應(yīng)用程序?qū)０负? 在方案總覽中會(huì)看到如下圖的目錄結(jié)構(gòu)：

Assets：放置在Assets文件夾中的文件, 將會(huì)一起被封裝進(jìn)Android的封裝文檔中(建構(gòu)動(dòng)作設(shè)定為"AndroidAsset"). 之后便可以通過如下的陳述式來存取Assets的資源。

Resources：包含Drawable, Layout以及Values文件夾. Drawable用來放置圖片. 依照設(shè)備的解析度不同, 還可以新增drawable-hdpi, drawable-mdpi, drawable-ldpi等文件夾來存放不同解析度的文件. Layout文件夾則是存放使用者界面文檔(副文檔名為.axml). 而Value文件夾則是可以存放不同類別的XML對(duì)應(yīng)文檔, 例如styles.xml, colors.xml… 針對(duì)Resources底下的文件, 動(dòng)作請(qǐng)?jiān)O(shè)定為”AndroidResource”

若您開啟預(yù)設(shè)的Main.axml, 會(huì)看到如同下面的XML描述

• LinearLayout: 主要的頁(yè)面框架, 以垂直或水平的方式排列頁(yè)面上的對(duì)象, 相當(dāng)于Silverlight 中的stack panel
•  @+id/[對(duì)象名稱]: 告訴Android parser, 為對(duì)象建立一個(gè)resource id
•  @string/[名稱]: 在String.xml中建立一個(gè)字符串資源, 后續(xù)可供Resource類別存取.

上述的@string則會(huì)對(duì)應(yīng)到文件夾Resources\Values\String.xml

• 名稱Hello對(duì)應(yīng)到UI中Button的Text屬性
• 名稱ApplicationName對(duì)應(yīng)到專案屬性中的應(yīng)用程序名稱
• 名稱Hello2為自行定義的字符串資源.

有了以上的基本概念后, 接下來我們來介紹Android的基本控制項(xiàng)。

TextView

1. 開啟Lab03-BasicControls 專案并開啟Layout文件夾下的TextView.axml

2. 從左邊的工具列將TextView拖放到畫面中, 雙擊TextView并編輯文字

3. 接著拖拉一個(gè)TextView, 并在右邊的屬性視窗設(shè)定textcolor為#2A3748, textsize為24dip

4. 再拖拉一個(gè)TextView并輸入文字, 包含一個(gè)超鏈接. 在屬性中將autolink的屬性值改為web.

結(jié)果如下:鏈接文字會(huì)自動(dòng)變成超鏈接.

5. 最后拖拉一個(gè)TextView并輸入文字, 包含超過5位數(shù)的數(shù)字, 在屬性中將autolink的屬性值改為phone

結(jié)果如下: 數(shù)字被更改為超鏈接

6. 開啟TextViewScreen.cs 并在OnCreate 事件中載入Layout中的TextView

SetContentView(Resource.Layout.TextView);

7. 執(zhí)行專案并檢視及操作有鏈接的TextView內(nèi)容.

EditText

1. 開啟Layout文件夾下的EditText.axml

2. 從工具箱中拖拉1個(gè)Text(Small)及1個(gè)Plain Text對(duì)象到畫面上并編輯Text的文字如下：

將屬性中的autoText設(shè)為true

3. 拖拉一組Text及Plain Text對(duì)象到畫面上并編輯Text的文字如下：

將屬性中的capitalize設(shè)為words.

4. 拖拉一組Text及password對(duì)象到畫面上并編輯Text的文字如下：

5. 開啟EditTextScreen.cs 并在OnCreate 事件中載入Layout中的TextView

SetContentView(Resource.Layout.EditText);

6. 執(zhí)行專案, 在第一個(gè)欄位輸入錯(cuò)的單字, 將會(huì)出現(xiàn)拼字錯(cuò)誤及建議視窗.

7. 其他欄位效果如下：

Switch / Toggle button

Switch跟Toggle其實(shí)是很相似的控制項(xiàng), 都是控制開和關(guān)的選項(xiàng), 但顯示的方式有所不同. 我們?cè)谕粋€(gè)練習(xí)中使用這2個(gè)控制項(xiàng). (注: Switch控制項(xiàng)是在Android 4.0(API14)后才有, 因此在工具箱中找不到此控制項(xiàng), 必須在XML中自行輸入. 此外, 您的模擬器也必須是Android 4.0以上才能執(zhí)行)

1. 開啟SwitchToggle.axml. 在畫面上依序部署1個(gè)TextView, 用來顯示訊息, 1個(gè)ToggleButton以及1個(gè)Switch控制項(xiàng). 如下圖所示：

Axml的聲明如下, 請(qǐng)微調(diào)部分屬性：

2. 開啟SwitchToggleScreen.cs. 并編寫以下代碼.

Toggle Button及Switch 控制項(xiàng)的操作幾乎完全相同, 主要就是處理控制項(xiàng)的click事件并判斷目前的開關(guān)狀況.

3. 執(zhí)行專案并檢視執(zhí)行結(jié)果.

Seek Bar

1. 開啟seekBar.axml并從工具箱拖放TextView及SeekBar控制項(xiàng)進(jìn)銀幕

界面聲明的xml如下：

2. 開啟SeekBarScreen.cs并在OnCreate事件中編寫以下代碼:

SeekBar的操作非常的直截. 您只需要處理SeekBar控制項(xiàng)的ProgressChanged事件即可.

3. 執(zhí)行專案并檢視執(zhí)行結(jié)果.

結(jié)語

Android 的開發(fā)方式, 與先前介紹的iOS略有不同. iOS通過Outlet及Action將View及Controller進(jìn)行連接. 而Android 則是通過Parser, 為頁(yè)面上的控制項(xiàng)建立id屬性, 讓Activity可以通過FindViewById方式建立控制項(xiàng)的對(duì)象實(shí)體, 接下來的處理方式就與iOS或Windows Form在操作控制項(xiàng)的方式類似. 在下一篇教學(xué)文章中, 將說明Android應(yīng)用程序的多頁(yè)面處理.

本文轉(zhuǎn)載自