Android, Chess y Layout - (Parte II)

En el post anterior comenzamos con el proyecto de Android ChessLab02 (Compartido en GitHub) que se enfoca en el layout de Android y en la parte gráfica de una posible aplicación de Ajedrez.

Hoy vamos a intentar evolucionar ese componente agregando lo siguiente:

- Botones de Anterior, Siguiente, Primero, Ultimo
- Botón de ver solución
- ProgressBar que indique en que progreso, con una imagen

Para el post siguiente quedará la posibilidad de ver las soluciones, lo que nos obligará a trabajar con un archivo en formato Json, que relacionará los ejercicios con las soluciones.

Comencemos

Paso 01: Buscamos Botones de Anterior, Siguiente, Primero, Ultimo

Podría agregar cuatro botones del tipo Buton con los eventos, pero obviamente esto va a quedar muy tosco visualmente. La alternativa es utilizar cuatro imágenes típicas del avanzar y retroceder.

 Y aquí es donde viene la primera pregunta importante, que nos invita a pensar antes de empezar a hacer las cosas de la primera forma que se nos viene a la mente.

¿De donde vamos sacamos la imágenes para la botonera de la aplicación?

Las primeras alternativas son, de google images, de algún proyecto de GitHub, las hacemos nosotros, de la primera página que nos aparezca en google.... o también podría ser de las guías de material design oficiales de google

Esta guía la encontramos en:
http://google.github.io/material-design-icons/

Y además de ser la guía oficial, nos permite descargar todo el conjunto de iconos. La última versión de la colección de íconos de Material design que me descargué de esa página de google es un archivo de 60 MB.

Y, en seguida nos llevamos la grata sorpresa, que tiene los iconos exactamente que necesitábamos, con los nombres exactos, y con sus distintas resoluciones, y listos para utilizarlos en el proyecto Android.

Dice el refrán, "para muestra sobra un botón" y vamos a ver entonces el botón de "último":

El único problema, sería para los desarrolladores/diseñadores que buscarían diferenciarse con su aplicación  (no es nuestro caso), ya que si utilizan los ícono de esta colección les van a quedar las aplicaciones igual a la de todo el mundo.

Lo interesante, y que me causa curiosidad es el directorio
drawable-anydpi-v21
Donde representa a la imagen en modo de vector.
Aún no se cuál es el sentido, pero googleando rápido pareciera que es para versiones mas nuevas de android que lo soporta, y permite escalar mejor la imagen... disculpen la ignoracia...

Paso 02: Copiamos Botones de Anterior, Siguiente, Primero, Ultimo

https://design.google.com/icons/

Si nos fijamos en el índice, los encontramos en la sección de "Navigation"

La cual nos ofrece el nombre exacto y la vista previa en distintos tipos de fondos del material design:

Nos podemos descargar también el ícono con su familia de resoluciones, lista para android, incluso también iOS o la web:

O podemos filtrar desde la colección completa descargada, sabiendo los nombres que queremos:

En mi caso, me gusta el software "Beyond Compare" y lo utilizo para copiar toda la familia de ícono de una sola vez:

Paso 03: Agregamos los iconos al proyecto android

Observamos que agregamos la colección de íconos de navegación de material design que nos interesaba:

Paso 04: A Codear! botonera ...

Por fin volvemos a codear, después de copiar los íconos, vamos a hacer alguna botonera mas o menos como sigue:

|< <  > >|    i

Tomamos los iconos, y los agrego al post del blog y vemos la idea la botonera así:

          

Y vemos como queda, con la botonera incorporada:

     

El código Android, de la botonera, es el siguiente:

<LinearLayout    android:padding="10dp"    android:gravity="center_horizontal"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal">

    <ImageView        android:id="@+id/navigation_01_first"        android:src="@drawable/ic_first_page_black_24dp"        android:layout_width="24dp"        android:layout_height="24dp"        android:layout_margin="2dp"        android:onClick="firstMateEn2" />
    <ImageView        android:id="@+id/navigation_02_prev"        android:src="@drawable/ic_chevron_left_black_24dp"        android:layout_width="24dp"        android:layout_height="24dp"        android:layout_margin="2dp"        android:onClick="prevMateEn2" />

    <ImageView        android:id="@+id/navigation_03_next"        android:src="@drawable/ic_chevron_right_black_24dp"        android:layout_width="24dp"        android:layout_height="24dp"        android:layout_margin="2dp"        android:onClick="nextMateEn2" />

    <ImageView        android:id="@+id/navigation_04_last"        android:src="@drawable/ic_last_page_black_24dp"        android:layout_width="24dp"        android:layout_height="24dp"        android:layout_margin="2dp"        android:onClick="lastMateEn2" />
    <ImageView        android:id="@+id/navigation_05_info"        android:src="@drawable/ic_info_outline_black_24dp"        android:layout_width="24dp"        android:layout_height="24dp"        android:layout_marginLeft="40dp"        android:layout_marginTop="2dp"        android:layout_margin="2dp"        android:layout_marginRight="2dp"/>
