Bienvenidos sean a este post, hoy veremos como agregar una lista de puntuaciones para nuestro juego Asteroides para crear esta lista utilizaremos Java y una vista del tipo ListView que ya hemos estudiado en este post.

Anuncios

Comencemos a trabajar en nuestro nuevo caso, para eso abramos el proyecto Asteroides, una vez abierto deberemos hacer click con el boton derecho sobre el contenedor de nuestras clases Java y seleccionar New -> Java class como se ve en la siguiente imagen

android73

Una vez seleccionado nos aparecera el siguiente cuadro

android74

En este cuadro deberemos modificar el campo Name con el valor AlmacenPuntuaciones, en Kind debemos seleccionar Interface el resto debe quedar como se ve en la imagen, en Package el dominio puede variar dependiendo el que hayan utilizado, pulsen Ok para cerrar el cuadro y la generacion de nuestra nueva Interfaz de Java quedando como se ve en la siguiente imagen

android75

Ahora si abrimos nuestra nueva Interfaz tendremos el siguiente codigo:

package com.tinchicus.asteroides;

public interface AlmacenPuntuaciones {
}

Ahora lo modificaremos con el siguiente codigo:

package com.tinchicus.asteroides;

import java.util.Vector;

public interface AlmacenPuntuaciones {
    void guardarPuntuacion(int puntos, String nombre, long fecha);
    Vector< String > listaPuntuaciones(int cantidad);
}

Como pueden ver creamos una interfaz y no una clase como veniamos haciendo hasta ahora, una interfaz en realidad es una clase de tipo abstracta donde podemos declarar metodos pero no se pueden implementar (definir) y como se ve en este caso simplemente los mencionamos, declaramos, pero no pueden ser utilizados y estas serviran como guia para nuestros futuros usos pero sigamos con nuestro caso, ahora vamos a crear una nueva clase, para ello debemos hacer click con el boton derecho sobre el contenedor de las clases javas, como hicimos antes, seleccionamos New -> Java class y nos aparecera el siguiente cuadro

android76
Anuncios

Aca deberemos modificar el campo Name por AlmacenPuntuacionesArray, en Kind vuelve a seleccionar Class y el resto debe quedar como se ve en la imagen, pulsen Ok para generar la nueva clase quedando como se ve en la siguiente imagen

android77

Una vez creado la nueva clase, procedamos a abrirlo y veamos el codigo fuente actual:

package org.example.asteroides;

public class AlmacenPuntuacionesArray {
}

Procedamos a modificarlo por el siguiente codigo:

package org.example.asteroides;

import java.util.Vector;

public class AlmacenPuntuacionesArray implements AlmacenPuntuaciones {

    private Vector< String > puntuaciones;

    public AlmacenPuntuacionesArray(){
        puntuaciones = new Vector< String >();
        puntuaciones.add("111111 Martin Miranda");
        puntuaciones.add("100000 Marta Gargaglione");
        puntuaciones.add("090000 Enzo Trotore");
    }

    @Override
    public void guardarPuntuacion(int puntos, String nombre,
                                 long fecha){
        puntuaciones.add(0,puntos + " " + nombre);,
    }

    public Vector< String > listaPuntuaciones(int cantidad){
        return puntuaciones;
    }
}

En esta clase como podemos ver vamos a crear una base de nuestras puntuaciones como pueden ver se crea un objeto de tipo Vector llamado puntuaciones, luego en el constructor crearemos tres puntuaciones, primero le asignaremos nuevamente la clase Vector y luego por medio del metodo add() vamos agregando nuestros tres primeros puntajes. Luego tendremos dos metodos, los cuales seran la definicion de nuestros metodos declarados en la interfaz AlmacenPuntuaciones, en este caso guardarPuntuacion() el cual se encargara de asignar los puntos y el nombre del jugador para agregarlos al objeto puntuaciones, luego tendremos el otro metodo llamado listaPuntuaciones() el cual unicamente nos retornara el valor almacenado en puntuaciones. Nuestra siguiente modificacion sera en la clase MainActivity, en ella deberemos agregar la siguiente variable:

public static AlmacenPuntuaciones almacen = new AlmacenPuntuacionesArray();

