Android, Chess y Layout - (Parte III)

En el post anterior hacíamos una botonera de navegación para el ejercicio "ChessLab02", y de esa manera explorábamos los íconos de google de material design.

En este post, vamos a ver un componente que al menos a mi me pareció divertido y apropiado para incluir en layout: se trata de SeekBar, que es simplemente una ProgressBar, con un comportamiento similar.

La SeekBar permite deslizarse entre un rango de valores, desde 0 hasta un máximo. Similar a cuando nos movemos entre los videos de YouTube. También podemos customizarla, agregando una imagen que se desplaza.

En nuestro caso, desplazaremos un peón a medida que se avanza sobre la secuencia de ejercicios.

Después de dos post (primer post parte I y  segundo post parte II ) , arrancando la aplicación en Android desde cero, la misma se ve de la siguiente manera:

El objetivo de hoy es agregarle la progress bar llamada "SeekBar" para acompañar la barra de navegación del progreso.

Comencemos

La secuencia sería la siguiente:

1. Agregar una SeekBar entre 0 y 9 que son la cantidad de problemas que tenemos.
2. Cada evento de la botonera (primero, anterior, siguiente, último) moverá la SeekBar
3. Reemplazaremos la imagen por un peón.

Paso 01: Agregar SeekBar

Vamos como quedó la SeekBar agregada, cosa que es muy sencillo: simplemente un componente SeekBar en el layout y un listener en el Activity que "escucha" el movimiento del progreso.

Los eventos de "escucha" son:

new SeekBar.OnSeekBarChangeListener() {

onStartTrackingTouch ...    // Evento cuando comienzan a mover la SeekBar  

onProgressChanged ... ...    // Evento cuando se esta moviendo la SeekBar

onStopTrackingTouch ...    // Evento cuando se suelta la SeekBar 

}

Por ahora, solo muestro la imagen con el resultado, y el código lo comparo un poco mas abajo del post, porque me gustaría mostrar vincular el movimiento de la SeekBar con el cambio de imagen del problema de ajedrez

Observemos que cuando se mueve la SeekBar también se actualiza el contenido del TextView, diciendo "2/11"

Paso 02: Cambiar los problemas cuando cambia la SeekBar

Al final este paso fué mas sencillo de lo que me imaginaba, asique comienzo compartiendo el código:

En el Layout, la SeekBar se define con:

En el Main Activity la SeekBar se implementa con:

   

public class MainActivity extends AppCompatActivity {

    public static String TAG = MainActivity.class.getName();


    private static int MAX_MateEn1 = 13;
    private static int MAX_MateEn2 = 11;
    private static int MAX_MateEn3 = 15;
    private static int MAX_MateEn4 = 12;

    ImageView image;

    TextView chessSolution;
    int idx = 0;

    private SeekBar seekBar;
    private TextView  textView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        image     = (ImageView) findViewById(R.id.chess_board_image);

        seekBar   = (SeekBar)   findViewById(R.id.seekBar1);
        textView  = (TextView)  findViewById(R.id.seekBar1_text);


        // Initialize the textview with '0'.
        textView.setText("Ejercicio: " + seekBar.getProgress() + "/" + seekBar.getMax());

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            int progress = idx;


            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                // Toast.makeText(getApplicationContext(), "Started tracking SeekBar", Toast.LENGTH_SHORT).show();
            }
            
            @Override
            public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) {
                progress = progresValue;

                // Cambio el problema mientras se desliza la SeekBar
                idx = progresValue;
                navigateMateEn2();
            }


            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                textView.setText("Ejercicio: " + progress + "/" + seekBar.getMax());


                // Cambio el problema cuando se suelta la seekBar
                idx = progress;
                navigateMateEn2();
            }
        });


    }
    
    .....
}

El método navigateMateEn2() se puede ver implementado en el post anterior o bien en GitHub

La aplicación se ve como cambia de imágenes:

Y podemos ver en acción tanto la SeekBar como la barra de navegación incorporada en el post anterior en el siguiente video:

Lo último que nos quedaría sería customizar la NavBar

Paso 03: Un peón en la SeekBar

Veamos primero el resultado:

Y nuevamente mostramos en un video la demo funcionando:

Con esto damos por cerrado el post, y finalizamos la serie de:

• Android, Chess y Layout - (Parte I, II y III)

Hemos recorrido entre otras cosas, la creación de una aplicación sencilla de Android, que toma imágenes almacenadas localmente en la aplicación, y es capaz de intercambiar las imágenes de forma dinámica.

También vimos el uso de los iconos de Material Design de Google, los componentes básicos, donde el último fué como SeekBar

El código fuente está disponible en GitHub, en

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

El release completo de GitHub es:

https://github.com/PabloEzequiel/Android/releases/tag/v.2.0.1