- PVSM.RU - https://www.pvsm.ru -

Новый SwipeRefreshLayout из библиотеки Android support — «потяните чтобы обновить»

Тихо и незаметно вместе с обновлением библиотеки Android support до версии 19.1 в нее прокрался [1] новый компонент, который часто бывает нужным и полезным в быту. Сей совсем крохотный росчерк я посвящаю ему, SwipeRefreshLayout [2].

Он добавляет функционал, который один мой коллега называет «резинка от трусов», а остальные знают этот UI-паттерн под названием «потяни, чтобы обновить». Он бывает нужен, когда есть какой-то контент, который пользователь хочет часто обновлять, и может это сделать, просто потянув контент жестом вниз, а потом отпустив.

Очень похоже, что компонент был создан для GoogleNow [3], а потом перекочевал в support lib (очень похожа анимация).

Алгоритм простой.

  1. Компонент «оборачивается» вокруг View или Layout, для которого нужно сделать обновление и может содержать только одного потомка (похоже на ScrollView).
  2. Устанавливается OnRefreshListener [4] с одним единственным методом onRefresh() [5]. Как на него реагировать — решаем сами.
  3. Когда нужно показать, что идет обновление (и запустить анимацию), вызываем метод setRefreshing(boolean) [6] и передаем ему true. Наиболее логичным кажется вызов метода внутри onRefresh() [5].
  4. Когда обновление закончено, вызываем метод setRefreshing(boolean) [6] и передаем ему false.

Давайте попробуем набросать пример использования.
Наш XML (если нужно, можно и динамически создать компонент и добавить в него потомка, компонент наследуется от ViewGroup [7]).

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/refresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.shppandroid1.app.MainActivity">
    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>

Теперь наша Activity, а именно метод onCreate:

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

        mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.refresh);
        mSwipeRefreshLayout.setOnRefreshListener(this);
        // делаем повеселее
        mSwipeRefreshLayout.setColorScheme(R.color.blue, R.color.green, R.color.yellow, R.color.red);

        ListView listView = (ListView) findViewById(android.R.id.list);
        // классический адаптер
        listView.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, ITEMS));
    }

В данном случае я сделал нашу Activity реализующей интерфейс OnRefreshListener

public class MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener

Обратите внимание на метод setColorScheme [8], он как раз и раскрашивает в разные цвета прогресс во время обновления. В видео ниже видно, о чем я говорю. Первый цвет из 4-х — цвет прогресса во время оттягивания контента вниз перед обновлением. Остальные — сменяющиеся цвета прогресса.

А теперь сам onRefresh();

@Override
    public void onRefresh() {
        // говорим о том, что собираемся начать
        Toast.makeText(this, R.string.refresh_started, Toast.LENGTH_SHORT).show();
        // начинаем показывать прогресс
        mSwipeRefreshLayout.setRefreshing(true);
        // ждем 3 секунды и прячем прогресс
        mSwipeRefreshLayout.postDelayed(new Runnable() {
            @Override
            public void run() {
                mSwipeRefreshLayout.setRefreshing(false);
                // говорим о том, что собираемся закончить
                Toast.makeText(MainActivity.this, R.string.refresh_finished, Toast.LENGTH_SHORT).show();
            }
        }, 3000);
    }

Демонстрация:

UPD:
Для желающих добавил саму APK [9]
Ссылка на APK в виде кода, чтобы было жить легче:
Новый SwipeRefreshLayout из библиотеки Android support — «потяните чтобы обновить»

Автор: rimmer

Источник [10]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/news/58497

Ссылки в тексте:

[1] прокрался: http://developer.android.com/tools/support-library/index.html#revisions

[2] SwipeRefreshLayout: http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html

[3] GoogleNow: https://play.google.com/store/apps/details?id=com.google.android.launcher

[4] OnRefreshListener: http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.OnRefreshListener.html

[5] onRefresh(): http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.OnRefreshListener.html#onRefresh()

[6] setRefreshing(boolean): http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html#setRefreshing(boolean)

[7] ViewGroup: http://developer.android.com/reference/android/view/ViewGroup.html

[8] setColorScheme: http://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html#setColorScheme(int, int, int, int)

[9] APK: https://www.dropbox.com/s/e7r359gs9rwcdqa/app-release.apk

[10] Источник: http://habrahabr.ru/post/218365/