Các widget Android phổ biến trong Xamarin

Date Picker (Bộ chọn ngày)

Đây là một widget được sử dụng để hiển thị ngày. Trong ví dụ này, chúng ta sẽ tạo một bộ chọn ngày hiển thị ngày đã đặt trên textview.

Trước hết, tạo một dự án mới và gọi nó là datePickerExample. Mở Main.axml và tạo một datepickertextview và một 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>

Tiếp theo, đi đến Mainactivity.cs. Trước tiên chúng ta tạo một trường hợp riêng của một textview bên trong lớp mainActivity: Activity .

Ví dụ sẽ được sử dụng để lưu trữ ngày đã chọn hoặc ngày mặc định.

private TextView showCurrentDate;

Tiếp theo, thêm code sau đây sau phương thức 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); 
};

Trong đoạn code trên, chúng ta đã tham chiếu datepicker, textview, và button của chúng ta bằng cách tìm chúng từ tệp main.axml, sử dụng lớp FindViewById .

Sau khi tham khảo, chúng ta đặt sự kiện nhấp vào button có trách nhiệm chuyển ngày đã chọn từ bộ chọn ngày sang textview.

Tiếp theo, chúng ta tạo phương thức setCienDate () để hiển thị ngày hiện tại mặc định cho textview của chúng ta. Các code sau đây giải thích làm thế nào nó được thực hiện.

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

Lớp DateTime.Now.ToString () liên kết thời gian hôm nay với một đối tượng chuỗi.

Bây giờ, biên dịch và chạy ứng dụng. Nó sẽ hiển thị đầu ra sau –

Bảng chọn ngày

Time Picker (Bộ chọn thời gian)

Time Picker là một widget được sử dụng để hiển thị thời gian cũng như cho phép người dùng chọn và đặt thời gian. Chúng ta sẽ tạo một ứng dụng chọn thời gian cơ bản hiển thị thời gian và cũng cho phép người dùng thay đổi thời gian.

Tới main.axml và thêm một button mới, TextView và chọn thời gian như trong đoạn code sau.

<?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>

Tới MainActivity.cs để thêm các chức năng cho việc hiển thị một ngày thiết lập trên TextView chúng ta tạo ra.

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;
   } 
}

Trong đoạn code trên, đầu tiên chúng ta tham khảo các timepicker, button set time và TextView cho hiển thị thời gian qua lớp FindViewById <>. Sau đó, chúng ta đã tạo một sự kiện nhấp cho button thời gian đã đặt, khi nhấp vào sẽ đặt thời gian theo thời gian mà một người đã chọn. Theo mặc định, nó hiển thị thời gian hệ thống hiện tại.

Lớp phương thức setCienTime () khởi tạo textview txt_showTime để hiển thị thời gian hiện tại.

Bây giờ, biên dịch và chạy ứng dụng của bạn. Nó sẽ hiển thị đầu ra sau –

Bộ chọn thời gian

Spinner

Một spinner là một widget được sử dụng để chọn một tùy chọn từ một tập hợp. Nó tương đương với dropdown/Combo box (hộp thả xuống/Combo). Trước hết, tạo một dự án mới và gọi nó là Spinner App Tutorial (Hướng dẫn ứng dụng Spinner).

Mở Main.axml trong thư mục layout và tạo một spinner mới .

<?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>

Mở tệp String.xml nằm trong values folder (thư mục giá trị) và thêm đoạn code sau để tạo các spinner item.

<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>

Tiếp theo, mở MainActivity.cs để thêm chức năng hiển thị ngày đã chọn trong tuần.

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(); 
}

Bây giờ, biên dịch và chạy ứng dụng. Nó sẽ hiển thị đầu ra sau –

Ứng dụng Spinner

Trong đoạn code trên, chúng ta đã tham chiếu spinner mà chúng ta đã tạo trong tệp main.axml thông qua lớp FindViewById <>. Sau đó, chúng ta đã tạo ra một arrayAdapter() mới mà chúng ta đã sử dụng để liên kết các array item từ lớp String.xml. Cuối cùng, chúng ta đã tạo phương thức SelectedDay() mà chúng ta đã sử dụng để hiển thị ngày đã chọn trong tuần.

 

 

 

 

 

 

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *