Xamarin - Widgets Android

Sélecteur de date

Ceci est un widget utilisé pour afficher la date. Dans cet exemple, nous allons créer un sélecteur de date qui affiche la date définie sur une vue texte.

Tout d'abord, créez un nouveau projet et appelez-le datePickerExample. OuvertMain.axml et créez un datepicker, textview, et 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>

Ensuite, allez à Mainactivity.cs. Nous créons d'abord une instance privée d'une vue de texte dans lemainActivity:Activity classe.

L'instance sera utilisée pour stocker la date sélectionnée ou la date par défaut.

private TextView showCurrentDate;

Ensuite, ajoutez le code suivant après setContentView() méthode.

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

Dans le code ci-dessus, nous avons référencé notre sélecteur de date, notre vue de texte et notre bouton en les trouvant à partir de notre main.axml fichier utilisant FindViewById classe.

Après le référencement, nous définissons l'événement de clic sur le bouton qui est responsable du passage de la date sélectionnée du sélecteur de date à la vue de texte.

Ensuite, nous créons le setCurrentDate()méthode pour afficher la date actuelle par défaut dans notre vue de texte. Le code suivant explique comment procéder.

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

DateTime.Now.ToString() class lie l'heure d'aujourd'hui à un objet chaîne.

Maintenant, créez et exécutez l'application. Il devrait afficher la sortie suivante -

Sélecteur de temps

Time Picker est un widget utilisé pour afficher l'heure ainsi que pour permettre à un utilisateur de choisir et de définir l'heure. Nous allons créer une application de sélection de l'heure de base qui affiche l'heure et permet également à un utilisateur de modifier l'heure.

Aller à main.axml et ajoutez un nouveau bouton, une vue de texte et un sélecteur de temps, comme indiqué dans le code suivant.

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

Aller à MainActivity.cs pour ajouter la fonctionnalité d'affichage d'une date définie sur la vue de texte que nous avons créée.

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

Dans le code ci-dessus, nous avons d'abord référencé le timepicker,set time et la vue de texte pour afficher l'heure à travers le FindViewById<>classe. Nous avons ensuite créé un événement de clic pour le bouton de réglage de l'heure qui, en un clic, règle l'heure sur l'heure sélectionnée par une personne. Par défaut, il affiche l'heure actuelle du système.

le setCurrentTime() la classe de méthode initialise la txt_showTime textview pour afficher l'heure actuelle.

Maintenant, créez et exécutez votre application. Il devrait afficher la sortie suivante -

Fileur

Un spinner est un widget utilisé pour sélectionner une option dans un ensemble. C'est l'équivalent d'une liste déroulante / combo. Tout d'abord, créez un nouveau projet et appelez-leSpinner App Tutorial.

Ouvert Main.axml sous le layout folder et créez un nouveau 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>

Ouvert Strings.xml fichier situé sous values folder et ajoutez le code suivant pour créer le 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>

Ensuite, ouvrez MainActivity.cs pour ajouter la fonctionnalité d'affichage du jour de la semaine sélectionné.

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

Maintenant, créez et exécutez l'application. Il devrait afficher la sortie suivante -

Dans le code ci-dessus, nous avons référencé le spinner que nous avons créé dans notre main.axml fichier via le FindViewById<>classe. Nous avons ensuite créé un nouveauarrayAdapter() que nous avons utilisé pour lier nos éléments de tableau à partir du strings.xml classe.

Enfin, nous avons créé la méthode SelectedDay() que nous avons utilisé pour afficher le jour sélectionné de la semaine.