Esta variable sera la encargada de almacenar y acceder a las puntuaciones, el codigo de MainActivity nos quedara de la siguiente forma:

package org.example.asteroides;

import android.content.Intent;
import android.content.SharedPreferences;
import android.preference.PreferenceManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    public static AlmacenPuntuaciones almacen = 
            new AlmacenPuntuacionesArray();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void lanzarAcercaDe(View view){
        Intent i = new Intent(this, AcercaDe.class);
        startActivity(i);
    }
    public void lanzarPreferencias(View view){
        Intent i = new Intent(this, Preferencias.class);
        startActivity(i);
    }

    public void mostrarPreferencias(View view){
        SharedPreferences pref =
                PreferenceManager.getDefaultSharedPreferences(this);
        String s = "música: " + pref.getBoolean("musica",true)
                + ", graficos: " + pref.getString("graficos","?");
        Toast.makeText(this,s,Toast.LENGTH_SHORT).show();
    }
}

Como pueden ver hemos hecho una simple modificacion, ahora debemos crear la vista para mostrarla y el evento para cargar nuestra vista, empecemos creando la nueva vista. Para ello debemos hacer click con el boton derecho sobre el recurso layout, seleccionaremos New -> Layout resource file como se ve en la siguiente imagen

Anuncios
android78

Una vez seleccionado nos aparecera el siguiente cuadro

android79

Aca debemos completar el campo File Name con el valor puntuaciones, nuestra siguiente modificacion sera en el campo Root element donde seleccionaremos LinearLayout, el resto debe quedar como se ve en la imagen, pulsen Ok para comenzar a generar el nuevo archivo para quedarnos como se ve en la siguiente imagen

android82

Ahora veamos el codigo de nuestro nuevo archivo:

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

</LinearLayout>
Anuncios

Ahora lo modificaremos con este nuevo codigo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <TextView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="@string/botonSalir"
          android:gravity="center"
          android:layout_margin="10px"
          android:textSize="10pt" />
    <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="0dip"
          android:layout_weight="1">
        <ListView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:id="@android:id/list"
              android:drawSelectorOnTop="false" />
        <TextView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:id="@android:id/empty"
              android:text="No hay puntuaciones." />
    </FrameLayout>
</LinearLayout>

En este layout vemos como se creo un TextView para mostrar un titulo, en este caso hemos utilizado para la propiedad text la cadena llamada botonSalir del archivo strings.xml, mas adelante la modificaremos para una mejor presentacion y hacemos un par de modificaciones por medio de gravity y layout_margin para dejarlo mas estetico, nuestro siguiente utilizacion es un FrameLayout, para darle una mejor forma, en este caso utilizaremos dos elementos, un ListView y un TextView. Lo mas interesante que se ve en estos dos elementos, es la utilizacion de una capacidad interesante en la propiedad id, en este caso para el ListView utilizamos @android:id/list, el cual en caso de encontrar una lista al momento de ser llamado sera mostrado, en cambio si esta vacio pasara a la accion TextView por medio de @android:id/empty, donde al no encontrar nada procedera a mostrar este elemento con el texto correspondiente. Estas dos opciones interesantes son propias de Android y es util para este caso. Ahora vamos a crear nuestra clase para poder mostrar los elementos de este layout, como siempre click con el boton derecho  sobre el contenedor de las clases java, seleccionamos New -> Java class, nos aparecera un cuadro como se ve en la siguiente imagen

android81

Aca modificamos el campo Name con el valor Puntuaciones, el resto debe quedar como se ve en la imagen, pulsen Ok para generar nuestra nueva clase. Una vez generada deben abrir la nueva clase donde tendremos el siguiente codigo:

package org.example.asteroides;

public class Puntuaciones {
}

Pasemos a modificar nuestra clase con el siguiente codigo:

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 ArrayAdapter(this,
                android.R.layout.simple_list_item_1,
                MainActivity.almacen.listaPuntuaciones(10)));
    }
}

En este codigo se encargara de mostrar el layout creado en el archivo puntuaciones.xml, aca nuestra unica particularidad es el metodo setListAdapter() donde crearemos un nuevo objeto por medio de ArrayAdapter() donde le diremos de crear un elemento de lista simple y por medio de la variable almacen creada en MainActivity podremos acceder al metodo listaPuntuaciones(), ahora vamos a hacer las ultimas modificaciones para poder probar nuestra app, primero debemos modificar el archivo strings.xml, modificaremos la siguiente linea:

