LinuxParty

Ratio: 5 / 5

Inicio activadoInicio activadoInicio activadoInicio activadoInicio activado
 

android gridview

El funcionamiento de su código de prueba muestra las imágenes en una cuadrícula ordenada.

En tutoriales de diseño anteriores, hemos mirado LinearLayout y RelativeLayout . Un caso de uso común en Android, sin embargo, usted tiene una lista de datos para mostrar lo que el usuario desea, para que pueda hacer clic. Una opción para esto es un ListView (como se explica en este tutorial ). Otro, que es grande si la lista está mejor representado por las imágenes, es GridView. Como era de esperar, establece la lista como una cuadrícula desplazable de imágenes. Siga leyendo para conocer un ejemplo de cómo configurar un GridView con una lista de imágenes, que al hacer clic en una imagen, lanza una página web asociada a ella.

Una de las ventajas de un GridView es que, como un ListView, sólo tiene que mantener en la memoria las imágenes que son visibles en un momento dado. Al desplazarse, la memoria y los recursos utilizados para las imágenes que se desplazan fuera de la página pueden ser reutilizados por los que se desplazan. Sin embargo, todavía necesita para asegurarse de que sus archivos de imagen son de un tamaño apropiado. (Una imagen 1024x768 ocupa la misma cantidad de memoria cuando se muestra en un cuadro de 200x150.) Crear pequeñas miniaturas si sus archivos de imágenes, para evitar que la VM de Android se quede sin memoria.

GridLayout también está disponible en la API 14. Este es un diseño cuyos hijos se colocan en una rejilla rectangular. Estos se definen ocupando una célula o células en el diseño, lo que hace que los diseños particulares sean más fáciles de gestionar y organizar de forma atractiva. Si está utilizando otros diseños y se encuentra tratando de múltiples niveles, puede ser digno de mirar en el uso de un GridLayout; y sin duda más fácil de aprender si estás empezando desde cero que algunos de los otros diseños. Hay un práctico tutorial en línea disponible para GridLayout .

Configuración de GridView

En primer lugar, cree un nuevo proyecto Android, GridViewTest. Para que sus imágenes estén disponibles, es necesario almacenarlos en res/drawable (teniendo en cuenta la nota anterior sobre los tamaños de archivos). Ahora cree su archivo de diseño, en res/layout/activity_grid_view_test.xml :

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:stretchMode="columnWidth"
    android:numColumns="auto_fit"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
/>

Verás que el GridView es un diseño por sí mismo; que no necesita ser envuelto en una RelativeLayout o LinearLayout, a menos que desee agregar otros elementos (como botones) en torno a la red. La mayoría de los atributos deben ser bastante auto-explicativo. Hay dos que valen la pena prestar especial atención a:

  • android:stretchMode="columnWidth" - define cómo las columnas deben estirar para llenar el espacio vacío . columnWidth significa que cada columna se estira igualmente.
  • android:numColumns="auto_fit" - esto encaja tantas columnas como sea posible en el espacio. Puede especificar un número en lugar, pero esto puede no funcionar correctamente en todos los dispositivos.

A continuación, tenemos que escribir un adaptador para manejar la interfaz entre la lista de imágenes y la vista:

public class GridAdapter extends BaseAdapter {
	private Context context;
	private Integer[] imageIds = {
            R.drawable.file1, R.drawable.file2, 
            R.drawable.file3, R.drawable.file4
	};
	
	public GridAdapter(Context c) {
		context = c;
	}
	
	public int getCount() {
		return imageIds.length;
	}
	
	public Object getItem(int position) {
		return imageIds[position];
	}
	
	public long getItemId(int position) {
		return 0;
	}
	
	public View getView(int position, View view, ViewGroup parent) {
		ImageView iview;
		if (view == null) {
			iview = new ImageView(context);
			iview.setLayoutParams(new GridView.LayoutParams(150,200));
			iview.setScaleType(ImageView.ScaleType.CENTER_CROP);
			iview.setPadding(5, 5, 5, 5);
		} else {
			iview = (ImageView) view;	
		}
		iview.setImageResource(imageIds[position]);
		return iview;
	}
}

Las imágenes (o, referencias a su recurso identificadores) se mantienen en imageIds . La mayoría de los métodos son bastante auto-explicativos. Aquí, no aplicamos correctamente getItemId() porque eso es sobre todo útil si el adaptador está hablando con una base de datos SQL y queremos ser capaces de acceder directamente a un ID de elemento.

