前言
不同于iOS, Xamarin 在Visual Studio中針對Android, 可以直接設計使用者界面. 在本篇教學文章中, 筆者會針對Android的專案目錄結構以及基本控制項進行介紹, 包含TextView, EditView, Toggle/ Switch以及Seekbar控制項.
Android 專案目錄結構
在Visual Studio建立Android 應用程序專案后, 在方案總覽中會看到如下圖的目錄結構：
Assets：放置在Assets文件夾中的文件, 將會一起被封裝進Android的封裝文檔中(建構動作設定為"AndroidAsset"). 之后便可以通過如下的陳述式來存取Assets的資源。
| 1 |
public class ReadAsset : Activity |
| 5 |
protected override void OnCreate (Bundle bundle) { |
| 7 |
base.OnCreate (bundle); |
| 9 |
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 panel
- @+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的聲明如下, 請微調部分屬性：
| 01 |
<LinearLayoutxmlns:android="" |
| 03 |
android:orientation="vertical" |
| 05 |
android:layout_width="fill_parent" |
| 07 |
android:layout_height="fill_parent"> |
| 11 |
android:textAppearance="?android:attr/textAppearanceMedium" |
| 13 |
android:layout_width="fill_parent" |
| 15 |
android:layout_height="wrap_content" |
| 17 |
android:id="@+id/textView1"/> |
| 21 |
android:layout_width="fill_parent" |
| 23 |
android:layout_height="wrap_content" |
| 25 |
android:id="@+id/toggleButton1" |
| 31 |
android:layout_marginBottom="6.7dp"/> |
| 35 |
android:layout_width="fill_parent" |
| 37 |
android:layout_height="wrap_content" |
| 43 |
android:id="@+id/Switch1" |
| 45 |
android:layout_marginRight="225.3dp"/> |
2. 開啟SwitchToggleScreen.cs. 并編寫以下代碼.
| 03 |
SetContentView(Resource.Layout.SwitchToggle); |
| 07 |
ToggleButton toggle = FindViewById<ToggleButton>(Resource.Id.toggleButton1); |
| 09 |
Switch _switch = FindViewById<Switch>(Resource.Id.Switch1); |
| 11 |
TextView msg = FindViewById<TextView>(Resource.Id.textView1); |
| 13 |
//處理Toggle Button的Click事件, 并將狀態顯示在TextView |
| 15 |
toggle.Click+= (sender, e) => { |
| 19 |
msg.Text = "目前Toggle Button的狀態是\"開\"";} |
| 23 |
msg.Text = "目前Toggle Button的狀態是\"關\"";};}; |
| 25 |
//處理Switch的Click事件, 并將狀態顯示在TextView |
| 27 |
_switch.Click += (sender, e) => { |
| 29 |
if (_switch.Checked) { |
| 31 |
msg.Text = "目前Switch Button的狀態是\"開\"";} |
| 35 |
msg.Text = "目前Switch Button的狀態是\"關\"";};}; |
Toggle Button及Switch 控制項的操作幾乎完全相同, 主要就是處理控制項的click事件并判斷目前的開關狀況.
3. 執行專案并檢視執行結果.
Seek Bar
1. 開啟seekBar.axml并從工具箱拖放TextView及SeekBar控制項進銀幕
界面聲明的xml如下：
| 01 |
<LinearLayoutxmlns:android="" |
| 03 |
android:orientation="vertical" |
| 05 |
android:layout_width="fill_parent" |
| 07 |
android:layout_height="fill_parent"> |
| 11 |
android:textAppearance="?android:attr/textAppearanceMedium" |
| 13 |
android:layout_width="fill_parent" |
| 15 |
android:layout_height="wrap_content" |
| 17 |
android:id="@+id/textView1"/> |
| 21 |
android:layout_width="fill_parent" |
| 23 |
android:layout_height="wrap_content" |
| 25 |
android:id="@+id/seekBar1" |
| 27 |
android:layout_marginTop="48.0dp"/> |
2. 開啟SeekBarScreen.cs并在OnCreate事件中編寫以下代碼:
| 03 |
SetContentView(Resource.Layout.SeekBar); |
| 07 |
var msg = FindViewById<TextView>(Resource.Id.textView1); |
| 09 |
var seekbar = FindViewById<SeekBar>(Resource.Id.seekBar1); |
| 15 |
//處理SeekBar的ProgressChanged事件, 并將目前的大小(進度)通過extView呈現 |
| 17 |
seekbar.ProgressChanged += (sender, e) => { |
| 19 |
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應用程序的多頁面處理.
本文轉載自
標簽：
移動開發跨平臺Xamarin
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
5次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線