Tutorial de imágenes y textos de la galería ViewPager de Android
Tutorial de imágenes y textos de la galería ViewPager de Android
Última actualización: 3 de mayo de 2013
En este tutorial, aprenderá cómo implementar una galería de visualizador de imágenes y textos en su aplicación de Android. ViewPager permite al usuario pasar de izquierda a derecha a través de páginas de datos. Crearemos un visor y al voltear hacia la izquierda o hacia la derecha se mostrarán diferentes imágenes y textos. Vamos a empezar…
Cree un nuevo proyecto en Eclipse File > New > Android Application Project. Complete los detalles y nombre su proyecto ViewPagerTutorial .
Nombre de la aplicación: ViewPagerTutorial
Nombre del proyecto: ViewPagerTutorial
Nombre del paquete: com.androidbegin.viewpagertutorial
Abra su MainActivity .java y pegue el siguiente código.
Actividad principal .java
paquete com.androidbegin.viewpagertutorial;
importar android.os.Bundle;
importar android.app.Actividad;
importar android.support.v4.view.PagerAdapter;
importar android.support.v4.view.ViewPager;
clase pública MainActivity extiende Actividad {
// Declarar Variables
Ver Paginador ver Paginador;
adaptador PagerAdapter;
Cadena[] rango;
Cadena[] país;
Cadena [] población;
bandera int[];
@Anular
public void onCreate (Paquete guardadoInstanceState) {
super.onCreate(estadoDeInstanciaGuardado);
// Obtener la vista de viewpager_main.xml
setContentView(R.layout.viewpager_main);
// Generar datos de muestra
rango = new String[] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" };
país = new String[] { "China", "India", "Estados Unidos",
"Indonesia", "Brasil", "Pakistán", "Nigeria", "Bangladesh",
"Rusia", "Japón" };
población = new String[] { "1,354,040,000", "1,210,193,422",
"315.761.000", "237.641.326", "193.946.886", "182.912.000",
"170.901.000", "152.518.015", "143.369.806", "127.360.000" };
flag = new int[] { R.dibujable.china, R.dibujable.india,
R.dibujable.estadosunidos, R.dibujable.indonesia,
R.dibujable.brasil, R.dibujable.pakistán, R.dibujable.nigeria,
R.dibujable.bangladesh, R.dibujable.rusia, R.dibujable.japón };
// Localice ViewPager en viewpager_main.xml
viewPager = (ViewPager) findViewById(R.id.pager);
// Pasar los resultados a la clase ViewPagerAdapter
adaptador = nuevo ViewPagerAdapter(MainActivity.this, rango, país, población, bandera);
// Vincula el adaptador al ViewPager
viewPager.setAdapter(adaptador);
}
}
En esta actividad, creamos arreglos de cadenas con datos de muestra y los pasamos a la clase ViewPagerAdapter.
Hemos preparado algunas imágenes de muestra para este tutorial. Inserte sus imágenes de muestra descargadas en su res > drawable-hdpi.
Imágenes de muestra
[etiqueta wpfilebase = ID de archivo = 35 tpl = botón de descarga /]
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 viewpager_main.xml y pegue el siguiente código.
A continuación, cree un adaptador de visor personalizado. Vaya a Archivo > Nuevo > Clase y asígnele el nombre ViewPagerAdapter .java. Seleccione su paquete llamado com.androidbegin.viewpagertutorial y haga clic en Finalizar .
Abra su ViewPagerAdapter .java y pegue el siguiente código.
ViewPagerAdapter .java
paquete com.androidbegin.viewpagertutorial;
importar android.content.Context;
importar android.support.v4.view.PagerAdapter;
importar android.support.v4.view.ViewPager;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;
importar android.widget.ImageView;
importar android.widget.RelativeLayout;
importar android.widget.TextView;
clase pública ViewPagerAdapter extiende PagerAdapter {
// Declarar Variables
contexto contexto;
Cadena[] rango;
Cadena[] país;
Cadena [] población;
bandera int[];
LayoutInflater inflador;
ViewPagerAdapter público (contexto contextual, rango de cadena [], país de cadena [],
String[] población, int[] bandera) {
este.contexto = contexto;
this.rango = rango;
este.país = país;
esta.poblacion = poblacion;
esta.bandera = bandera;
}
@Anular
public int getCount() {
return rango.longitud;
}
@Anular
public boolean isViewFromObject (vista de vista, objeto de objeto) {
vista de retorno == (objeto (RelativeLayout));
}
@Anular
public Object instantiateItem (contenedor ViewGroup, posición int) {
// Declarar Variables
TextView txtrank;
TextView txtpaís;
TextView txtpoblación;
ImageView imgflag;
inflador = (LayoutInflater) contexto
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
Ver itemView = inflater.inflate(R.layout.viewpager_item, contenedor,
falso);
// Localice las vistas de texto en viewpager_item.xml
txtrank = (TextView) itemView.findViewById(R.id.rank);
txtcountry = (TextView) itemView.findViewById(R.id.country);
txtpopulation = (TextView) itemView.findViewById(R.id.population);
// Captura la posición y configura las TextViews
txtrank.setText(rango[posición]);
txtpaís.setText(país[posición]);
txtpoblacion.setText(poblacion[posicion]);
// Localice ImageView en viewpager_item.xml
imgflag = (ImageView) itemView.findViewById(R.id.flag);
// Captura la posición y establece en ImageView
imgflag.setImageResource(bandera[posición]);
// Agregar viewpager_item.xml a ViewPager
(contenedor (ViewPager)).addView(itemView);
volver itemView;
}
@Anular
public void destroyItem (contenedor ViewGroup, posición int, objeto Object) {
// Eliminar viewpager_item.xml de ViewPager
((ViewPager) container).removeView((RelativeLayout) object);
}
}
En esta clase de adaptador de visor personalizado, las matrices de cadenas se pasan a ViewPagerAdapter y se configuran en TextViews e ImageViews seguidas de las posiciones.
A continuación, cree un diseño gráfico XML para su elemento de vista de lista. 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 viewpager_item.xml y pegue el siguiente código.
viewpager_item .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_gravedad="centro"
android_relleno="10dp" >
<Vista de texto
android_id="@+id/etiqueta de clasificación"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_text="@cadena/etiqueta de clasificación" />
<Vista de texto
android_id="@+id/rango"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_toRightOf="@+id/ranklabel" />
<Vista de texto
android_id="@+id/etiqueta del país"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/ranklabel"
android_text="@cadena/etiqueta del país" />
<Vista de texto
android_id="@+id/país"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/rango"
android_layout_toRightOf="@+id/etiqueta del país" />
<Vista de texto
android_id="@+id/etiqueta de población"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/etiqueta del país"
android_text="@cadena/etiqueta de población" />
<Vista de texto
android_id="@+id/población"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/país"
android_layout_toRightOf="@+id/etiqueta de población" />
<ImagenVista
android_id="@+id/bandera"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_alignParentRight="verdadero"
androide_fondo="#000000"
Android: relleno = "1dp" />
</RelativeLayout>
A continuación, cambie el nombre y los textos de la aplicación. Abra su strings.xml en su carpeta res > valores y pegue el siguiente código.
