Tutorial de visualización de imágenes de Android desde la tarjeta SD

Tutorial de visualización de imágenes de Android desde la tarjeta SD

En este tutorial, aprenderá a mostrar imágenes en un GridView que están almacenadas en la tarjeta SD de su dispositivo. Crearemos un GridView y mostraremos las imágenes que están almacenadas en una carpeta de la tarjeta SD y, al hacer clic en el elemento de GridView, se mostrará la imagen seleccionada en una nueva actividad. Vamos a empezar…

Cree un nuevo proyecto en Eclipse  File  >  New  >  Android Application Project. Complete los detalles y nombre su proyecto  SDImageTutorial .

Nombre de la aplicación:  SDImageTutorial

Nombre del proyecto:  SDImageTutorial

Nombre del paquete:  com.androidbegin.sdimagetutorial

Abra su  MainActivity .java  y pegue el siguiente código.

Actividad principal .java

paquete com.androidbegin.sdimagetutorial;

importar java.io.Archivo;
importar android.os.Bundle;
importar android.os.Environment;
importar android.app.Actividad;
importar android.content.Intent;
importar android.view.View;
importar android.widget.AdapterView;
importar android.widget.GridView;
importar android.widget.Toast;
importar android.widget.AdapterView.OnItemClickListener;

clase pública MainActivity extiende Actividad {

	// Declarar variables
	Cadena privada [] Cadenas de ruta de archivo;
	Cadena privada[] Cadenas de nombre de archivo;
	archivo privado[] listFile;
	Rejilla GridView;
	adaptador LazyAdapter;
	archivo de archivo;

	@Anular
	public void onCreate (Paquete guardadoInstanceState) {
		super.onCreate(estadoDeInstanciaGuardado);
		setContentView(R.layout.gridview_main);

		// Buscar tarjeta SD
		if (!Environment.getExternalStorageState().equals(
				Medio ambiente.MEDIA_MOUNTED)) {
			Toast.makeText(esto, "¡Error! ¡No se encontró la TARJETA SDC!", Toast.LENGTH_LONG)
					.mostrar();
		} más {
			// Localice la carpeta de imágenes en su tarjeta SD
			archivo = nuevo archivo (Environment.getExternalStorageDirectory()
					+ Archivo.separador + "SDImageTutorial");
			// Crear una nueva carpeta si no existe ninguna carpeta llamada SDImageTutorial
			archivo.mkdirs();
		}

		si (archivo.isDirectory()) {
			listFile = archivo.listFiles();
			// Crear una matriz de cadenas para FilePathStrings
			FilePathStrings = new String[listFile.length];
			// Crear una matriz de cadenas para FileNameStrings
			FileNameStrings = new String[listFile.length];

			for (int i = 0; i < listaArchivo.longitud; i++) {
				// Obtener la ruta del archivo de imagen
				FilePathStrings[i] = listFile[i].getAbsolutePath();
				// Obtener el nombre del archivo de imagen
				FileNameStrings[i] = listFile[i].getName();
			}
		}

		// Localice GridView en gridview_main.xml
		grid = (GridView) findViewById(R.id.gridview);
		// Pasar matrices de cadenas a la clase LazyAdapter
		adaptador = new LazyAdapter(this, FilePathStrings, FileNameStrings);
		// Establecer el LazyAdapter en GridView
		grid.setAdapter(adaptador);

		// Capturar clic en el elemento de la vista de cuadrícula
		grid.setOnItemClickListener(nuevo OnItemClickListener() {

			@Anular
			public void onItemClick(AdapterView<?> parent, View view,
					posición int, identificación larga) {

				Intent i = new Intent(MainActivity.this, ViewImage.class);
				// Pasar matrices de cadenas FilePathStrings
				i.putExtra("ruta del archivo", FilePathStrings);
				// Pasar matrices de cadenas FileNameStrings
				i.putExtra("nombre de archivo", FileNameStrings);
				// Pase la posición del clic
				i.putExtra("posición", posición);
				iniciarActividad(i);
			}

		});
	}

}

En esta actividad, verificaremos la existencia de la tarjeta SD y, si existe, crearemos una nueva carpeta en su tarjeta SD. Las rutas de los archivos de imagen y los nombres de la tarjeta SD se almacenan en una matriz y se pasan al GridViewAdapter para configurarlo en GridView. Al hacer clic en el elemento GridView, se mostrará la imagen seleccionada en una nueva actividad.

A continuación, cree un diseño gráfico XML para su MainActivity. Vaya a  res  >  diseño  > Haga clic con el botón derecho en el  diseño  >  Nuevo  >  Archivo XML de Android