getView() hace la mayor parte de la obra --se inicia con una vista para cada elemento individual. __iview.setLayoutParams()__ establece el ancho y la altura de la vista (bastante pequeño, ya que queremos que varios de ellos en una pantalla), y __setScaleType () __ le da una opción de diversas maneras para centrar y ajustar la imagen. Tenga en cuenta que sólo se configura todo esto si el ImageView es actualmente nula. Debido GridView vuelve a utilizar sus recursos cuando sea posible, a veces la "nueva" visión en realidad será una vista 'vieja', con todos estos valores ya establecidos. Una vez que el ImageView está configurado, asociamos una imagen específica con él y lo devolverá.

Por último, configure la actividad principal, GridViewTestActivity:

package com.example.gridviewtest;
public class GridViewTestActivity extends Activity {
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_grid_view_test);
      
    GridView gridview = (GridView) findViewById(R.id.gridview);
    final GridAdapter gridadapter = new GridAdapter(this);
    gridview.setAdapter(gridadapter));
       
    gridView.setOnItemClickListener(new onItemClickListener() {
      public void onItemClick(AdapterView<?> parent, View v, 
                              int position, long id) {
  		// do something here (see next section)
      }
    });
  }
}

Este código establece el archivo de contenido que primero hemos creado y, a continuación, conecta la actividad y la vista juntos utilizando nuestra nueva clase GridAdapter. Este se encargará automáticamente tirando de las imágenes en la red, utilizando __getView () __. El __setOnItemClickListener () __ se estableció, pero vamos a escribir el cuerpo de la misma en la siguiente sección.

Si ahora ejecuta su código, debería funcionar y te mostrará las imágenes en una cuadrícula ordenada.

Al hacer clic en un elemento

Una cuadrícula es agradable para mostrar imágenes, pero en la mayoría de los casos usted quiere ser capaz de hacer clic en ellos. En este caso, asociaremos nuestras imágenes con una URL, y lanzamos un navegador para buscar en la URL cuando un usuario hace clic en la imagen. Hay muchas maneras que usted pueda hacer esto, pero aquí es una opción. En primer lugar, crear una clase ImageWithUrl en GridAdapter, y adaptar en consecuencia GridAdapter:

private ImageWithUrl[] imageIds = {
  new ImageWithUrl(R.drawable.file1, "http://example.com/link1.html"),
  new ImageWithUrl(R.drawable.file2, "http://example.com/link2.html"),
  // and all the rest
	};
public ImageWithUrl getItem(int position) {
  return imageIds[position];
}
public View getView(int position, View view, ViewGroup parent) {
  // most of this is just as before
  iview.setImageResource(imageIds[position].getImageId());
  return iview;
}
protected class ImageWithUrl extends Object {
  private int imageId;
  private String imageUrlString;
		
  ImageWithUrl(int id, String url) {
	imageId = id;
	imageUrlString = url;
  }
  public int getImageId() {
    return imageId;
  }
  public String getImageUrlString() {
    return imageUrlString;
  }
}

Nuestra gama de recursos es ahora una matriz de objetos ImageWithUrl. Eso significa que tenemos que cambiar getItem() por lo que devuelve un ImageWithUrl y editar __getView () __ por lo que obtener una referencia a la parte de imagen del ImageWithUrl. La propia clase ImageWithUrl es sencillo.

Por último, tenemos que escribir el método OnItemClickListener() en GridViewTestActivity:

 gridview.setOnItemClickListener(new OnItemClickListener() {
  public void onItemClick(AdapterView parent, View v, 
                          int position, long id) {
     Intent i = new Intent(Intent.ACTION_VIEW);
     i.setData(Uri.parse(gridadapter.getItem(position).getImageUrlString()));
     startActivity(i);
  }
});

Esto crea una nueva intención, con la dirección adjunta del elemento de la cuadrícula específica encendió. La Intención se utiliza para iniciar una actividad - por lo que buscará la aplicación del navegador preferido en el teléfono y lanzar la URL en eso. (Para más información sobre las actividades y las intenciones, ver el tutorial anterior sobre conceptos básicos de Android .) Usted tiene su rejilla se puede hacer clic en la acción!

Pin It

Escribir un comentario


Código de seguridad
Refescar



Redes:



 

Suscribete / Newsletter

Suscribete a nuestras Newsletter y periódicamente recibirás un resumen de las noticias publicadas.

Donar a LinuxParty

Probablemente te niegues, pero.. ¿Podrías ayudarnos con una donación?


Tutorial de Linux

Nos obligan a moslestarte con la obviedad de que este sitio utiliza Cookies. Ver política