<string name="botonSalir">Salir</string>

Por la siguiente linea:

<string name="botonSalir">Puntuaciones</string>
Anuncios

Ahora volveremos a nuestra clase MainActivity para agregar un nuevo metodo para poder llamar a nuestras nueva vista la cual nos posibilita poder ver las puntuaciones, veamos el nuevo codigo a agregar:

public void lanzarPuntuaciones(View view){
    Intent i = new Intent(this, Puntuaciones.class);
    startActivity(i);
}

Este codigo solo genera la nueva actividad y procede a iniciarla, el nuevo codigo de MainActivity quedara de la siguiente manera:

package org.example.asteroides;

import android.content.Intent;
import android.content.SharedPreferences;
import android.preference.PreferenceManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    public static AlmacenPuntuaciones almacen =
            new AlmacenPuntuacionesArray();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void lanzarAcercaDe(View view){
        Intent i = new Intent(this, AcercaDe.class);
        startActivity(i);
    }
    public void lanzarPreferencias(View view){
        Intent i = new Intent(this, Preferencias.class);
        startActivity(i);
    }

    public void lanzarPuntuaciones(View view){
        Intent i = new Intent(this, Puntuaciones.class);
        startActivity(i);
    }

    public void mostrarPreferencias(View view){
        SharedPreferences pref =
                PreferenceManager.getDefaultSharedPreferences(this);
        String s = "música: " + pref.getBoolean("musica",true)
                + ", graficos: " + pref.getString("graficos","?");
        Toast.makeText(this,s,Toast.LENGTH_SHORT).show();
    }
}

Con esta modificacion realizada deberemos hacer nuestras ultimas modificaciones antes de probar nuestra app, para ello deberemos primero modificar el archivo AndroidManifest.xml para declarar nuestra nueva actividad, agregaremos el siguiente codigo a este archivo:

<activity android:name=".Puntuaciones"
      android:label="@string/botonSalir" />

Nuestro archivo AndroidManifest.xml quedara de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.tinchicus.asteroides">

    <application
          android:allowBackup="true"
          android:icon="@mipmap/ic_launcher"
          android:label="@string/app_name"
          android:roundIcon="@mipmap/ic_launcher_round"
          android:supportsRtl="true"
          android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category
                      android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".AcercaDe"
              android:label="@string/tituloAcerca"
              android:theme="@android:style/Theme.DeviceDefault.Dialog" />
        <activity android:name=".Preferencias"
              android:label="@string/tituloPref" />
        <activity android:name=".Puntuaciones"
              android:label="@string/botonSalir" />
    </application>

</manifest>

Una vez declarada nuestra nueva actividad, ahora solo resta crear el listener para el evento click sobre el elemento utilizado para llamar a nuestro nuevo elemento creado en este post, veamos el elemento al cual debemos modificar en el archivo activity_main.xml:

<Button
      android:id="@+id/botSalir"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/botonSalir"     />

A este elemento le agregaremos la siguiente modificacion:

<Button
      android:id="@+id/botSalir"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/botonSalir"
      android:onClick="lanzarPuntuaciones"     />

Como pueden ver solo agregamos el listener para el evento onClick y este se encargara de llamar al nuevo metodo lanzarPuntuaciones(), con todas estas modificaciones realizadas podremos probar nuestra nueva actividad en la app y debera verse como en el siguiente video

Si lograron lo que se ve en el video, Felicitaciones!! porque han logrado uno de los aspectos que mejor define un juego pero no se olviden de modificar tambien el archivo activity_main.xml pero para la vista apaisada (land) sino cuando pasemos a esta vista no funcionara.

Anuncios

En resumen, hoy hemos visto como crear un listado de los puntajes de nuestro juego y como representarlos por medio de una vista ListView, todos los pasos necesarios para crearlo y mostrarlo, ver como una buena practica nos puede ahorrar mucho trabajo y como poco a poco va tomando mejor forma. Espero les haya gustado, 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