Xamarin - Vues Andriod

ListViews

Un Listview est un élément d'interface utilisateur qui affiche des listes d'éléments qui peuvent être défilés.

Lier des données à des vues de liste

Dans cet exemple, vous allez créer un listView qui affiche les jours de la semaine. Pour commencer, créons un nouveau fichier XML et nommez-lelistViewTemplate.xml.

Dans listViewTemplate.xml, nous ajoutons une nouvelle vue de texte comme indiqué ci-dessous.

<?xml version = "1.0" encoding = "utf-8" ?> 
<TextView xmlns:android = "http://schemas.android.com/apk/res/android" 
android:id = "@+id/textItem"  
android:textSize ="20sp" 
android:layout_width = "fill_parent"  
android:layout_height = "wrap_content"/>

Ensuite, allez à Main.axml et créez une nouvelle vue de liste dans la disposition linéaire.

<ListView 
   android:minWidth="25px" 
   android:minHeight="25px" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:id="@+id/listView1" />

Ouvert MainActivity.cset tapez le code suivant pour lier les données à la liste que nous avons créée. Le code doit être écrit dans leOnCreate() méthode.

SetContentView(Resource.Layout.Main); 
var listView = FindViewById<ListView>(Resource.Id.listView1); 
var data = new string[] { 
   "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" 
}; 
listView.Adapter = new ArrayAdapter(this, Resource.Layout.ListViewTemplate, data);

Var data = new string[] contient simplement nos articles sous forme de tableau.

L'adaptateur Array renvoie les éléments de notre collection sous forme de vue. Par défaut, l'adaptateur Array utilise un textView par défaut pour afficher chaque élément. Dans le code ci-dessus, nous avons créé notre propre vue de texte dansListViewTemplate.xml et l'a référencé à l'aide du constructeur illustré ci-dessous.

ArrayAdapter(this, Resource.Layout.ListViewTemplate, data);

Enfin, créez et exécutez votre application pour afficher la sortie.

GridViews

Un gridView est un groupe de vues qui permet aux applications de disposer le contenu d'une manière bidimensionnelle, grille défilante.

Pour ajouter un GridView, créez un nouveau projet et appelez-le gridViewApp. Aller àMain.axml et ajoutez une grille comme indiqué ci-dessous.

<?xml version = "1.0" encoding="utf-8"?> 
<GridView xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:id = "@+id/gridview" 
   android:layout_width = "fill_parent" 
   android:layout_height = "fill_parent" 
   android:columnWidth = "90dp" 
   android:numColumns = "auto_fit" 
   android:verticalSpacing = "10dp" 
   android:horizontalSpacing = "10dp" 
   android:stretchMode = "columnWidth" 
   android:gravity = "center" />

Ensuite, créez une nouvelle classe et nommez-la ImageAdpter.cs. Cette classe contiendra les classes d'adaptateur pour tous les éléments qui seront affichés dans la grille.

À l'intérieur ImageAdapter, ajoutez le code suivant -

public class ImageAdapter : BaseAdapter { 
   Context context; 
   public ImageAdapter(Context ch) {  
      context = ch; 
   } 
      
   public override int Count { 
      get { 
         return cars.Length; 
      } 
   } 
      
   public override long GetItemId(int position) { 
   return 0; 
   } 
      
   public override Java.Lang.Object GetItem(int position) { 
      return null; 
   } 
      
   public override View GetView(int position, 
      View convertView, ViewGroup parent) { 
      ImageView imageView; 
      if (convertView == null) {   
         imageView = new ImageView(context); 
         imageView.LayoutParameters = new GridView.LayoutParams(100, 100); 
         imageView.SetScaleType(ImageView.ScaleType.CenterCrop); 
         imageView.SetPadding(8, 8, 8, 8); 
      } else { 
         imageView = (ImageView)convertView; 
      } 
             
      imageView.SetImageResource(cars[position]); 
      return imageView; 
   } 
   
   int[] cars = { 
      Resource.Drawable.img1, Resource.Drawable.img2, 
      Resource.Drawable.img3, Resource.Drawable.img4, 
      Resource.Drawable.img5, Resource.Drawable.img6, 
   }; 
}

Dans le code ci-dessus, nous avons simplement lié nos images de voiture aux adaptateurs d'image. Ensuite, ouvrezMainActivity.cs et ajoutez le code suivant après setContentView().

var gridview = FindViewById<GridView>(Resource.Id.gridview); 
gridview.Adapter = new ImageAdapter(this); 
gridview.ItemClick += delegate(object sender, 
   AdapterView.ItemClickEventArgs args) { 
      Toast.MakeText(this, 
         args.Position.ToString(), ToastLength.Short).Show(); 
};

Le code ci-dessus trouve le gridView dans main.axml et le lie au imageAdapter classe. Gridview.ItemClick crée un onClick événement qui renvoie la position de l'image sélectionnée lorsqu'un utilisateur clique sur une image.

Maintenant, créez et exécutez votre application pour afficher la sortie.