Android SwipeRefreshLayout – So wird Ihre App noch benutzerfreundlicher

Das Android SwipeRefreshLayout gehört zu den essenziellen Bestandteilen moderner Android-Apps, wenn es darum geht, Benutzern die Möglichkeit zu geben, Inhalte manuell durch Herunterziehen des Bildschirms zu aktualisieren. Besonders in sozialen Netzwerken oder E-Mail-Apps wie Gmail, Facebook und Twitter ist dieses Feature sehr verbreitet. In diesem Beitrag erläutern wir, wie Sie dieses Design-Pattern in Ihre App integrieren können.

Funktionsweise des SwipeRefreshLayouts

Das SwipeRefreshLayout ist eine spezielle Ansicht (ViewGroup), die nur ein scrollbares Kind-Element aufnehmen kann, wie z. B. eine ScrollView, ListView oder RecyclerView. Seine Hauptaufgabe besteht darin, es Nutzern zu ermöglichen, den Bildschirm manuell durch Wischen zu aktualisieren. Ein bekanntes Beispiel für diese Funktionalität findet sich in den Newsfeeds von Facebook, wo Benutzer durch das Herunterziehen des Bildschirms neue Beiträge laden können.

Bevor das SwipeRefreshLayout in die Support-Library aufgenommen wurde, war es notwendig, benutzerdefinierte Gesten zu programmieren, um einen Swipe-Down zu erkennen und beispielsweise eine ListView zu aktualisieren. Mit dem SwipeRefreshLayout wird dieser Vorgang erheblich vereinfacht.

Im Kern der Funktionsweise steht der OnRefreshListener, der ausgelöst wird, sobald ein Benutzer den Bildschirm nach unten zieht. In der onRefresh()-Methode können Sie dann den gewünschten Code ausführen, um den Inhalt neu zu laden oder zu aktualisieren.

Projektstruktur für ein Android SwipeRefreshLayout

Schauen wir uns die Struktur eines Beispielprojekts an, das eine ListView enthält, die bei einem Wisch nach unten die Elemente neu sortiert:

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeToRefresh"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
            
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

Hier wird eine ListView innerhalb eines SwipeRefreshLayouts definiert. Dieses Layout sorgt dafür, dass beim Herunterziehen der Liste ein Refresh-Event ausgelöst wird.

MainActivity.java

package com.example.swipetorefresh;

import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    ArrayList<String> arrayList = new ArrayList<>();
    SwipeRefreshLayout swipeRefreshLayout;
    ListView listView;

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

        swipeRefreshLayout = findViewById(R.id.swipeToRefresh);
        listView = findViewById(R.id.listView);

        swipeRefreshLayout.setColorSchemeResources(R.color.colorAccent);

        arrayList.add("Erstes Element");
        arrayList.add("Zweites Element");
        arrayList.add("Drittes Element");
        arrayList.add("Viertes Element");
        arrayList.add("Fünftes Element");

        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, arrayList);
        listView.setAdapter(adapter);

        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                shuffleList();
                swipeRefreshLayout.setRefreshing(false);
            }
        });
    }

    private void shuffleList() {
        Collections.shuffle(arrayList, new Random(System.currentTimeMillis()));
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, arrayList);
        listView.setAdapter(adapter);
    }
}

In diesem Code-Snippet haben wir eine ArrayList erstellt, die fünf verschiedene Strings enthält. Diese Liste wird in einem ArrayAdapter an die ListView übergeben. Die Methode shuffleList() wird aufgerufen, sobald ein Swipe-Refresh-Event ausgelöst wird. Hierbei wird die Liste zufällig neu angeordnet.

Wichtige Elemente des Codes:

• setRefreshing(false): Diese Methode informiert das SwipeRefreshLayout, dass die Aktualisierung abgeschlossen ist und die Ladeanimation gestoppt werden soll.
• setColorSchemeResources(): Hiermit wird die Farbe der Ladeanimation auf die Akzentfarbe der App gesetzt.

Fazit

Das Android SwipeRefreshLayout ist ein hilfreiches Werkzeug, um die Benutzerfreundlichkeit Ihrer App zu erhöhen. Es bietet eine einfache Möglichkeit, eine manuelle Aktualisierungsfunktion in Ihre Android-App zu integrieren. Durch die Kombination von ListView, RecyclerView oder anderen scrollbaren Ansichten mit dem SwipeRefreshLayout können Sie Ihren Nutzern eine intuitive Möglichkeit bieten, Inhalte zu aktualisieren.