Xamarin - Android 控制元件

上一頁
下一頁

日期選擇器

這是一個用於顯示日期的小部件。在這個例子中，我們將建立一個日期選擇器，它在一個文字檢視上顯示設定的日期。

首先，建立一個新專案並將其命名為 **datePickerExample**。開啟 **Main.axml** 並建立一個 **datepicker**、**textview** 和一個 **button**。

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <DatePicker 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/datePicker1" /> 
   <TextView 
      android:text = "Current Date" 
      android:textAppearance = "?android:attr/textAppearanceLarge" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/txtShowDate" /> 
   <Button 
      android:text = "Select Date" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/btnSetDate" /> 
</LinearLayout>

接下來，轉到 **MainActivity.cs**。我們首先在 **MainActivity:Activity** 類內建立一個文字檢視的私有例項。

該例項將用於儲存選擇的日期或預設日期。

private TextView showCurrentDate;

接下來，在 **setContentView()** 方法之後新增以下程式碼。

DatePicker pickDate = FindViewById<DatePicker>(Resource.Id.datePicker1); 
showCurrentDate = FindViewById<TextView>(Resource.Id.txtShowDate); 
setCurrentDate(); 
Button button = FindViewById<Button>(Resource.Id.btnSetDate); 
button.Click += delegate { 
   showCurrentDate.Text = String.Format("{0}/{1}/{2}", 
      pickDate.Month, pickDate.DayOfMonth, pickDate.Year); 
};

在上面的程式碼中，我們透過使用 **FindViewById** 類從我們的 **main.axml** 檔案中找到它們來引用我們的日期選擇器、文字檢視和按鈕。

引用之後，我們設定按鈕點選事件，該事件負責將從日期選擇器選擇的日期傳遞到文字檢視。

接下來，我們建立 **setCurrentDate()** 方法以將預設當前日期顯示到我們的文字檢視。以下程式碼解釋了它是如何完成的。

private void setCurrentDate() { 
   string TodaysDate = string.Format("{0}", 
      DateTime.Now.ToString("M/d/yyyy").PadLeft(2, '0')); 
   showCurrentDate.Text = TodaysDate; 
}

**DateTime.Now.ToString()** 類將今天的日期時間繫結到一個字串物件。

現在，構建並執行應用程式。它應該顯示以下輸出：

DatePicker

時間選擇器

時間選擇器是一個用於顯示時間的小部件，也允許使用者選擇和設定時間。我們將建立一個基本的時間選擇器應用程式，該應用程式顯示時間並允許使用者更改時間。

轉到 **main.axml** 並新增一個新的按鈕、文字檢視和一個時間選擇器，如下面的程式碼所示。

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:background = "#d3d3d3" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <TimePicker 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/timePicker1" /> 
   <TextView
      android:text = "Time" 
      android:textAppearance = "?android:attr/textAppearanceLarge" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/txt_showTime" 
      android:textColor = "@android:color/black" /> 
   <Button 
      android:text = "Set Time" 
      android:layout_width = "200dp" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/btnSetTime" 
      android:textColor = "@android:color/black" 
      android:background = "@android:color/holo_green_dark" /> 
</LinearLayout>

轉到 **MainActivity.cs** 以新增在我們在前面建立的文字檢視上顯示設定日期的功能。

public class MainActivity : Activity { 
   
   private TextView showCurrentTime; 
   
   protected override void OnCreate(Bundle bundle) { 
      
      base.OnCreate(bundle); 
      SetContentView(Resource.Layout.Main); 
      TimePicker Tpicker = FindViewById<TimePicker>(Resource.Id.timePicker1); 
      showCurrentTime = FindViewById<TextView>(Resource.Id.txt_showTime); 
      setCurrentTime(); 
      Button button = FindViewById<Button>(Resource.Id.btnSetTime); 
      
      button.Click += delegate { 
         showCurrentTime.Text = String.Format("{0}:{1}", 
            Tpicker.CurrentHour, Tpicker.CurrentMinute); 
      }; 
   } 
   private void setCurrentTime() { 
      string time = string.Format("{0}", 
         DateTime.Now.ToString("HH:mm").PadLeft(2, '0')); 
      showCurrentTime.Text = time;
   } 
}

在上面的程式碼中，我們首先透過 **FindViewById<>** 類引用了 **timepicker**、**設定時間** 按鈕和用於顯示時間的文字檢視。然後，我們為“設定時間”按鈕建立了一個點選事件，該事件在點選時將時間設定為使用者選擇的時間。預設情況下，它顯示當前系統時間。

**setCurrentTime()** 方法類初始化 **txt_showTime** 文字檢視以顯示當前時間。

現在，構建並執行您的應用程式。它應該顯示以下輸出：

Time Picker

微調器 (Spinner)

微調器是一個用於從一組選項中選擇一個選項的小部件。它相當於下拉列表/組合框。首先，建立一個新專案並將其命名為 **Spinner App 教程**。

開啟 **layout 資料夾** 下的 **Main.axml** 並建立一個新的 **spinner**。

<?xml version = "1.0" encoding = "utf-8"?> 
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:orientation = "vertical" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <Spinner 
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content" 
      android:id = "@+id/spinner1" 
      android:prompt = "@string/daysOfWeek" /> 
</LinearLayout>

開啟 **values 資料夾** 下的 **Strings.xml** 檔案，並新增以下程式碼以建立 **spinner 專案**。

<resources> 
  <string name = "daysOfWeek">Choose a planet</string> 
  <string-array name = "days_array"> 
      <item>Sunday</item> 
      <item>Monday</item> 
      <item>Tuesday</item> 
      <item>Wednesday</item> 
      <item>Thursday</item> 
      <item>Friday</item> 
      <item>Saturday</item> 
      <item>Sunday</item> 
   </string-array> 
</resources>

接下來，開啟 **MainActivity.cs** 以新增顯示所選星期幾的功能。

protected override void OnCreate(Bundle bundle) { 
   base.OnCreate(bundle);  
   // Set our view from the "main" layout resource 
   SetContentView(Resource.Layout.Main); 
   Spinner spinnerDays = FindViewById<Spinner>(Resource.Id.spinner1); 
   spinnerDays.ItemSelected += new EventHandler
      <AdapterView.ItemSelectedEventArgs>(SelectedDay); 
   var adapter = ArrayAdapter.CreateFromResource(this, 
      Resource.Array.days_array, Android.Resource.Layout.SimpleSpinnerItem);  
   adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropD ownItem); 
   spinnerDays.Adapter = adapter; 
}  
private void SelectedDay(object sender, AdapterView.ItemSelectedEventArgs e) { 
   Spinner spinner = (Spinner)sender; 
   string toast = string.Format("The selected 
      day is {0}", spinner.GetItemAtPosition(e.Position)); 
   Toast.MakeText(this, toast, ToastLength.Long).Show(); 
}

現在，構建並執行應用程式。它應該顯示以下輸出：

Spinner App

在上面的程式碼中，我們透過 **FindViewById<>** 類引用了我們在 **main.axml** 檔案中建立的微調器。然後，我們建立了一個新的 **arrayAdapter()**，我們用它來繫結來自 **strings.xml** 類的陣列項。

最後，我們建立了 **SelectedDay()** 方法，我們用它來顯示所選的星期幾。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.