SwipeRefreshLayout — пример использования

| 26.02.2015

Паттерн Swipe to refresh уже прочно закрепился в нашем обиходе, благодаря множеству популярных приложений, которые мы используем каждодневно. Суть паттерна: просматривая, например, список (ListView), пользователь касается верхней части списка (под Action Bar) и проводит пальцем вниз. Это движение инициирует появление «крутилки», которая переливается различными цветами и исчезает, как только список, отображаемый на экране, будет обновлен. Паттерн в действии можно увидеть, например, в приложении Gmail.

Реализовать паттерн можно с помощью специального layout-а под названием SwipeRefreshLayout. Для его демонстрации мы создадим простейшее приложение с одним экраном. Вместо списка на экране у нас будет только TextView, а для запуска паттерна можно будет провести пальцем от верхней части layout-а (под Action Bar).

SwipeRefreshLayout - пример использования

1. Создадим верстку экрана, где в качестве типа layout-а укажем android.support.v4.widget.SwipeRefreshLayout. Использование Support Library позволяет сделать доступным данный функционал и для старых версий Андроида.

res/layout/activity_main.xml

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

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Swipe Example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center"/>
</ScrollView>

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

2. Добавим набор цветов, которыми будет «переливаться» наша «крутилка» — res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue_swipe">#ff00ddff</color>
    <color name="green_swipe">#ff99cc00</color>
    <color name="red_swipe">#ffff4444</color>
    <color name="orange_swipe">#ffffbb33</color>
</resources>

3. Создайте новое Активити — MainActivity.java, которое реализует интерфейс SwipeRefreshLayout.OnRefreshListener:

package ru.androiddocs.swipeexample;

import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.Log;

public class MainActivity extends ActionBarActivity
        implements SwipeRefreshLayout.OnRefreshListener {

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

        mSwipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipe);
        mSwipeLayout.setOnRefreshListener(this);
        mSwipeLayout.setColorSchemeResources(
                R.color.blue_swipe, R.color.green_swipe,
                R.color.orange_swipe, R.color.red_swipe);

    }

    @Override
    public void onRefresh() {
        Log.d("my_tag", "refresh");
        new Handler().postDelayed(new Runnable() {
            @Override public void run() {
                // stop refresh
                mSwipeLayout.setRefreshing(false);
            }
        }, 7000);
    }
}

Поясню некоторые моменты. Интерфейс заставил нас реализовать метод onRefresh(), который будет отрабатываться при запуске паттерна. Добавляя слушателя события refresh для SwipeRefreshLayout мы указываем, что соответствующий метод (onRefresh()) нужно искать в этом же классе:

mSwipeLayout.setOnRefreshListener(this);

Метод setColorSchemeResources(), как вы уже догадались, устанавливает набор цветов для «крутилки». Действие произвольное. Если вы не добавите эти цвета, то крутилочка будет черно-белой.

По идее, в методе onRefresh() мы должны инициализировать процесс обновления на экране. Но так как у нас тут нет ничего, то мы просто создаем задержку в 7 секунд на запуск нового потока с помощью Handler-а, а в самом потоке вызываем метод setRefreshing(), передавая ему false — обновление закончилось.

mSwipeLayout.setRefreshing(false);

В реальной практике мы могли бы запустить здесь какую-то асинхронную задачу.

4. Мои конфиги для gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.2"

    defaultConfig {
        applicationId "ru.androiddocs.swipeexample"
        minSdkVersion 9
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}

SwipeRefreshLayout - пример использования

SwipeRefreshLayout - пример использования

Документация здесь

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*