Diseño y Desarrollo de Aplicaciones Móviles

Reporte GridView AE 2.2.1

Nombre: Eleazar Martínez Acosta

Docente: Dora María Maldonado Solís

Modulo: Diseño y Desarrollo de Aplicaciones Móviles

Grupo: 604

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Iniciamos creando un nuevo proyecto, como nombre le pondremos GridView01 damos siguiente y
después seleccionamos para teléfono y tablet, damos siguiente y seleccionamos trabajo en blanco, el
nombre de la clase lo dejaremos así y damos siguiente

Esperamos a que el proyecto este creado, nos vamos a una activity en blanco y la llamaremos detalle, damos
en finalizar, nos vamos a la actividad 1 y cambiamos la orientación en tipo vertical y incorporamos un gridview
en el Id le pondremos grilla.

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Nos vamos a strings y haremos una etiqueta para lo que sería el título de la segunda actividad en el primer
App le pondremos “Primero y en el otro App le pondremos “Segundo”

Y después nos dirigimos a android manifest y en el label le pondremos “primero después agregamos otro label
y le ponemos como “Segundo”

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Vamos a modificar lo que sería la interfaz por un framelayout después nos vamos a incorporar un imageview y
seleccionaremos un color, el Layout width será para match_parent y el Layout heigth igual ya que viene siendo
alto y ancho

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Vamos a eliminar lo que son los padding y ya ahí tenemos el imageview tomando todo lo que es la pantalla, lo
siguiente que haremos es incorporar un textview a propiedades y buscamos layout gravity en la cual vamos a
decir que esta abajo se llama “bottom” y lo seleccionamos, buscamos padding y ponemos “16dp”

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Nos vamos al último de propiedades y después damos clic en view fewer properties,en layout width
seleccionamos wrap parent y después buscamos la propiedad background y pondremos el color #cccccc, nos
dirigimos a la parte del código para seleccionar el color

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Nos dirigimos a la parte del código ahora vamos a definir nuestra clase de datos que va a tener principalmente
2 propiedades el identificador de lo que sería la imagen y también el título vamos a generar el getter and
setter seleccionamos los 2 y damos clic en ok, vamos después a generar el constructor igual seleccionamos
para los 2 campos imagen y titulo y damos clic en ok.

Ahora vamos a definir dentro de lo que es layout que es la template que vamos a inyectar dentro se cada it de
lo que es layout, nos vamos a layout después a new y luego a xml y seleccionamos layout xml file se abrirá una
ventana y le pondremos como nombre gridtem y tendrá un framelayout finalizamos.

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Copiaremos lo que hicimos en la

actividad de detalle en el id de la imagen será imgpicture y el titulo será txtTitulo ahora crearemos un pequeño
adaptador para eso nos vamos a com.codigointeractivo.gridview luego a new y después java class lo
llamaremos adaptador y se va a extender de lo que sería baseadapter y vamos a implementar los
metodos,ahora vamos a definir lo que es el contexto y vamos a generar un texto de datos que llamaremos
lista, generaremos el private y el constructor para los 2 campos.

En el caso de get count vamos a retornar lista.size,cuando queramos retornar el objeto será position y en el
identificador será position.getId.

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

En el método getview generaremos

el objeto inflater el cual haremos uso de lo que es layout from de lo que es el contexto y vamos a decir que
convertview es igual al objeto inflate.inflate(r.layout.griditem,null); de esta forma esta ya referenciado ,ahora
vamos a referenciar la imagen, después buscaremos un textview que llamaremos título que será igual a
textview convertview.findvievbyId.id(R.txtTitulo); .
Con eso ya está cargada la información del título lo siguiente es referenciar la imagen lo cual vamos a cargarla
con la imagen.ser.ImageResource(lista.get(position).getimagen()); y de esta forma se hará un return del
convertview

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Ahora vamos a dirigirnos al MainActivity y referenciar el gridview lo llamaremos grilla;

