Visual Studio跨平台開發實戰(4) - Xamarin Android基本控制項介紹

前言

不同于iOS，Xamarin 在Visual Studio中針對Android，可以直接設計使用者接口。在本篇教學文章中，筆者會針對Android的項目目錄結構以及基本控件進行介紹，包含TextView，EditView，Toggle/ Switch以及Seekbar控件。

Android 項目目錄結構

在Visual Studio建立Android 應用程式項目後，在方案總管中會看到如下圖的目錄結構：

Assets： 放置在Assets檔案夾中的檔案，将會一起被封裝進Android的封裝檔中(建置動作要設定為"AndroidAsset"). 之後便可以透過如下的語句來存取Assets的資源。

public class ReadAsset : Activity

{

protected override void OnCreate (Bundle bundle) {

base.OnCreate (bundle);

InputStream input = Assets.Open ("my_asset.txt");}}

Resources：包含Drawable，Layout以及Values檔案夾. Drawable用來放置圖檔. 依照裝置的分辨率不同，還可以新增drawable-hdpi，drawable-mdpi，drawable-ldpi等檔案夾來存放不同分辨率的檔案. Layout檔案夾則是存放使用者接口檔案(擴充名為.axml). 而Value檔案夾則是可以存放不同型别的XML對應檔，例如styles.xml，colors.xml 針對Resources底下的檔案，建置動作請設定為”AndroidResource”

若您開啟預設的Main.axml，會看到如同底下的XML描述

LinearLayout: 主要的頁面架構，以垂直或水準的方式排列頁面上的對象，相當于Silverlight 中的stack pane

@+id/[對象名稱]: 告訴Android parser，為對象建立一個resource id

@string/[名稱]: 在String.xml中建立一個字元串資源，後續可供Resource類别存取

上述的@string則會對應到檔案夾Resources\Values\String.xml

名稱Hello對應到UI中Button的Text屬性

名稱ApplicationName對應到項目屬性中的應用程式名稱

名稱Hello2為自行定義的字元串資源

有了以上的基本概念後，接下來我們來介紹Android的基本控件。

TextView

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

2. 從左邊的工具欄将TextView拖放到畫面中，輕按兩下TextView并編輯文字

3. 接着拖拉一個TextView，并在右邊的屬性視窗設定textcolor為#2A3748，textsize為24dip

4. 再拖拉一個TextView并輸入文字，包含一個超連結. 在屬性中将autolink的屬性值改為web

結果如下:連結文字會自動變成超連結

5. 最後拖拉一個TextView并輸入文字，包含超過5位數的數字，在屬性中将autolink的屬性值改為phone

結果如下: 數字被更改為超連結

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

SetContentView(Resource.Layout.TextView);

7. 執行項目并檢視及操作有連結的TextView内容

EditText

1. 開啟Layout檔案夾下的EditText.axml

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

将屬性中的autoText設為true

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

将屬性中的capitalize設為words

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

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

SetContentView(Resource.Layout.EditText);

6. 執行項目，在第一個字段輸入錯的單字，将會出現拚字錯誤及建議視窗

7. 其他字段效果如下：

Switch / Toggle button

Switch跟Toggle其實是很相似的控件，都是控制開和關的選項，但顯示的方式有所不同. 我們在同一個練習中使用這2個控件. (注: Switch控件是在Android 4.0(API14)後才有，是以在工具箱中找不到此控件，必須在XML中自行輸入. 此外，您的仿真器也必須是Android 4.0以上才能執行)

1. 開啟SwitchToggle.axml. 在畫面上依序部署1個TextView，用來顯示訊息，1個ToggleButton以及1個Switch控件. 如下圖所示：

Axml的宣告如下，請微調部份屬性：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView

android:textAppearance="?android:attr/textAppearanceMedium"

android:layout_height="wrap_content"

android:id="@+id/textView1"/>

<ToggleButton

android:id="@+id/toggleButton1"

android:textOn="開"

android:textOff="關"

android:layout_marginBottom="6.7dp" />

<Switch

android:id="@+id/Switch1"

android:layout_marginRight="225.3dp" />

</LinearLayout>

2. 開啟SwitchToggleScreen.cs. 并撰寫以下程式代碼

//載入頁面

SetContentView(Resource.Layout.SwitchToggle);

//宣告并取得控件實體

ToggleButton toggle = FindViewById<ToggleButton>(Resource.Id.toggleButton1);

Switch _switch = FindViewById<Switch>(Resource.Id.Switch1);

TextView msg = FindViewById<TextView>(Resource.Id.textView1);

//處理Toggle Button的Click事件, 并将狀态顯示在TextView

toggle.Click+= (sender, e) => {

if (toggle.Checked) {

msg.Text = "目前Toggle Button的狀态是\"開\"";}

else{

msg.Text = "目前Toggle Button的狀态是\"關\"";};};

//處理Switch的Click事件, 并将狀态顯示在TextView

_switch.Click += (sender, e) => {

if (_switch.Checked) {

msg.Text = "目前Switch Button的狀态是\"開\"";}

msg.Text = "目前Switch Button的狀态是\"關\"";};};

Toggle Button及Switch 控件的操作幾乎完全相同，主要就是處理控件的click事件并判斷目前的開關狀況

3. 執行項目并檢視執行結果.

Seek Bar

1. 開啟seekBar.axml并從工具箱拖放TextView及SeekBar控件進螢幕

界面宣告的xml如下：

<Seekbar

android:id="@+id/Seekbar1"

android:layout_marginRight="48.0dp" />

2. 開啟SeekBarScreen.cs并在OnCreate事件中撰寫以下程式代碼：

SetContentView(Resource.Layout.SeekBar);

//宣告并取得頁面上的控件

var msg = FindViewById<TextView>(Resource.Id.textView1);

var seekbar = FindViewById<SeekBar>(Resource.Id.seekBar1);

//将seekBar的最大值設定為100

seekbar.Max = 100;

//處理SeekBar的ProgressChanged事件，并将目前的大小(進度)透過TextView呈現

seekbar.ProgressChanged += (sender，e) => {

msg.Text = string.Format("目前Seekbar的大小為{0}"，seekbar.Progress.ToString());

};

SeekBar的操作非常的直覺. 您隻需要處理SeekBar控件的ProgressChanged事件即可

結語

Android 的開發方式，與先前介紹的iOS略有不同。iOS透過Outlet及Action将View及Controller進行連結。而Android 則是透過Parser，為頁面上的控件建立id屬性，讓Activity可以透過FindViewById方式建立控件的對象實體，接下來的處理方式就與iOS或Windows Form在操作控件的方式類似。在下一篇教學文章中，将說明Android應用程式的多頁面處理。