Bienvenidos sean a este post, hoy mejoraremos nuestro post anterior por medio de un par de metodos propios del ListView pero antes de comenzar deberan descargar este archivo asteroides para poder utilizar nuestras mejoras. Como vimos en el post anterior nuestras puntuaciones son mostradas solamente como texto pero ahora le agregaremos algunas opciones mas para dejar una mejor presentacion, comencemos con nuestro nuevo caso.

Anuncios

Abramos el proyecto con Android Studio, ahora vamos a crear un nuevo recurso de tipo layout, para esto vamos a hacer click con el boton derecho sobre el recurso layout y seleccionaremos New -> Layout resource file como se ve en la siguiente imagen

android83

Una vez seleccionado nos aparecera el siguiente cuadro

android84

Aca modificaremos File Name por elemento_lista y en Root element reemplazaremos el valor por defecto por RelativeLayout, el resto debe quedar como se ve y pulsen Ok, esto comenzara la generacion de nuestro nuevo layout quedandonos como se ve en la siguiente imagen

android85

Ahora abriremos el nuevo archivo y veamos su codigo fuente:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

</RelativeLayout>

Pasemos a modificar el codigo por este nuevo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="?android:attr/listPreferredItemHeight">
    <ImageView
         android:id="@+id/icono"
         android:layout_width="?android:attr/listPreferredItemHeight"
         android:layout_height="match_parent"
         android:layout_alignParentLeft="true"
         android:src="@drawable/asteroide2" />
    <TextView
         android:id="@+id/titulo"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_toRightOf="@+id/icono"
         android:layout_alignParentTop="true"
         android:textAppearance="?android:attr/textAppearanceLarge"
         android:singleLine="true" />
    <TextView
         android:id="@+id/subtitulo"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:text="Otro texto"
         android:layout_toRightOf="@+id/icono"
         android:layout_below="@+id/titulo"
         android:layout_alignParentBottom="true"
         android:gravity="center" />
</RelativeLayout>
Anuncios

Como pueden ver agregamos tres elementos, un ImageView y dos TextView, en el caso del ImageView sera para mostrar un icono pero ahora mismo nos da un error debido a que no agregamos la imagen a mostrar, lo haremos a continuacion, y despues un TextView para mostrar un texto y el otro mostrara un texto constante, observen como utilizamos varias propiedades para poder ubicarlos con respecto a un elemento, en este caso a la derecha del icono (layout_toRightOf), uno arriba de todo (layout_alignParentTop) y otro abajo de todo (layout_alignParentBottom), ahora vamos a agregar el recurso faltante. Si descargaron el archivo del principio deben descomprimirlo en su equipo, en cualquier carpeta

android86

Una vez descomprimidos, los seleccionan y los copian por medio de Ctrl+C o con el boton derecho y Copiar. Despues de esto, volvemos al editor de Android Studio y en el recurso drawable pegaremos los archivos copiados por medio de Ctrl+V o por medio del boton derecho y seleccionen Paste como se ve en la siguiente imagen

android87

Una vez hecho esto nos aparecera el siguiente cuadro

android88

Aca deben seleccionar la opcion mostrada en la imagen y pulsan Ok para ver el siguiente cuadro

android89
Anuncios

Aca deben dejarlo como aparece y pulsar Ok, si todo sale bien deberan aparecer como se ve en la siguiente imagen

android90

Como pueden ver quedaron agregados dentro de nuestro recurso y si tienen abierto el archivo nuevo veran como aparece la imagen del archivo, se ve resaltado en el circulo rojo, ahora con todo esto solucionado pasaremos a modificar nuestra clase java llamada Puntuaciones para utilizar esta nueva visualizacion, para ello haremos una simple modificacion pero antes veamos el metodo de nuestra clase antes de modificarla:

setListAdapter(new ArrayAdapter(this,
	android.R.layout.simple_list_item_1,
	MainActivity.almacen.listaPuntuaciones(10)));

Este metodo creaba una lista simple de los recursos disponibles de Android, ahora lo modificaremos por el siguiente metodo:

setListAdapter(new ArrayAdapter(this,
        R.layout.elemento_lista, R.id.titulo,
        MainActivity.almacen.listaPuntuaciones(10)));

Como pueden ver la modificacion consiste en cambiar la lista simple por el recurso nuevo creado por nosotros y luego le decimos que utilice tambien el recurso titulo, el resto se mantiene tal cual como era antes, veamos el codigo final modificado:

