Android / PreferenceFragment en Asteroides

Bienvenidos sean a este post, ahora vamos a volver a trabajar con las preferencias creadas en el post anterior. Como dijimos en el post anterior, el metodo utilizado ya esta desechado y por ende no deberia ser utilizado para solucionar esto debemos usar el PreferenceFragment el cual explicaremos en este post pero basta de preambulos y comencemos a trabajar sobre nuestro vista preferencias.

Abramos nuestra nuestra app con Android Studio, primero vamos a crear una nueva clase de Java, para ello hacemos click con el boton derecho sobre el contenedor de las clases, seleccionamos New -> Java class como se ve en la siguiente imagen

Una vez seleccionado nos aparecera el siguiente cuadro

Aca completaremos el campo Name con el valor PreferenciasFragment, el resto queda como se ve y pulsamos Ok para generar nuestro nuevo archivo quedando de la siguiente forma

Ahora vamos a proceder a editarlo pero antes su codigo actual:

package org.example.asteroides;

public class PreferenciasFragment {
}

Lo vamos a modificar de la siguiente forma:

package org.example.asteroides;

import android.os.Bundle;
import android.preference.PreferenceFragment;

public class PreferenciasFragment extends PreferenceFragment {
    
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        addPreferencesFromResource(R.xml.preferencias);
    }
}

Como pueden ver es muy parecida a la clase creada en el post anterior pero en este caso en vez de utilizar PreferenceActivity utilizaremos PreferenceFragment pero salvo esto el resto es exactamente el mismo.  Ahora procedamos a realizar un par de modificaciones en nuestra clase Preferencias, primero veamos el codigo actual:

package org.example.asteroides;

import android.os.Bundle;
import android.preference.PreferenceActivity;

public class Preferencias extends PreferenceActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        addPreferencesFromResource(R.xml.preferencias);
    }
}

Ahora procederemos a reemplazarlo de la siguiente forma:

package org.example.asteroides;

import android.app.Activity;
import android.os.Bundle;

public class Preferencias extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        getFragmentManager().beginTransaction()
                .replace(android.R.id.content, new PreferenciasFragment())
                .commit();
    }
}

Como pueden reemplazamos un par de elementos, veamos el primero:

