Vista de cuadrícula de Android

Androide GridView muestra elementos en una cuadrícula de desplazamiento bidimensional (filas y columnas) y los elementos de la cuadrícula no están necesariamente predeterminados, pero se insertan automáticamente en el diseño mediante un ListAdapter

Vista en cuadrícula

Un adaptador en realidad crea un puente entre los componentes de la interfaz de usuario y la fuente de datos que completan los datos en el componente de la interfaz de usuario. El adaptador se puede utilizar para suministrar datos como ruleta, vista de lista, vista de cuadrícula, etc.

los ListView y GridView son subclases de AdapterView y se pueden poblar vinculándolos a un Adapter, que recupera datos de una fuente externa y crea una Vista que representa cada entrada de datos.

Atributos de GridView

Los siguientes son los atributos importantes específicos de GridView:

No Señor	Atributo y descripción
1	android:id Este es el ID que identifica de forma única el diseño.
2	android:columnWidth Esto especifica el ancho fijo para cada columna. Esto podría estar en px, dp, sp, in o mm.
3	android:gravity Especifica la gravedad dentro de cada celda. Los valores posibles son top, bottom, left, right, center, center_vertical, center_horizontal, etc.
4	android:horizontalSpacing Define el espaciado horizontal predeterminado entre columnas. Esto podría estar en px, dp, sp, in o mm.
5	android:numColumns Define cuántas columnas mostrar. Puede ser un valor entero, como "100" o auto_fit, lo que significa mostrar tantas columnas como sea posible para llenar el espacio disponible.
6	android:stretchMode Define cómo se deben estirar las columnas para llenar el espacio vacío disponible, si lo hay. Este debe ser cualquiera de los valores: none: el estiramiento está desactivado. spacingWidth: el espacio entre cada columna se estira. columnWidth: cada columna se estira por igual. spacingWidthUniform: el espacio entre cada columna se estira uniformemente.
7	android:verticalSpacing Define el espaciado vertical predeterminado entre filas. Esto podría estar en px, dp, sp, in o mm.

Ejemplo

Este ejemplo lo llevará a través de sencillos pasos para mostrar cómo crear su propia aplicación de Android usando GridView. Siga los siguientes pasos para modificar la aplicación de Android que creamos en el capítulo Ejemplo de Hello World :

Paso	Descripción
1	Utilizará Android Studio IDE para crear una aplicación de Android y nombrarla como HelloWorld en un paquete com.example.helloworld como se explica en el capítulo Ejemplo de Hello World .
2	Modifique el contenido detallado del archivo res / layout / activity_main.xml para incluir contenido GridView con atributos autoexplicativos.
3	No es necesario cambiar string.xml, Android Studio se encarga de las cadenas predeterminadas que se colocan en string.xml
4	Pongamos algunas imágenes en la carpeta res / drawable-hdpi . He puesto sample0.jpg, sample1.jpg, sample2.jpg, sample3.jpg, sample4.jpg, sample5.jpg, sample6.jpg y sample7.jpg.
5	Crea una nueva clase llamada ImageAdapterbajo un paquete com.example.helloworld que extiende BaseAdapter. Esta clase implementará la funcionalidad de un adaptador que se utilizará para llenar la vista.
6	Ejecute la aplicación para iniciar el emulador de Android y verifique el resultado de los cambios realizados en la aplicación.

A continuación se muestra el contenido del archivo de actividad principal modificado src/com.example.helloworld/MainActivity.java. Este archivo puede incluir cada uno de los métodos fundamentales del ciclo de vida.

package com.example.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.GridView;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      GridView gridview = (GridView) findViewById(R.id.gridview);
      gridview.setAdapter(new ImageAdapter(this));
   }
}

A continuación se mostrará el contenido de res/layout/activity_main.xml archivo -

<?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 se mostrará el contenido de res/values/strings.xml para definir dos nuevas constantes -

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">HelloWorld</string>
   <string name="action_settings">Settings</string>
</resources>

A continuación se mostrará el contenido de src/com.example.helloworld/ImageAdapter.java archivo -

package com.example.helloworld;

import android.content.Context;

import android.view.View;
import android.view.ViewGroup;

