Como crear un slider de imágenes con viewFlipper

Como crear un slider de imágenes con viewFlipper

Comenzaré con este artículo una serie de tutoriales básicos sobre programación en android con java. Mi objetivo, en ésta ocasión es como programar un slider de imágenes muy sencillo usando para ello el objeto ViewFlipper.

Realmente con ViewFlipper tan sólo conseguiré interfaces muy sencillas, pero que cumplen perfectamente con el objetivo. En artículos posteriores veremos slider más complejos.

Estos artículos han surgido de mi necesidad profesional de aprender android para realizar aplicaciones comerciales. Hay muchísimos tutoriales en Internet -o en el portal de youtube- que te ayudarán a comprender y aprender a realizar código android basado en java.

Interfaz de la app con XML

Lo primero que vamos a hacer es escribir el código XML que necesitaremos para diseñar la interfaz que estamos buscando. El código es bien simple. Usaremos un RelativeLayout. El código tendrá el siguiente aspecto.

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

   <ViewFlipper
       android:layout_width="match_parent"
       android:layout_height="200dp"
       android:layout_centerHorizontal="true"
       android:id="@+id/vflipper" />

</RelativeLayout>

Básicamente identificamos el objeto ViewFlipper con su android:id correspondiente, lo centramos horizontalmente y lo adaptamos para que use todo el ancho del dispositivo y una altura de  200dp.

Programa principal

Ahora dirigiré mi antención al programa principal. Vamos a necesitar una función que nos ayude a añadir las imágenes al objeto ViewFlipper. Pero vamos por pasos. Lo primero es asociar el recurso xml que ya declaramos con el objeto ViewFlipper.

Después implementaremos una función auxiliar en la que se reserva espacio en memoria para una imagen, y se añade al slider. A continuación se configura el objeto para que el desplazamiento sea automático y con un intervalo de 4 segundos. Por último se echará mano de unas librerias de android para que el desplazamiento sea de izquierda a derecha. No tiene más misterio. Veamos el código de la función:

public void flipperimagenes ( int image ) {

        ImageView iview = new ImageView ( this );

        iview.setBackgroundResource( image );

        vflipper.addView (iview);
        vflipper.setFlipInterval(4000);
        vflipper.setAutoStart(true);

        vflipper.setInAnimation(this, android.R.anim.slide_in_left);
        vflipper.setOutAnimation(this, android.R.anim.slide_out_right);

    }

Programa completo

Para terminar éste artículo, os voy a dejar el programa completo por si queréis copiarlo directamente.

public class MainActivity extends AppCompatActivity {

    ViewFlipper vflipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        int images[] = {R.drawable.slider1, R.drawable.slider2, R.drawable.slider3};

        vflipper = (ViewFlipper) findViewById(R.id.vflipper);

        for ( int i=0; i<images.length; i++) {
            flipperimagenes(images[i]);
        }

    }

    public void flipperimagenes ( int image ) {

        ImageView iview = new ImageView ( this );

        iview.setBackgroundResource( image );

        vflipper.addView (iview);
        vflipper.setFlipInterval(4000);
        vflipper.setAutoStart(true);

        vflipper.setInAnimation(this, android.R.anim.slide_in_left);
        vflipper.setOutAnimation(this, android.R.anim.slide_out_right);

    }

}

Resultado final del programa

resultado final del programa
resultado final del programa

Como podemos apreciar en la imagen, ejecuté en android studio el programa que hemos realizado juntos obteniendo éste resultado. Cada cuatro segundo, como cabría esperarse, la imagen se desplazará hacia la derecha, dando paso por la izquierda a la nueva imagen.

Este es, quizás, el ejemplo más sencillo que se puede realizar con el objeto ViewFlipper. Más adelante, como ya indicamos al inicio de éste artículo, complicaremos un poco más el código.

Os dejo la sección de comentarios abierta para que me dejéis vuestras opiniones o vuestros códigos alternativos.

No Comments

Post a Comment