public class Preferencias extends Activity {

Aca pasamos de PreferenceActivity a Activity para que nuestra clase ahora se extienda en la clase Activity y luego reemplazamos:

addPreferencesFromResource(R.xml.preferencias);

Por el siguiente bloque:

getFragmentManager().beginTransaction()
        .replace(android.R.id.content, new PreferenciasFragment())
        .commit();

Utilizaremos el metodo getFragmentManager(), luego iniciamos por medio de beginTransaction() y por medio de replace() reemplazaremos el content y le asignaremos a la nueva clase creada anteriormente, y por ultimo el commit() se encarga de correr todo lo anterior, el resultado final es similar a este:

Como pueden ver el resultado es similar a lo creado en el post anterior, ahora veamos cuales son las ventajas de trabajar con PreferenceFragment en lugar de PreferenceActivity, para ello vamos a crear una opcion de preferencias para el modo multijugador pero primero vamos a modificar strings.xml para agregar los titulos de las nuevas preferencias, veamos el codigo actual de strings.xml:

<resources>
    <string name="app_name">Asteroides</string>
    <string name="tituloJuego">Asteroides</string>
    <string name="botonJugar">Jugar</string>
    <string name="botonConf">Configurar</string>
    <string name="botonAcerca">Acerca de</string>
    <string name="botonSalir">Salir</string>
    <string name="tituloAcerca">Acerca De...</string>
    <string name="tituloPref">Preferencias</string>
    <string name="pref_musica">Reproducir Música</string>
    <string name="pref_graficos">Tipo de gráficos</string>
    <string name="pref_fragmentos">Número de fragmentos</string>
    <string name="pref_sum_musica">Se reproduce la música de fondo</string>
    <string name="pref_sum_graficos">Se escoge la representacion de los gráficos</string>
    <string name="pref_sum_fragmento">En cuantos trozos se divide los asteroides</string>
</resources>

Agregaremos cuatro lineas para los titulos de nuestras nuevas preferencias, veamos el codigo modificado:

<resources>
    <string name="app_name">Asteroides</string>
    <string name="tituloJuego">Asteroides</string>
    <string name="botonJugar">Jugar</string>
    <string name="botonConf">Configurar</string>
    <string name="botonAcerca">Acerca de</string>
    <string name="botonSalir">Salir</string>
    <string name="tituloAcerca">Acerca De...</string>
    <string name="tituloPref">Preferencias</string>
    <string name="pref_musica">Reproducir Música</string>
    <string name="pref_graficos">Tipo de gráficos</string>
    <string name="pref_fragmentos">Número de fragmentos</string>
    <string name="pref_sum_musica">Se reproduce la música de fondo</string>
    <string name="pref_sum_graficos">Se escoge la representacion de los gráficos</string>
    <string name="pref_sum_fragmento">En cuantos trozos se divide los asteroides</string>
    <string name="pref_multi">Modo Multijugador</string>
    <string name="pref_activar">Activar multijugador</string>
    <string name="pref_jugadores">Maximo de jugadores</string>
    <string name="pref_conexion">Tipos de conexión</string>
</resources>

Como pueden ver las ultimas cuatro lineas las utilizaremos para los titulos de nuestras nuevas preferencias, ahora vamos a ver como se puede organizar varios tipos de preferencias, el primero va a ser por pantallas y para poder utilizarlo debemos utilizarlo de la siguiente forma:

<PreferenceScreen>
    <CheckBoxPreference.../>
    <ListPreference.../>
    <EditTextPreference.../>
    <PreferenceScreen>
        <CheckBoxPreference.../>
        <EditTextPreference.../>
        <ListPreference.../>
    </PreferenceScreen>
</PreferenceScreen>

Cuando nosotros queremos crear varias pantallas de preferencias (o varias opciones) debemos crear una PreferenceScreen maestra, como la que tenemos ahora en el archivo preferencias.xml, y luego crearemos otra PreferenceScreen dentro de esta con todos sus elementos, esto nos creara un elemento para poder llamar a estas preferencias, para entender mejor el ejemplo veamos el codigo actual de preferencias.xml:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:key="preferencias_principal">
    <CheckBoxPreference
         android:key="musica"
         android:title="@string/pref_musica"
         android:summary="@string/pref_sum_musica" />
    <ListPreference
         android:key="graficos"
         android:title="@string/pref_graficos"
         android:summary="@string/pref_sum_graficos"
         android:entries="@array/tiposGraficos"
         android:entryValues="@array/tipoGraficosValores"
         android:defaultValue="1" />
    <EditTextPreference
         android:key="fragmentos"
         android:title="@string/pref_fragmentos"
         android:summary="@string/pref_sum_fragmento"
         android:defaultValue="3" />
</PreferenceScreen>

Ahora lo modificaremos de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:key="preferencias_principal">
    <CheckBoxPreference
         android:key="musica"
         android:title="@string/pref_musica"
         android:summary="@string/pref_sum_musica" />
    <ListPreference
         android:key="graficos"
         android:title="@string/pref_graficos"
         android:summary="@string/pref_sum_graficos"
         android:entries="@array/tiposGraficos"
         android:entryValues="@array/tipoGraficosValores"
         android:defaultValue="1" />
    <EditTextPreference
         android:key="fragmentos"
         android:title="@string/pref_fragmentos"
         android:summary="@string/pref_sum_fragmento"
         android:defaultValue="3" />
    <PreferenceScreen
         android:key="preferencias_multijugador"
         android:title="@string/pref_multi">
        <CheckBoxPreference
             android:key="multi"
             android:title="@string/pref_activar" />
        <EditTextPreference
             android:key="jugadores"
             android:title="@string/pref_jugadores"
             android:defaultValue="3" />
        <ListPreference
             android:key="conexion"
             android:title="@string/pref_conexion"
             android:entries="@array/tipoConexion"
             android:entryValues="@array/tipoConexionValor"
             android:defaultValue="1" />
    </PreferenceScreen>
</PreferenceScreen>

Como pueden ver hemos creado otra PreferenceScreen dentro de la anterior, hemos utilizado los titulos creados en strings.xml pero todavia no podemos probar nuestra app porque nos va a generar un error, para evitar este error debemos generar unos nuevos valores del tipo string-array como vimos en el post anterior, procedamos a crear los nuevos valores, abramos el archivo arrays.xml y veamos el codigo actual:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="tiposGraficos">
        <item>vectorial</item>
        <item>bitmap</item>
        <item>3D</item>
    </string-array>
    <string-array name="tipoGraficosValores">
        <item>0</item>
        <item>1</item>
        <item>2</item>
    </string-array>
</resources>

Ahora procederemos a agregar nuestros nuevos elementos:

<?xml version="1.0" encoding="utf-8"?>
 