import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
   private Context mContext;
   
   // Constructor
   public ImageAdapter(Context c) {
      mContext = c;
   }
   
   public int getCount() {
      return mThumbIds.length;
   }

   public Object getItem(int position) {
      return null;
   }

   public long getItemId(int position) {
      return 0;
   }
   
   // create a new ImageView for each item referenced by the Adapter
   public View getView(int position, View convertView, ViewGroup parent) {
      ImageView imageView;
      
      if (convertView == null) {
         imageView = new ImageView(mContext);
         imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
         imageView.setPadding(8, 8, 8, 8);
      } 
      else 
      {
         imageView = (ImageView) convertView;
      }
      imageView.setImageResource(mThumbIds[position]);
      return imageView;
   }
   
   // Keep all Images in array
   public Integer[] mThumbIds = {
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7
   };
}

Intentemos ejecutar nuestro modificado Hello World!aplicación que acabamos de modificar. Supongo que habías creado tuAVDmientras realiza la configuración del entorno. Para ejecutar la aplicación desde Android Studio, abra uno de los archivos de actividad de su proyecto y haga clic en el icono Ejecutar en la barra de herramientas. Android Studio instala la aplicación en su AVD y la inicia y, si todo está bien con su configuración y aplicación, se mostrará la siguiente ventana del emulador:

Ejemplo de subactividad

Extendamos la funcionalidad del ejemplo anterior donde mostraremos la imagen de cuadrícula seleccionada en pantalla completa. Para lograr esto, necesitamos introducir una nueva actividad. Solo tenga en cuenta que para cualquier actividad, necesitamos realizar todos los pasos como para implementar una clase de actividad, definir esa actividad en el archivo AndroidManifest.xml, definir el diseño relacionado y finalmente vincular esa subactividad con la actividad principal en el archivo principal. clase de actividad. Así que sigamos los pasos para modificar el ejemplo anterior:

Paso	Descripción
1	Utilizará Android Studio IDE para crear una aplicación de Android y nombrarla como HelloWorld en un paquete com.example.helloworld como se explica en el capítulo Ejemplo de Hello World .
2	Cree una nueva clase de actividad como SingleViewActivity.java en un paquete com.example.helloworld como se muestra a continuación.
3	Cree un nuevo archivo de diseño para la nueva actividad en res/layout/carpeta. Nombremos este archivo XML como single_view.xml.
4	Defina su nueva actividad en el archivo AndroidManifest.xml usando la etiqueta <activity ... />. Una aplicación puede tener una o más actividades sin restricciones.
5	Ejecute la aplicación para iniciar el emulador de Android y verifique el resultado de los cambios realizados en la aplicación.

package com.example.helloworld;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

import android.view.Menu;
import android.view.View;

import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      GridView gridview = (GridView) findViewById(R.id.gridview);
      gridview.setAdapter(new ImageAdapter(this));
      
      gridview.setOnItemClickListener(new OnItemClickListener() {
         public void onItemClick(AdapterView<?> parent, 
            View v, int position, long id){
            // Send intent to SingleViewActivity 
            Intent i = new Intent(getApplicationContext(), SingleViewActivity.class);
            // Pass image index
            i.putExtra("id", position);
            startActivity(i);
         }
      });
   }
}

A continuación se mostrará el contenido del nuevo archivo de actividad. src/com.example.helloworld/SingleViewActivity.java archivo -

package com.example.helloworld;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class SingleViewActivity extends Activity {
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.single_view);
      
      // Get intent data
      Intent i = getIntent();
      
      // Selected image id
      int position = i.getExtras().getInt("id");
      ImageAdapter imageAdapter = new ImageAdapter(this);
      
      ImageView imageView = (ImageView) findViewById(R.id.SingleView);
      imageView.setImageResource(imageAdapter.mThumbIds[position]);
   }
}

A continuación se mostrará el contenido de res/layout/single_view.xml archivo -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >
   
<ImageView android:id="@+id/SingleView"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"/>
 
</LinearLayout>

A continuación se mostrará el contenido de AndroidManifest.xml para definir dos nuevas constantes -

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.helloworld">
      
   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.helloworld.MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
   
      <activity android:name=".SingleViewActivity"></activity>
   
   </application>
</manifest>

Intentemos ejecutar nuestro modificado Hello World!aplicación que acabamos de modificar. Supongo que habías creado tuAVDmientras realiza la configuración del entorno. Para ejecutar la aplicación desde Android Studio, abra uno de los archivos de actividad de su proyecto y haga clic en el icono Ejecutar de la barra de herramientas. Android Studio instala la aplicación en su AVD y la inicia y, si todo está bien con su configuración y aplicación, se mostrará la siguiente ventana del emulador:

Ahora, si hace clic en cualquiera de las imágenes, se mostrará como una sola imagen, por ejemplo

Tenga en cuenta que las imágenes mencionadas anteriormente se han tomado del sitio web oficial de Android.

↰ Previous page