Lo siguiente que haremos es crear una estructura de lo que sería datos y vamos a cargar pero primero nos
vamos a copiar las imágenes y las llevaremos a la carpeta drawable del proyecto y pegamos, damos clic en ok
y ya tenemos las imágenes cargadas

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

2-En los siguiente datos le pasaremos un identificador el cual en este caso es un 1 y le pasaremos el
identificador de las imágenes que queramos cargar, el siguiente parámetro es un título, vamos a cargar varias
de las imágenes que tenemos cargadas para darle contenido al control, usaremos identificadores de acuerdo
con lo que le corresponde de nombres diferentes para no tener problemas. Ahora vamos a crear un adaptador
y por el momento ya debería tener la grilla generada.

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Vamos a ejecutar sobre lo que es el emulador,esperaremos que termine de ejecutarse podemos ver que se
cargaron.

Nos vamos a la activity_main.xml vamos a atribuirle un 3 para tener nuestro control de 3

columnas,ejecutamos nuevamente y deberiamos de ver la galeria en un formato de 3 columnas,despues nos
vamos a propiedades buscamos verticalspacing y pondremos 1dp en el horizontal tambien sera 1dp,nos
vamos nuevamente al codigo y modificaremos el tamaño del texto que habiamos puesto y ponemos
13,ejecutamos y cambia.

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Ahora haremos unas modificaciones en la template gridtem primero pondremos que el layout heigth tendrá
una altura de 200 y luego en el scaleType la propiedad centercrop cuando ejecute nuevamente deberíamos
tener la grilla que estamos buscando y ahora si tenemos una galería

Nos iremos a la activity principal y sacar el padding que genera los espacios laterales y con eso ya deberíamos
de tener la vista que queremos después vamos a MainActivity y vamos a gestionar el evento de lo que es la
grilla.

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Ahora haremos unas modificaciones en la template gridtem primero pondremos que el layout heigth tendrá
una altura de 200 y luego en el scaleType la propiedad centercrop cuando ejecute nuevamente deberíamos
tener la grilla que estamos buscando y ahora si tenemos una galería.

Nos iremos a la activity principal y sacar el padding que genera los espacios laterales y con eso ya deberíamos
de tener la vista que queremos

Después vamos a MainActivity y vamos a gestionar el evento de lo que es la grilla. Ahora vamos a hacer que
datos extienda serializable va a ser una implementación con eso estoy haciendo que mi clase pueda ser
serializable lo siguiente que haremos en el MainActivity en el lado de onItenClick vamos a crear un objeto tipo
datos y haremos un cateo de datos para lo que sería el parent.getItemAtposition(position) y con eso
obtendremos el objeto que se encuentra dentro de gredview,lo siguiente es que vamos a generar una
intención que se va a llamar paso con eso ya estaría referenciando hacia dónde voy lo siguiente seria decir
paso extra a la cual le pasaría un dato que sería objeto al cual lo catearía pasándole el objeto y de esta forma
lo que quedaría es llamar al método starActivity indicándole la intención que en este caso se llama paso, con
eso estaría logrando ir a la pantalla detallada

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Nos vamos a la activity detalle y en el id de textview será textdetalle y en el imageview será imgDetalle lo que
haremos dentro de detalleActivity es definir la imageview que y el textview, después lo vamos a referenciar
llamando al método de los 2

Lo que deberíamos de hacer ahora es tomar el dato crear un obj castear al tipo de dato, llamar al getIntent,
llamar al método getExtra y llamar método getserializable con objeto, posteriormente vamos a insertar
imagen y el titulo con eso deberíamos tener la imagen referenciada visualizándola dentro de la pantalla
detalle, ejecutamos ahora podemos ver que cuando vamos a la galería y damos clic nos vamos a la pantalla
detalle donde podemos ver la imagen y el titulo

Sanjuana Veronica Villegas Castillo

Grupo:604
Diseño y Desarrollo de Aplicaciones Móviles

Sanjuana Veronica Villegas Castillo

Grupo:604