آموزش کار با ویجت ها در زامارین اندروید - ویجت تاریخ و ساعت در زامارین

Date Picker

Date Picker ، ویجتی است که برای نمایش دادن تاریخ استفاده می شود. در این مثال ، ما قصد داریم یک date picker را ایجاد کنیم که تاریخ تعیین شده در یک text view را نمایش می دهد.

پیش از همه ، یک پروژه جدید ایجاد می کنیم و نام آن را datePickerExample قرار می دهیم. فایل Main.axml را باز کرده و یک datepicker و textview و یک کلید ایجاد می کنیم.

<?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 می رویم. ابتدا یک نمونه خصوصی از یک textview را در داخل کلاس 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); 
};

در کد بالا ، ما datepicker ، textview و کلید را از طریق یافتن آنها در فایل main.axml ، با استفاده از کلاس FindViewById ، مورد ارجاع قرار داده ایم.

پس از ارجاع ، رویداد click مربوط به کلیک شدن کلید را تنظیم می کنیم که مسئول پاس دادن تاریخ انتخاب شده از date picker به textview است.

سپس ، متد ()setCurrentDate را برای نمایش دادن تاریخ فعلی پیش فرض در textview مان ، ایجاد می کنیم. کد زیر ، نحوه انجام این کار را توضیح می دهد.

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

کلاس ()DateTime.Now.ToString ، زمان کنونی را به یک شیء string متصل می کند.

اکنون ، اپ را ساخته و run می کنیم. با اجرای اپ ، باید خروجی زیر نمایش داده شود :

Time Picker

Time Picker ، ویجتی است که برای نشان دادن زمان استفاده می شود و هم چنین به کاربر امکان می دهد که زمان را انتخاب و تنظیم کند. ما قصد داریم یک اپ time picker پایه ای ایجاد کنیم ، که زمان را نمایش می دهد و هم چنین کاربر را قادر می سازد که زمان را تغییر دهد.

به فایل main.axml می رویم و یک کلید جدید ، textview و یک time picker را اضافه می کنیم ، همان طور که در کد زیر نشان داده شده است.

<?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  می رویم ، تا قابلیتی را جهت نمایش دادن یک تاریخ تعیین شده در textview که قبلاً ایجاد کرد ه ایم ، اضافه نماییم.

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

در کد فوق ، ما ابتدا timepicker ، کلید set time و textview را برای نمایش زمان از طریق کلاس <>FindViewById ، مورد ارجاع قرار دادیم. سپس ، یک رویداد click برای کلید set time ایجاد کردیم که با کلیک کردن روی کلید ، زمان ، به زمان انتخاب شده توسط فرد ، تنظیم می شود. به طور پیش فرض ، این کلید ، زمان فعلی سیستم را نشان می دهد.

کلاس متد ()setCurrentTime ، ابتدا textview مربوط به txt_showTime را برای نمایش دادن زمان فعلی ، مقداردهی اولیه می کند.

اکنون ، اپلیکیشن خود را ساخته و run می کنیم ، باید خروجی ، مطابق تصویر زیر نمایش داده شود :

Spinner

Spinner ، ویجتی است که برای انتخاب یک گزینه از یک مجموعه استفاده می شود. این ویجیت ، معادل یک جعبه dropdown/Combo است. پیش از همه ، یک پروژه جدید ایجاد می کنیم و نام آن را Spinner App Tutorial قرار می دهیم.

فایل Main.axml را در پوشه layout باز کرده و یک 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> 

فایل Strings.xml را در پوشه values باز می کنیم و کد زیر را برای ایجاد آِیتم های 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(); 
}

اکنون ، اپلیکیشن را ساخته و run می کنیم. باید خروجی زیر را نمایش دهد :

در کد بالا ، ما به spinner ی که در فایل main.axml خود از طریق کلاس FindViewById<> ایجاد کرده ایم ، ارجاع کردیم. سپس یک ()arrayAdapter جدید ایجاد کردیم ، که آن را برای پیوند دادن آرایه آیتم ها از کلاس strings.xml ، مورد استفاده قرار دادیم.

در نهایت ، ما متد ()SelectedDay را ایجاد کردیم که برای نمایش دادن روز انتخاب شده هفته استفاده کردیم.