Nombre su nuevo archivo XML  gridview_main.xml  y pegue el siguiente código.

gridview_principal .xml

<?versión xml="1.0" codificación="utf-8"?>
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_layout_width="fill_parent"
    android_layout_height="fill_parent"
    android_relleno="5dip" >

    <GridView
        android_id="@+id/vista de cuadrícula"
        android_layout_width="fill_parent"
        android_layout_height="fill_parent"
        android: ancho de columna = "90dp"
        android_numColumns="auto_fit"
        android_stretchMode="columnWidth" />

</RelativeLayout>

Producción:

Tutorial de imagen SD XML principal

A continuación, cree una clase de adaptador GridView. Vaya a  Archivo  >  Nuevo  >  Clase  y asígnele el nombre  GridViewAdapter.java. Seleccione su paquete llamado  com.androidbegin. sdimagetutorial  y haga clic en  Finalizar .

Abra su  GridViewAdapter .java  y pegue el siguiente código.

GridViewAdapter .java

paquete com.androidbegin.sdimagetutorial;

importar android.app.Actividad;
importar android.content.Context;
importar android.graphics.Bitmap;
importar android.graphics.BitmapFactory;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;
importar android.widget.BaseAdapter;
importar android.widget.ImageView;
importar android.widget.TextView;

clase pública GridViewAdapter extiende BaseAdapter {

	// Declarar variables
	actividad privada Actividad;
	cadena privada [] ruta de archivo;
	cadena privada [] nombre de archivo;

	inflador estático privado LayoutInflater = nulo;

	public GridViewAdapter(Actividad a, String[] fpath, String[] fname) {
		actividad = una;
		ruta del archivo = fpath;
		nombre de archivo = fname;
		inflador = (LayoutInflater) actividad
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

	}

	public int getCount() {
		return ruta de archivo.longitud;

	}

	objeto público getItem (posición int) {
		posición de retorno;
	}

	getItemId largo público (posición int) {
		posición de retorno;
	}

	public View getView (posición int, View convertView, ViewGroup parent) {
		Ver vi = convertirVer;
		si (convertView == nulo)
			vi = inflador.inflar(R.layout.gridview_item, null);
		// Localice TextView en gridview_item.xml
		TextView text = (TextView) vi.findViewById(R.id.text);
		// Localice ImageView en gridview_item.xml
		Imagen de ImageView = (ImageView) vi.findViewById(R.id.image);

		// Establecer el nombre del archivo en TextView seguido de la posición
		text.setText(nombre de archivo[posición]);

		// Decodifica la ruta del archivo con BitmapFactory seguido de la posición
		Bitmap bmp = BitmapFactory.decodeFile(filepath[posición]);

		// Establecer el mapa de bits decodificado en ImageView
		imagen.setImageBitmap(bmp);
		volver vi;
	}
}

Esta es una clase de adaptador para GridView que recupera matrices de cadenas de MainActivity y establece las rutas y los nombres de los archivos de imagen en GridView seguidos de las posiciones.

A continuación, cree un diseño gráfico XML para los elementos de GridView. Vaya a  res  >  diseño  > Haga clic con el botón derecho en el  diseño  >  Nuevo  >  Archivo XML de Android

Nombre su nuevo archivo XML  gridview_item.xml  y pegue el siguiente código.

gridview_elemento .xml

<?versión xml="1.0" codificación="utf-8"?>
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    android_layout_width="fill_parent"
    android_layout_height="fill_parent"
    android_relleno="5dip" >

    <ImagenVista
        android_id="@+id/imagen"
        android_layout_width="fill_parent"
        android_layout_height="fill_parent" />

    <Vista de texto
        android_id="@+id/texto"
        android_layout_width="fill_parent"
        android_layout_height="wrap_content"
        android_layout_below="@+id/imagen" />

</RelativeLayout>

Luego, crea una nueva actividad en una nueva clase llamada ViewImage. Vaya a  Archivo  >  Nuevo  >  Clase  y asígnele el nombre  ViewImage .java. Seleccione su paquete llamado  com.androidbegin. sdimagetutorial  y haga clic en  Finalizar .

Abra su  ViewImage .java  y pegue el siguiente código.

VerImagen .java

paquete com.androidbegin.sdimagetutorial;

importar android.app.Actividad;
importar android.content.Intent;
importar android.graphics.Bitmap;
importar android.graphics.BitmapFactory;
importar android.os.Bundle;
importar android.widget.ImageView;
importar android.widget.TextView;

