...

воскресенье, 6 апреля 2014 г.

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

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

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


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



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



  1. Компонент «оборачивается» вокруг View или Layout, для которого нужно сделать обновление и может содержать только одного потомка (похоже на ScrollView).

  2. Устанавливается OnRefreshListener с одним единственным методом onRefresh(). Как на него реагировать — решаем сами.

  3. Когда нужно показать, что идет обновление (и запустить анимацию), вызываем метод setRefreshing(boolean) и передаем ему true. Наиболее логичным кажется вызов метода внутри onRefresh().

  4. Когда обновление закончено, вызываем метод setRefreshing(boolean) и передаем ему false.


Давайте попробуем набросать пример использования.

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



<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4"
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, он как раз и раскрашивает в разные цвета прогресс во время обновления. В видео ниже видно, о чем я говорю. Первый цвет из 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

Ссылка на APK в виде кода, чтобы было жить легче:


This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

Отправить комментарий