Xamarin - Vistas Andriod

ListViews

Una vista de lista es un elemento de la interfaz de usuario que muestra listas de elementos que se pueden desplazar.

Vincular datos a vistas de lista

En este ejemplo, creará un listView que muestra los días de la semana. Para empezar, creemos un nuevo archivo XML y asígnele un nombrelistViewTemplate.xml.

En listViewTemplate.xml, agregamos una nueva vista de texto como se muestra a continuación.

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

A continuación, vaya a Main.axml y cree una nueva vista de lista dentro del Diseño lineal.

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

Abierto MainActivity.csy escriba el siguiente código para vincular los datos a la vista de lista que creamos. El código debe estar escrito dentro delOnCreate() método.

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[] simplemente sostiene nuestros artículos como una matriz.

Array Adapter devuelve los elementos de nuestra colección como vista. De forma predeterminada, el Adaptador de matriz utiliza una vista de texto predeterminada para mostrar cada elemento. En el código anterior, creamos nuestra propia vista de texto enListViewTemplate.xml y lo referenciamos usando el constructor que se muestra a continuación.

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

Finalmente, compile y ejecute su aplicación para ver el resultado.

GridViews

Un gridView es un grupo de vistas que permite a las aplicaciones diseñar contenido en una cuadrícula de desplazamiento bidimensional.

Para agregar un GridView, cree un nuevo proyecto y llámelo gridViewApp. IrMain.axml y agregue una cuadrícula como se muestra a continuación.

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

A continuación, cree una nueva clase y asígnele el nombre ImageAdpter.cs. Esta clase contendrá las clases de adaptadores para todos los elementos que se mostrarán en la cuadrícula.

Dentro ImageAdapter, agregue el siguiente código -

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

En el código anterior, simplemente hemos enlazado las imágenes de nuestro automóvil a los adaptadores de imagen. A continuación, abraMainActivity.cs y agregue el siguiente código despué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(); 
};

El código anterior encuentra el gridView en main.axml y lo une al imageAdapter clase. Gridview.ItemClick crea un onClick evento que devuelve la posición de la imagen seleccionada cuando un usuario hace clic en una imagen.

Ahora, cree y ejecute su aplicación para ver el resultado.