Xamarin: widgets de Android

Selector de fechas

Este es un widget que se usa para mostrar la fecha. En este ejemplo, vamos a crear un selector de fecha que muestra la fecha establecida en una vista de texto.

En primer lugar, cree un nuevo proyecto y llámelo datePickerExample. AbiertoMain.axml y crea un datepicker, textviewy un 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>

A continuación, vaya a Mainactivity.cs. Primero creamos una instancia privada de una vista de texto dentro delmainActivity:Activity clase.

La instancia se utilizará para almacenar la fecha seleccionada o la fecha predeterminada.

private TextView showCurrentDate;

A continuación, agregue el siguiente código después setContentView() método.

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

En el código anterior, hemos hecho referencia a nuestro selector de fecha, vista de texto y botón al encontrarlos en nuestro main.axml archivo usando FindViewById clase.

Después de hacer referencia, configuramos el evento de clic de botón que es responsable de pasar la fecha seleccionada desde el selector de fechas a la vista de texto.

A continuación, creamos el setCurrentDate()método para mostrar la fecha actual predeterminada en nuestra vista de texto. El siguiente código explica cómo se hace.

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

DateTime.Now.ToString() class vincula la hora de hoy a un objeto de cadena.

Ahora, cree y ejecute la aplicación. Debería mostrar la siguiente salida:

Selector de tiempo

Time Picker es un widget que se utiliza para mostrar la hora y permite al usuario elegir y establecer la hora. Vamos a crear una aplicación de selección de tiempo básica que muestra la hora y también permite al usuario cambiar la hora.

Ir main.axml y agregue un nuevo botón, vista de texto y un selector de tiempo como se muestra en el siguiente código.

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

Ir MainActivity.cs para agregar la funcionalidad para mostrar una fecha establecida en la vista de texto que creamos.

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

En el código anterior, primero hicimos referencia al timepicker,set time y la vista de texto para mostrar el tiempo a través del FindViewById<>clase. Luego creamos un evento de clic para el botón de tiempo establecido que al hacer clic establece el tiempo en el tiempo seleccionado por una persona. De forma predeterminada, muestra la hora actual del sistema.

los setCurrentTime() clase de método inicializa el txt_showTime textview para mostrar la hora actual.

Ahora, cree y ejecute su aplicación. Debería mostrar la siguiente salida:

Hilandero

Una ruleta es un widget que se utiliza para seleccionar una opción de un conjunto. Es un equivalente a un cuadro desplegable / combinado. En primer lugar, cree un nuevo proyecto y llámeloSpinner App Tutorial.

Abierto Main.axml bajo la layout folder y crea un nuevo 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>

Abierto Strings.xml archivo ubicado debajo values folder y agregue el siguiente código para crear el spinner items.

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

A continuación, abra MainActivity.cs para agregar la funcionalidad para mostrar el día de la semana seleccionado.

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

Ahora, compile y ejecute la aplicación. Debería mostrar la siguiente salida:

En el código anterior, hicimos referencia a la ruleta que creamos en nuestro main.axml archivo a través del FindViewById<>clase. Luego creamos un nuevoarrayAdapter() que usamos para vincular nuestros elementos de matriz desde el strings.xml clase.

Finalmente creamos el método SelectedDay() que usamos para mostrar el día de la semana seleccionado.