• Visual Studio 跨平台開發實戰(4)

    前言

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

     

    Android 專案目錄結構

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

    clip_image001

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

    1 public class ReadAsset : Activity
    2  
    3 {
    4  
    5 protected override void OnCreate (Bundle bundle) {
    6  
    7 base.OnCreate (bundle);
    8  
    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描述

    clip_image002

    • LinearLayout: 主要的頁面框架, 以垂直或水平的方式排列頁面上的物件, 相當於Silverlight 中的stack panel
    • @+id/[物件名稱]: 告訴Android parser, 為物件建立一個resource id
    • @string/[名稱]: 在String.xml中建立一個字串資源, 後續可供Resource類別存取.

    上述的@string則會對應到資料夾ResourcesValuesString.xml

    clip_image004

     

    • 名稱Hello對應到UI中Button的Text屬性
    • 名稱ApplicationName對應到專案屬性中的應用程式名稱
    • 名稱Hello2為自行定義的字串資源.

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

     

    TextView

    1. 開啟Lab03-BasicControls 專案並開啟Layout資料夾下的TextView.axml

    clip_image005

     

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

    clip_image007

     

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

    clip_image008

     

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

    clip_image009

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

    clip_image010

     

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

    clip_image011

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

    clip_image012

     

    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的文字如下：

    clip_image013

     

    將屬性中的autoText設為true

    clip_image014

     

    3. 拖拉一組Text及Plain Text物件到畫面上並編輯Text的文字如下：

    clip_image015

     

    將屬性中的capitalize設為words.

    clip_image016

     

    4. 拖拉一組Text及password物件到畫面上並編輯Text的文字如下：

    clip_image017

     

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

    SetContentView(Resource.Layout.EditText);

    6. 執行專案, 在第一個欄位輸入錯的單字, 將會出現拚字錯誤及建議視窗.

    clip_image018

     

    7. 其他欄位效果如下：

    clip_image019

     

    Switch / Toggle button

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

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

    clip_image021

     

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

    01 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    02  
    03 android:orientation="vertical"
    04  
    05 android:layout_width="fill_parent"
    06  
    07 android:layout_height="fill_parent">
    08  
    09 <TextView
    10  
    11 android:textAppearance="?android:attr/textAppearanceMedium"
    12  
    13 android:layout_width="fill_parent"
    14  
    15 android:layout_height="wrap_content"
    16  
    17 android:id="@+id/textView1" />
    18  
    19 <ToggleButton
    20  
    21 android:layout_width="fill_parent"
    22  
    23 android:layout_height="wrap_content"
    24  
    25 android:id="@+id/toggleButton1"
    26  
    27 android:textOn="開"
    28  
    29 android:textOff="關"
    30  
    31 android:layout_marginBottom="6.7dp" />
    32  
    33 <Switch
    34  
    35 android:layout_width="fill_parent"
    36  
    37 android:layout_height="wrap_content"
    38  
    39 android:textOn="開"
    40  
    41 android:textOff="關"
    42  
    43 android:id="@+id/Switch1"
    44  
    45 android:layout_marginRight="225.3dp" />
    46  
    47 </LinearLayout>

     

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

    01 //載入頁面
    02  
    03 SetContentView(Resource.Layout.SwitchToggle);
    04  
    05 //宣告並取得控制項實體
    06  
    07 ToggleButton toggle = FindViewById<ToggleButton>(Resource.Id.toggleButton1);
    08  
    09 Switch _switch = FindViewById<Switch>(Resource.Id.Switch1);
    10  
    11 TextView msg = FindViewById<TextView>(Resource.Id.textView1);
    12  
    13 //處理Toggle Button的Click事件, 並將狀態顯示在TextView
    14  
    15 toggle.Click+= (sender, e) => {
    16  
    17 if (toggle.Checked) {
    18  
    19 msg.Text = "目前Toggle Button的狀態是"開"";}
    20  
    21 else{
    22  
    23 msg.Text = "目前Toggle Button的狀態是"關"";};};
    24  
    25 //處理Switch的Click事件, 並將狀態顯示在TextView
    26  
    27 _switch.Click += (sender, e) => {
    28  
    29 if (_switch.Checked) {
    30  
    31 msg.Text = "目前Switch Button的狀態是"開"";}
    32  
    33 else{
    34  
    35 msg.Text = "目前Switch Button的狀態是"關"";};};

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

    3. 執行專案並檢視執行結果.

     

    Seek Bar

    1. 開啟seekBar.axml並從工具箱拖放TextView及SeekBar控制項進螢幕

    clip_image022

     

    介面宣告的xml如下：

    01 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    02  
    03 android:orientation="vertical"
    04  
    05 android:layout_width="fill_parent"
    06  
    07 android:layout_height="fill_parent">
    08  
    09 <TextView
    10  
    11 android:textAppearance="?android:attr/textAppearanceMedium"
    12  
    13 android:layout_width="fill_parent"
    14  
    15 android:layout_height="wrap_content"
    16  
    17 android:id="@+id/textView1" />
    18  
    19 <SeekBar
    20  
    21 android:layout_width="fill_parent"
    22  
    23 android:layout_height="wrap_content"
    24  
    25 android:id="@+id/seekBar1"
    26  
    27 android:layout_marginTop="48.0dp" />
    28  
    29 </LinearLayout>

    2. 開啟SeekBarScreen.cs並在OnCreate事件中撰寫以下程式碼:

    01 //載入頁面
    02  
    03 SetContentView(Resource.Layout.SeekBar);
    04  
    05 //宣告並取得頁面上的控制項
    06  
    07 var msg = FindViewById<TextView>(Resource.Id.textView1);
    08  
    09 var seekbar = FindViewById<SeekBar>(Resource.Id.seekBar1);
    10  
    11 //將seekBar的最大值設定為100
    12  
    13 seekbar.Max = 100;
    14  
    15 //處理SeekBar的ProgressChanged事件, 並將目前的大小(進度)透過TextView呈現
    16  
    17 seekbar.ProgressChanged += (sender, e) => {
    18  
    19 msg.Text = string.Format("目前Seekbar的大小為{0}", seekbar.Progress.ToString());
    20  
    21 };

     

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

    3. 執行專案並檢視執行結果.

    clip_image023

     

    結語

    Android 的開發方式, 與先前介紹的iOS略有不同. iOS透過Outlet及Action將View及Controller進行連結. 而Android 則是透過Parser, 為頁面上的控制項建立id屬性, 讓Activity可以透過FindViewById方式建立控制項的物件實體, 接下來的處理方式就與iOS或Windows Form在操作控制項的方式類似. 在下一篇教學文章中, 將說明Android應用程式的多頁面處理.
  • 相关阅读:
    MySQL学习笔记（三）
    MySQL学习笔记（二）
    MySQL学习笔记（一）
    JavaScript学习笔记（三）
    JavaScript学习笔记（二）
    20180205文本`边框`背景`超链接（css伪类）`列表样式，div标签
    20180203选择器和文体样式
    20180202个人简历，表单
    20180201 超链接与表格
    20180131 HTML内容回顾
  • 原文地址：https://www.cnblogs.com/whatthehell/p/3444129.html
Copyright © 2020-2023  润新知