la clase pública ViewImage extiende la actividad {
	// Declarar variable
	Texto de vista de texto;
	Vista de imagen vista de imagen;

	@Anular
	public void onCreate (Paquete guardadoInstanceState) {
		super.onCreate(estadoDeInstanciaGuardado);
		// Obtener la vista de view_image.xml
		setContentView(R.layout.view_image);

		// Recuperar datos de MainActivity en el elemento GridView clic
		Intención i = getIntent();

		// Obtener la posición
		posición int = i.getExtras().getInt("posición");

		// Obtener matrices de cadenas FilePathStrings
		String[] ruta del archivo = i.getStringArrayExtra("ruta del archivo");

		// Obtener matrices de cadenas FileNameStrings
		String[] nombre de archivo = i.getStringArrayExtra("nombre de archivo");

		// Localice TextView en view_image.xml
		texto = (TextView) findViewById(R.id.imagetext);

		// Cargar el texto en TextView seguido de la posición
		text.setText(nombre de archivo[posición]);

		// Localice ImageView en view_image.xml
		imageview = (ImageView) findViewById(R.id.full_image_view);

		// Decodifica la ruta del archivo con BitmapFactory seguido de la posición
		Bitmap bmp = BitmapFactory.decodeFile(filepath[posición]);

		// Establecer el mapa de bits decodificado en ImageView
		vista de imagen.setImageBitmap(bmp);

	}
}

Esta actividad recupera las posiciones y las matrices de cadenas del elemento GridView, haga clic en MainActivity.java usando la intención y establece las rutas y los nombres del archivo de imagen en ImageView y TextView.

A continuación, cree un diseño gráfico XML para su ViewImage. Vaya a  res  >  diseño  > Haga clic con el botón derecho en el  diseño  >  Nuevo  >  Archivo XML de Android
Asigne un nombre a su nuevo archivo XML  view_image.xml 

Abra su  view_image .xml  y pegue el siguiente código.

ver_imagen .xml

<?versión xml="1.0" codificación="utf-8"?>
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_herramientas="http://esquemas.android.com/herramientas"
    android_layout_width="fill_parent"
    android_layout_height="fill_parent" >

    <ImagenVista
        android_id="@+id/vista_de_imagen_completa"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerInParent="verdadero" />

    <Vista de texto
        android_id="@+id/imagentexto"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_centerHorizontal="verdadero"
        android_textSize="20dip" />

</RelativeLayout>

A continuación, cambie el nombre de la aplicación. Abra su  strings.xml  en su carpeta  res > valores  y pegue el siguiente código.

cadenas.xml

<recursos>

    <string name="app_name">Tutorial de SDImage</string>
    <string name="hello_world">¡Hola mundo!</string>
    <string name="menu_settings">Configuración</string>
    <string name="title_activity_main">Tutorial de SDImage</string>

</recursos>

En su  AndroidManifest.xml , debemos declarar un permiso para permitir que la aplicación escriba un almacenamiento externo. Abra su  AndroidManifest.xml  y pegue el siguiente código.

Manifiesto de Android. xml

<manifiesto xmlns_android="http://schemas.android.com/apk/res/android"
    paquete="com.androidbegin.sdimagetutorial"
    android_versionCode="1"
    android_versionName="1.0" >

    <usos-sdk
        android_minSdkVersion="11"
        android_targetSdkVersion="15" />

    <usos-permiso android_name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <aplicación
        android_icono="@dibujable/ic_launcher"
        android_etiqueta="@cadena/nombre_aplicación"
        android_tema="@estilo/AppTheme" >
        <actividad
            android_nombre=".Actividad principal"
            android_uiOptions="splitActionBarWhenNarrow" >
            <intent-filter>
                <acción android_name="android.intent.action.MAIN" />

                <categoría android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </actividad>
        <actividad android_name=".ViewImage" >
        </actividad>
    </aplicación>

</manifiesto>

Ejecute la aplicación y debería ver una carpeta llamada SDImageTutorial en su tarjeta SD. Para este tutorial, hemos preparado algunas imágenes de muestra. Inserte sus imágenes de muestra descargadas en su  carpeta SDImageTutorial como se muestra en la captura de pantalla a continuación.

Imágenes de muestra

[etiqueta wpfilebase = ID de archivo = 31 tpl = botón de descarga /]

Subir imágenes a la carpeta SDImageTutorial

Producción:

Capturas de pantalla del tutorial de imagen SD

Código fuente 

[purchase_link id=”7898″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]