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

原文 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=&quot;?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1"/>
<ToggleButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/toggleButton1"
android:textOn="開"
android:textOff="關"
android:layout_marginBottom="6.7dp" />
<Switch
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textOn="開"
android:textOff="關"
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的狀態是\"開\"";}
else{
msg.Text = "目前Switch Button的狀態是\"關\"";};};

Toggle Button及Switch 控件的操做幾乎徹底相同，主要就是處理控件的click事件並判斷目前的開關情況
3. 執行項目並檢視執行結果.

 

Seek Bar

1. 開啓seekBar.axml並從工具箱拖放TextView及SeekBar控件進屏幕

界面宣告的xml以下：

<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=&quot;?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1"/>
<Seekbar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/Seekbar1"
android:layout_marginRight="48.0dp" />

</LinearLayout>

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事件便可
3. 執行項目並檢視執行結果.

 

結語

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