DevCorner620

DevCorner: introduciamo lo SwipeRefreshLayout

Roberto Orgiu

Abbiamo notato come ultimamente il pull-to-refresh sia sempre più di moda in tutte le app, incluse quelle create da Google che, per ovviare a questa nuova esigenza, ha rilasciato in maniera abbastanza silente un nuovo componente adatto all’occasione.

Nella versione 19.1 della Support Library V4 è stato infatti inserito lo SwipeRefreshLayout, un nuovo componente che si occuperà proprio di questo comportamento con qualche ferrea regola.

Iniziamo con lo stabilire i paletti entro cui muoverci: uno SwipeRefreshLayout dovrà sempre essere il parent di un’unica View scrollable che mostrerà i dati aggiornati (il componente padre non può supportare più di un figlio) e sarà quindi il target dell’evento di scroll. Il layout interno dovrà anche avere le stesse misure del parent.

Il primo step della parte pratica consiste nell’aggiungere al nostro progetto la Support Library, come abbiamo già fatto alcune volte in precedenti tutorial: terminato questo passo, possiamo introdurre il nuovo layout nella nostra Activity, come mostrato nello snippet seguente

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/refreshLayout"
android:background="@android:color/holo_blue_dark">
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/innerScrollView"
android:background="@android:color/background_light">
<Button android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:padding="30dp"
android:text="Ferma l'aggiornamento"
android:id="@+id/btnStopUpdate"/>
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>

Passiamo alla parte Java, in cui dovremo dire alla nostra Activity di implementare SwipeRefreshLayout.OnRefreshListener in modo da ricevere l’evento di inizio dell’aggiornamento (il metodo onRefresh() verrà quindi invocato). Segnaliamo però che l’animazione comincerà automaticamente, ma dovremo fermarla noi una volta finiti di svolgere i nostri compiti.

public class SwishActivity extends Activity implements SwipeRefreshLayout.OnRefreshListener
...
@Override
public void onRefresh() {
Toast.makeText(this,"Mi hai swipato!",Toast.LENGTH_SHORT).show();
}

Purtroppo, il comportamento di questo componente è limitato e possiamo modificare molto poco delle sue caratteristiche internet, ma possiamo scegliere i colori da mostrare durante l’animazione, dopo averlo immagazzinato in una variabile ed impostato il listener per il refresh. Per l’impostazione dei colori possiamo, al momento, solamente inserire gli ID collegati alle risorse, potendoci quindi unicamente avvalere dei colori stock di Android o specificandoli nelle nostre risorse

layout = (SwipeRefreshLayout) findViewById(R.id.refreshLayout);
layout.setOnRefreshListener(this);
layout.setColorScheme(android.R.color.holo_green_dark, android.R.color.holo_blue_dark, android.R.color.holo_orange_light, android.R.color.holo_red_dark);

In maniera puramente esemplificativa, abbiamo inserito un bottone che fermerà l’aggiornamento (snippet qui sotto): segnaliamo che il codice inserito è a scopo puramente educativo e per l’esecuzione di task durante il refresh del componente è più indicato l’utilizzo di una metodologia multithreaded.

layout.setRefreshing(false);

Anche per questa settimana, siamo giunti al termine di questo DevCorner: se volete sperimentare con mano il comportamento di questo nuovo componente, fate un salto a questo link mentre, per domande e sorgenti, il thread ufficiale del nostro forum è il posto giusto da cui partire.

Android SDK