</LinearLayout>

Y finalmente, los métodos "onClick" se pueden ver mejor en el post anterior, pero igualmente voy  a compartir lo que agregué en este ejercicio para tener "anterior, siguiente, primero, último" sin demasiado copy&paste:

public void firstMateEn2(View view) {

    Log.d(TAG, "firstMateEn2" +  idx);
    idx = 0;
    navigateMateEn2(view);}

public void lastMateEn2(View view) {

    Log.d(TAG, "lastMateEn2" +  idx);
    idx = 11;
    navigateMateEn2(view);}

public void prevMateEn2(View view) {

    Log.d(TAG, "prevMateEn2" +  idx);
    idx --;
    navigateMateEn2(view);}

public void nextMateEn2(View view) {

    Log.d(TAG, "nextMateEn2" +  idx);
    idx ++;
    navigateMateEn2(view);}

private void navigateMateEn2(View view) {

    Log.d(TAG, "NETX - navigateMateEn2 " +  idx);
    if (idx < 0) {
        idx = 0;    }

    if (idx > 11) {
        idx = 0;    }

    if (idx == 0) {
        image.setImageResource(R.drawable.chess_mate2_00000);    }

    if (idx == 1) {
        image.setImageResource(R.drawable.chess_mate2_00001);    }

    if (idx == 2) {
        image.setImageResource(R.drawable.chess_mate2_00002);    }

    if (idx == 3) {
        image.setImageResource(R.drawable.chess_mate2_00003);    }

    if (idx == 4) {
        image.setImageResource(R.drawable.chess_mate2_00004);    }

    if (idx == 5) {
        image.setImageResource(R.drawable.chess_mate2_00005);    }

    if (idx == 6) {
        image.setImageResource(R.drawable.chess_mate2_00006);    }

    if (idx == 7) {
        image.setImageResource(R.drawable.chess_mate2_00007);    }

    if (idx == 8) {
        image.setImageResource(R.drawable.chess_mate2_00008);    }

    if (idx == 9) {
        image.setImageResource(R.drawable.chess_mate2_00009);    }

    if (idx == 10) {
        image.setImageResource(R.drawable.chess_mate2_00010);    }

    if (idx == 11) {
        image.setImageResource(R.drawable.chess_mate2_00011);    }

    // Toast.makeText(this, "Boton Click", Toast.LENGTH_SHORT);

}

Básicamente, muevo el puntero del ejercicio actual. En la app están las 11 imágenes con los ejercicios de Mate en 2


Para cerrar el post, agrego otra imagen de la App, donde en la solución utiliza un unicode de ajedrez:

La tabla de Unicode de Chess symbols es la siguiente:

• 2654 ♔ WHITE CHESS KING 
• 2655 ♕ WHITE CHESS QUEEN 
• 2656 ♖ WHITE CHESS ROOK
• 2657 ♗ WHITE CHESS BISHOP 
• 2658 ♘ WHITE CHESS KNIGHT 
• 2659 ♙ WHITE CHESS PAWN

• 265A ♚ BLACK CHESS KING 
• 265B ♛ BLACK CHESS QUEEN
• 265C ♜ BLACK CHESS ROOK
• 265D ♝ BLACK CHESS BISHOP 
• 265E ♞ BLACK CHESS KNIGHT 
• 265F ♟ BLACK CHESS PAWN

Comparto un video subido a YouTube con el ejemplo de la aplicación funcionando. Este video tiene incorporada la SeekBar que se desarrolla en el siguiente post, de la Parte III


El código fuente, como siempre, queda compartido en GitHub

https://github.com/PabloEzequiel/Android/tree/ChessLab02