Xamarin - Création de l'interface graphique de l'application

Affichage

TextView est un composant très important des widgets Android. Il est principalement utilisé pour afficher des textes sur un écran Android.

Pour créer une vue de texte, ouvrez simplement main.axml et ajoutez le code suivant entre les balises de disposition linéaire.

<TextView 
   android:text = "Hello I am a text View" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/textview1" />

Bouton

Un bouton est un contrôle utilisé pour déclencher un événement lorsque l'utilisateur clique dessus. Sous votreMain.axml fichier, tapez le code suivant pour créer un bouton.

<Button 
   android:id = "@+id/MyButton" 
   android:layout_width = "fill_parent" 
   android:layout_height = "wrap_content" 
   android:text = "@string/Hello" />

Ouvert Resources\Values\Strings.xml et tapez la ligne de code suivante entre la balise <resources>.

<string name="Hello">Click Me!</string>

Le code ci-dessus fournit la valeur du bouton que nous avons créé. Ensuite, nous ouvronsMainActivity.cset créez l'action à exécuter lorsque le bouton est cliqué. Tapez le code suivant sousbase.OnCreate (bundle) méthode.

Button button = FindViewById<Button>(Resource.Id.MyButton); 
button.Click += delegate { button.Text = "You clicked me"; };

Le code ci-dessus affiche «Vous m'avez cliqué» lorsqu'un utilisateur clique sur le bouton.

FindViewById<< -->Cette méthode recherche l'ID d'une vue qui a été identifiée. Il recherche l'ID dans le fichier de mise en page .axml.

Case à cocher

Une case à cocher est utilisée lorsque l'on veut sélectionner plus d'une option dans un groupe d'options. Dans cet exemple, nous allons créer une case à cocher qui, lorsqu'elle est sélectionnée, affiche un message indiquant qu'elle a été cochée, sinon elle s'affiche non cochée.

Pour commencer, nous ouvrons Main.axml fichier dans notre projet et tapez la ligne de code suivante pour créer une case à cocher.

<?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"> 
   <CheckBox 
      android:text = "CheckBox" 
      android:padding = "25dp" 
      android:layout_width = "300dp" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/checkBox1" 
      android:textColor = "@android:color/black" 
      android:background = "@android:color/holo_blue_dark" /> 
</LinearLayout>

Ensuite, allez à MainActivity.cs pour ajouter le code de fonctionnalité.

CheckBox checkMe = FindViewById<CheckBox>(Resource.Id.checkBox1); 
checkMe.CheckedChange += (object sender, CompoundButton.CheckedChangeEventArgs e) => { 
   CheckBox check = (CheckBox)sender; 
   if(check.Checked) { 
      check.Text = "Checkbox has been checked"; 
   } else { 
      check.Text = "Checkbox has not been checked"; 
   } 
};

À partir du code ci-dessus, nous trouvons d'abord la case à cocher en utilisant findViewById. Ensuite, nous créons une méthode de gestionnaire pour notre case à cocher et dans notre gestionnaire, nous créons une instruction if else qui affiche un message en fonction du résultat sélectionné.

CompoundButton.CheckedChangeEventArgs → Cette méthode déclenche un événement lorsque l'état de la case à cocher change.

Barre de progression

Une barre de progression est un contrôle utilisé pour afficher la progression d'une opération. Pour ajouter une barre de progression, ajoutez la ligne de code suivante dansMain.axml fichier.

<ProgressBar 
   style="?android:attr/progressBarStyleHorizontal" 
   android:layout_width = "match_parent" 
   android:layout_height = "wrap_content" 
   android:id = "@+id/progressBar1" />

Ensuite, allez à MainActivity.cs et définissez la valeur de la barre de progression.

ProgressBar pb = FindViewById<ProgressBar>(Resource.Id.progressBar1); 
pb.Progress = 35;

Dans le code ci-dessus, nous avons créé une barre de progression avec une valeur de 35.

Boutons radio

Il s'agit d'un widget Android qui permet à une personne d'en choisir un parmi un ensemble d'options. Dans cette section, nous allons créer un groupe radio contenant une liste de voitures qui récupérera un bouton radio coché.

Tout d'abord, nous ajoutons un groupe radio et un textview 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 = "@android:color/darker_gray" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "What is your favourite Car" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:textColor = "@android:color/black" /> 
   <RadioGroup 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioGroup1" 
      android:backgroundTint = "#a52a2aff" 
      android:background = "@android:color/holo_green_dark"> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Ferrari" 
      android:id = "@+id/radioFerrari" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Mercedes" 
      android:id = "@+id/radioMercedes" /> 
   <RadioButton 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:text = "Lamborghini" 
      android:id = "@+id/radioLamborghini" />
   <RadioButton 
      android:text = "Audi" 
      android:layout_width = "match_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/radioAudi" /> 
   </RadioGroup> 
</LinearLayout>

Pour effectuer une action, lorsqu'un bouton radio est cliqué, nous ajoutons une activité. Aller àMainActivity.cs et créez un nouveau gestionnaire d'événements comme indiqué ci-dessous.

private void onClickRadioButton(object sender, EventArgs e) { 
   RadioButton cars = (RadioButton)sender; 
   Toast.MakeText(this, cars.Text, ToastLength.Short).Show 
   (); 
}