    <string-array name="tiposGraficos">
        <item>vectorial</item>
        <item>bitmap</item>
        <item>3D</item>
    </string-array>
    <string-array name="tipoGraficosValores">
        <item>0</item>
        <item>1</item>
        <item>2</item>
    </string-array>
    <string-array name="tipoConexion">
        <item>Bluetooth</item>
        <item>Wi-Fi</item>
        <item>Internet</item>
    </string-array>
    <string-array name="tipoConexionValor">
        <item>0</item>
        <item>1</item>
        <item>2</item>
    </string-array>


Como pueden ver tenemos los dos elementos de string-array, el primero lo utilizaremos como etiqueta para el segundo el cual luego sera utilizado  para modificar nuestras configuraciones, ahora con nuestros nuevos valores creados probemos nuestra app, veamos el siguiente video

Como pueden ver en el video, se creo una nueva opcion para poder acceder las preferencias del multijugador. Ahora pasaremos a ver la segunda forma de poder mostrar nuestras preferencias, esta es por categorias y lo bueno que permite mostrar todas las preferencias en una sola pantalla. Para trabajar en Categorias la estructura es de la siguiente forma:

<PreferenceScreen>
    <CheckBoxPreference... />
    <ListPreference... />
    <EditTextPreference... />
    <PreferenceCategory...>
        <CheckBoxPreference... />
        <EditTextPreference... />
        <ListPreference... />
    </PreferenceCategory>
</PreferenceScreen>

Al igual que al anterior PreferenceScreen va a ser nuestro raiz pero en lugar de volver a utilizar un PreferenceScreen ahora utilizaremos el PreferenceCategory, al codigo anteriormente visto vamos a modificarlo para poder ser utilizado por categorias:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:key="preferencias_principal">
    <PreferenceCategory
         android:title="@string/tituloJuego">
    <CheckBoxPreference
         android:key="musica"
         android:title="@string/pref_musica"
         android:summary="@string/pref_sum_musica" />
    <ListPreference
         android:key="graficos"
         android:title="@string/pref_graficos"
         android:summary="@string/pref_sum_graficos"
         android:entries="@array/tiposGraficos"
         android:entryValues="@array/tipoGraficosValores"
         android:defaultValue="1" />
    <EditTextPreference
         android:key="fragmentos"
         android:title="@string/pref_fragmentos"
         android:summary="@string/pref_sum_fragmento"
         android:defaultValue="3" />
    </PreferenceCategory>
    <PreferenceCategory
         android:key="preferencias_multijugador"
         android:title="@string/pref_multi">
        <CheckBoxPreference
             android:key="multi"
             android:title="@string/pref_activar" />
        <EditTextPreference
             android:key="jugadores"
             android:title="@string/pref_jugadores"
             android:defaultValue="3" />
        <ListPreference
             android:key="conexion"
             android:title="@string/pref_conexion"
             android:entries="@array/tipoConexion"
             android:entryValues="@array/tipoConexionValor"
             android:defaultValue="1" />
    </PreferenceCategory>
</PreferenceScreen>

Como pueden ver hicimos un par de simples cambios, agregamos un nuevo tag para PreferenceCategory para los elementos principales y reemplazamos al PreferenceScreen interno por otro PreferenceCategory, despues de la modificacion si volvemos a probar la app nos quedara como se ve en el siguiente video

Como pueden ver estas son dos opciones de como ordenar nuestras preferencias en una app, ya sea por medio de pantallas o por categorias, estas siempre van a quedar a criterio del programador como digo siempre pero si es verdad que para algunas opciones va a ser mas practico hacer pantallas y otras veces, como es en este caso por categorias porque no tenemos tantas opciones para nuestra app.

En resumen, hoy hemos visto como crear preferencias por fragmento (PreferencesFragment), y como a su vez nos permiten organizar nuestras preferencias ya sea por pantallas o por categorias. 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.