package com.tinchicus.asteroides;

import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;

public class Puntuaciones extends ListActivity {
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.puntuaciones);
        setListAdapter(new ArrayAdapter(this,
                R.layout.elemento_lista, R.id.titulo,
                MainActivity.almacen.listaPuntuaciones(10)));
    }
}

Si compilan la app y la prueban deberan tener una salida como se ve en la siguiente imagen

android92

Como pueden ver tenemos una mejor apariencia en nuestra vista de puntuaciones, ahora vamos a hacer algo un poco mas avanzado para tener una mejor adaptabilidad de nuestra ListView por medio de un adaptador propio, para ello debemos crear una nueva clase de Java, sobre el contenedor de clases java hacemos click con el boton derecho, seleccionamos New -> Java class, una vez hecho nos aparecera el siguiente cuadro

android93
Anuncios

Aca modificaremos el campo Name por MiAdaptador, el resto queda como se ve en la imagen y pulsen Ok para generar la nueva clase, una vez creada procederemos a modificarla pero antes veamos su codigo actual:

package org.example.asteroides;

public class MiAdaptador {
}

y lo modificaremos por este nuevo codigo:

package org.example.asteroides;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Vector;

public class MiAdaptador extends BaseAdapter {
    private final Activity actividad;
    private final Vector< String > lista;

    public MiAdaptador (Activity actividad, Vector< String > lista){
        super();
        this.actividad = actividad;
        this.lista = lista;
    }

    public View getView(int position, View convertView,
                        ViewGroup parent){
        LayoutInflater inflater = actividad.getLayoutInflater();
        View view = inflater.inflate(R.layout.elemento_lista,
                null,true);
        TextView textView = (TextView) view.findViewById(R.id.titulo);
        textView.setText(lista.elementAt(position));
        ImageView imageView = (ImageView) view.findViewById(R.id.icono);
        switch(Math.round((float)Math.random()*3)){
            case 0:
                imageView.setImageResource(R.drawable.asteroide1);
                break;
            case 1:
                imageView.setImageResource(R.drawable.asteroide2);
                break;
            case 2:
                imageView.setImageResource(R.drawable.asteroide3);
                break;
        }
        return view;
    }

    public int getCount(){
        return lista.size();
    }

    @Override
    public Object getItem(int arg0) {
        return lista.elementAt(arg0);
    }

    public long getItemId(int position){
        return position;
    }
}

En este codigo fuente basicamente lo que haremos es extender un poco mas a la clase BaseAdapter, crearemos dos objetos, luego un constructor para recibir informacion y asignarla a estos objetos, la funcion mas importante es getView() sera la encargada de asignar el valor a titulo y una imagen al icono por medio de un numero generado al azar por medio del metodo random() y con el switch() seleccionara la imagen y la asignara al icono. Ahora solo nos falta una modificacion mas para poder usar nuestra nueva modificacion, para ello debemos ir de nuevo a la clase Puntuaciones y modificaremos la siguiente linea:

setListAdapter(new ArrayAdapter(this,
        R.layout.elemento_lista, R.id.titulo,
        MainActivity.almacen.listaPuntuaciones(10)));

Por esta linea:

setListAdapter(new MiAdaptador(this,
        MainActivity.almacen.listaPuntuaciones(10)));

Como pueden ver la modificacion mas importante es no tener que enviar todos los datos sino solamente la cantidad a mostrar porque la clase MiAdaptador se encargara de conseguir el resto de la informacion, veamos el codigo final de la clase Puntuaciones:

package org.example.asteroides;

import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;

public class Puntuaciones extends ListActivity {
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.puntuaciones);
        setListAdapter(new MiAdaptador(this,
                MainActivity.almacen.listaPuntuaciones(10)));
    }
}

Ahora pasemos a probar nuestra nueva modificacion en la app, veamos el resultado final en el siguiente video

Si lograron lo mismo que en el video, vamos por el buen camino porque como pueden ver cada vez que volvemos a ingresar a la vista nos modifica el icono pero mantiene el orden correcto de los datos almacenados para titulo.

Anuncios

En resumen, hoy hemos aprendido como mejorar nuestra vista para ver las puntuaciones y tambien como crear un adaptador propio para mejorar la forma de llamarlo. Espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00