Toast.MakeText() →Il s'agit d'une méthode d'affichage utilisée pour afficher un message / une sortie dans une petite fenêtre contextuelle. Au bas de laOnCreate() méthode juste après SetContentView(), ajoutez le morceau de code suivant. Cela capturera chacun des boutons radio et les ajoutera au gestionnaire d'événements que nous avons créé.

RadioButton radio_Ferrari = FindViewById<RadioButton> 
   (Resource.Id.radioFerrari); 
   RadioButton radio_Mercedes = FindViewById<RadioButton> 
   (Resource.Id.radioMercedes); 
   RadioButton radio_Lambo = FindViewById<RadioButton> 
   (Resource.Id.radioLamborghini); 
   RadioButton radio_Audi = FindViewById<RadioButton> 
   (Resource.Id.radioAudi); 
   radio_Ferrari.Click += onClickRadioButton; 
   radio_Mercedes.Click += onClickRadioButton; 
   radio_Lambo.Click += onClickRadioButton; 
   radio_Audi.Click += onClickRadioButton;

Maintenant, exécutez votre application. Il devrait afficher l'écran suivant comme sortie -

Boutons à bascule

Les boutons à bascule sont utilisés pour alterner entre deux états, par exemple, il peut basculer entre ON et OFF. OuvertResources\layout\Main.axml et ajoutez les lignes de code suivantes pour créer un bouton bascule.

<?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"> 
   <ToggleButton 
      android:id = "@+id/togglebutton" 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:textOn = "Torch ON" 
      android:textOff = "Torch OFF" 
      android:textColor = "@android:color/black" /> 
</LinearLayout>

Nous pouvons ajouter des actions à la barre de bascule lorsque vous cliquez dessus. OuvertMainActivity.cs et ajoutez les lignes de code suivantes après le OnCreate() classe de méthode.

ToggleButton togglebutton = FindViewById<ToggleButton> (Resource.Id.togglebutton); 
togglebutton.Click += (o, e) => { 
   if (togglebutton.Checked) 
      Toast.MakeText(this, "Torch is ON", ToastLength.Short).Show (); 
   else 
      Toast.MakeText(this, "Torch is OFF", 
      ToastLength.Short).Show(); 
};

Maintenant, lorsque vous exécutez l'application, elle devrait afficher la sortie suivante -

Barre des notes

Une barre de notation est un élément de formulaire composé d'étoiles que les utilisateurs de l'application peuvent utiliser pour noter les éléments que vous leur avez fournis. Dans tonMain.axml fichier, créez une nouvelle barre de notation avec 5 étoiles.

<?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"> 
   <RatingBar 
      android:layout_width = "wrap_content" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/ratingBar1" 
      android:numStars = "5" 
      android:stepSize = "1.0" /> 
</LinearLayout>

Lors de l'exécution de l'application, elle devrait afficher la sortie suivante -

Affichage de texte à saisie semi-automatique

Ceci est une vue de texte qui montre des suggestions complètes pendant qu'un utilisateur tape. Nous allons créer une vue de texte à saisie semi-automatique contenant une liste de noms de personnes et un bouton qui, en cliquant, nous montrera le nom sélectionné.

Ouvert Main.axml et écrivez le code suivant.

<?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:background = "#d3d3d3" 
   android:layout_height = "fill_parent"> 
   <TextView 
      android:text = "Enter Name" 
      android:textAppearance = "?android:attr/textAppearanceMedium" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/textView1" 
      android:padding = "5dp" 
      android:textColor = "@android:color/black" /> 
   <AutoCompleteTextView 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/autoComplete1" 
      android:textColor = "@android:color/black" /> 
   <Button 
      android:text = "Submit" 
      android:layout_width = "fill_parent" 
      android:layout_height = "wrap_content" 
      android:id = "@+id/btn_Submit" 
      android:background="@android:color/holo_green_dark" /> 
</LinearLayout>

Le code ci-dessus génère un TextView pour la saisie, AutoCompleteTextViewpour afficher les suggestions et un bouton pour afficher les noms saisis à partir de TextView. Aller àMainActivity.cs pour ajouter la fonctionnalité.

Créez une nouvelle méthode de gestionnaire d'événements comme indiqué ci-dessous.

protected void ClickedBtnSubmit(object sender, System.EventArgs e){ 
   if (autoComplete1.Text != ""){ 
      Toast.MakeText(this, "The Name Entered =" 
         + autoComplete1.Text, ToastLength.Short).Show(); 
   } else { 
      Toast.MakeText(this, "Enter a Name!", ToastLength.Short).Show(); 
   } 
}

Le gestionnaire créé vérifie si la vue de texte à saisie semi-automatique est vide. S'il n'est pas vide, il affiche le texte de saisie semi-automatique sélectionné. Tapez le code suivant dans leOnCreate() classe.

autoComplete1 = FindViewById<AutoCompleteTextView>(Resource.Id.autoComplete1); 
btn_Submit = FindViewById<Button>(Resource.Id.btn_Submit);  
var names = new string[] { "John", "Peter", "Jane", "Britney" }; 
ArrayAdapter adapter = new ArrayAdapter<string>(this,           
   Android.Resource.Layout.SimpleSpinnerItem, names); 
autoComplete1.Adapter = adapter; 
btn_Submit.Click += ClickedBtnSubmit;

ArrayAdapter - Il s'agit d'un gestionnaire de collection qui lit les éléments de données d'une collection de listes et les renvoie sous forme de vue ou les affiche à l'écran.

Désormais, lorsque vous exécutez l'application, elle doit afficher la sortie suivante.