Programación Android, Cómo usar SwipeRefreshLayout

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn7

Pull to Refresh
Pull to Refresh

En entradas anteriores hemos explicado cómo utilizar ListViews, optimizarlos e incluso hacerlos customizados. En esta ocasión vamos a explicar cómo facilitar la tarea de actualización de los datos que contiene el ListView deslizando el listado hacia abajo utilizando SwipeRefreshLayout.

Lo primero que debemos tener en cuenta es que esta opción no está presente en todas las API, por lo que tendremos que utilizar la librería support-v4 que nos ofrece Google para facilitar la compatibilidad con versiones anteriores de Android para las nuevas herramientas que ofrecen a los desarrolladores. Esta funcionalidad la tendremos presente a partir de la versión 19.0.0 de la librería suport-v4, sin embargo es recomendable utilizar siempre la versión más actualizada que Google nos ofrece, ya que cada versión puede hacer que varíe la interfaz, y al mantener esta librería actualizada siempre estaremos en la última tendencia de Android (en el momento de escribir esta entrada Material Design).

Para el desarrollo de este ejemplo, como venimos haciendo desde hace tiempo, vamos a utilizar Android Studio, por lo que explicaremos cómo importar la librería necesaria a nuestro proyecto a través del Gradle, para utilizar otros IDEs el proceso para importar la librería puede ser diferente, sin embargo la utilización de la misma será exactamente igual.

Importar librerías

Una vez que tenemos creado nuestro proyecto abrimos el archivo bluild.gradle de nuestra aplicación, y en la sección en la que pone dependencies añadiremos una línea para compilar la librería support-v4:

dependencies {
    // Code written automatically when project is created.
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.0.0'


    // Add this line to compile in our project support-v4
    compile 'com.android.support:support-v4:22.0.0'
}

Crear un layout con SwipeRefreshLayout

Con esto ya tendremos acceso a esta librería, por lo que ya podremos utilizar la herramienta SwipeRefreshLayout que nos facilita Google. Para poder utilizarlo, en el archivo xml que contiene el en el que tenemos nuestro listado utilizaremos un nuevo tipo de layout: SwipeRefreshLayout. Esto es tan sencillo como escribir lo siguiente en el xml:

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/srlContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lv2Refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.v4.widget.SwipeRefreshLayout>

Con esto ya tenemos la interfaz gráfica que necesitamos para poder refrescar nuestros listados, sin embargo aún tenemos que configurar el funcionamiento que queremos que tenga cuando empiece a actualizar (al hacer el pull), y eliminar de la vista el aviso de carga cuando termine de actualizar, ya que si ejecutaramos en este estado la aplicación podríamos hacer el pull para refrescar los datos, aparecería el widget de aviso de actualización pero se quedaría en pantalla de forma indefinida, como podemos ver en la siguiente imagen:

SwipeRefreshLayout
SwipeRefreshLayout

A continuación vamos a nuestra Activity (o Fragment si se está implementando en uno) y vamos a crear referencias, e inicializarlas, para nuestro SwipeRefreshLayout, ListView, y un Adapter para el ListView:

private SwipeRefreshLayout swipeContainer;
    private ListView lv2Refresh;
    private ArrayAdapter<String> lvAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        swipeContainer = (SwipeRefreshLayout) findViewById(R.id.srlContainer);
        lv2Refresh = (ListView) findViewById(R.id.lv2Refresh);

        lvAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, new ArrayList<String>());
        lv2Refresh.setAdapter(lvAdapter);
    }

Configuar SwipeRefreshLayout

Ahora que ya tenemos configuradas nuestras referencias, vamos a hacer que nuestra Activity o nuestro Fragment implementen la interfaz OnRefreshListener, que será el encargado de ejecutar la tarea de actualización cuando el usuario haga el Pull to Refresh, y posteriormente le asignaremos el Listener a nuestro objeto swipeContainer:

public class MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ...

        swipeContainer.setOnRefreshListener(this);
    }

    @Override
    public void onRefresh() {
        // TODO refresh data here
    }

}

En nuestro caso, para simular que se está realizando una tarea de actualización de datos vamos a programar una tarea que se ejecute a los 3 segundos que va a añadir un nuevo elemento al listado y posteriormente eliminará el widget de aviso de actualización de la pantalla:

@Override
public void onRefresh() {
    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            // Update data in ListView
            lvAdapter.add(Calendar.getInstance().toString());
            // Remove widget from screen.
            swipeContainer.setRefreshing(false);
        }
    }, 3000);
}

Cambiar la apariencia del widget de carga

Con esto ya podemos ejecutar nuestra aplicación y veremos como podemos actualizar nuestra lista deslizando hacia abajo. Pero aún podemos cambiar el diseño del widget que aparece al hacer el pull si queremos que no sea gris, sino que tenga algunos colores que coincidan con la gama de colores que utilicemos en nuestra aplicación, es tan sencillo como indicar los colores que deseamos que aparezcan y en qué orden, en el widget se irá actualizando el color de forma automática. Para hacer esto, después de haber inicializado nuestro swipeController, escribimos el siguiente código:

// Set colors to display in widget.
swipeContainer.setColorSchemeResources(android.R.color.holo_blue_bright, 
        android.R.color.holo_green_light, 
        android.R.color.holo_orange_light, 
        android.R.color.holo_red_light);

Sólo tener en cuenta que este método recibe como parámetro int…, por lo que podemos pasar tantos colores como queramos. Si la tarea que hemos configurado a 3 segundos la cambiaramos para que tardara 20 segundos por ejemplo, podríamos ver que los colores se van sucediendo en el orden que hemos indicado, pasando siempre del último color elegido (en este caso el rojo) al primero (azul).

Esperamos que el tutorial haya sido sencillo de seguir y que haya quedado claro cómo utilizar SwipeRefreshLayout en nuestros listados. Para cualquier problema no dudes en escribirnos un comentario :)

Descargas

Puedes acceder a nuestro repositorio para bajar el proyecto aquí.

Share if you like...Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn7
The following two tabs change content below.
Reborn as IT Developer. Desarrollador Android y fundador de Proyecto Simio. "En realidad, yo no puedo enseñar nada a nadie, sólo puedo hacerles pensar." - Sócrates.

5 thoughts on “Programación Android, Cómo usar SwipeRefreshLayout

Deja un comentario