Учимся обновлять страницы приложения с помощью Swipe Refresh Layout
Учимся обновлять страницы приложения с помощью Swipe Refresh Layout
Главная » Учимся обновлять страницы приложения с помощью Swipe Refresh Layout

С появлением Android 5 Lollipop и Material Design, в функционале Android программирования появилось много интересных вещей, одну из которых мы сегодня рассмотрим и научимся использовать. Речь идет о такой штуке, как Swipe Refresh Layout. Использование этого вида layout дает возможность обновлять страницы приложения с помощью жеста пальца вниз от верха экрана. Если вы пользуетесь мобильной версией браузера Chrome, то видели эту функцию, которая, кстати, введена совсем недавно, около месяца тому назад:

Обновление браузера

Красивая и полезная вещь, а что еще более интересно - не сложная в использовании и доступна даже на старых версиях Android, на Froyo точно (проверено). И так, начинаем просвещаться.

Создаем новый проект, выбираем Blank Activity. Открываем файл activity_main.xml и добавляем туда специальный layout по имени SwipeRefreshLayout для реализации обновления жестом:

<android.support.v4.widget.SwipeRefreshLayout
 xmlns:android="schemas.android.com/apk/res/android"
 android:id="@+id/swipe_refresh"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <ScrollView
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <TextView
 android:id="@+id/tv"
 android:text="Крутой Hello World с SwipeRefresh"
 android:textSize="12pt"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center"/>
 </ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>

Элемент ScrollView создан для того, чтобы можно было свайпнуть страницу, без него ничего не выходит (это конкретно в нашем случае, а не везде).

Если не вторгаться в настройки цвета значка обновления, по умолчанию он будет черно-белым. Но мы сделаем свой кружок. Для этого в папке res/values создаем файл по имени colors.xml и добавим туда несколько цветов:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="light_blue">#AFEEEE</color>
 <color name="middle_blue">#6495ED</color>
 <color name="deep_blue">#0000FF</color>
</resources>

Теперь переходим в MainActivity.java и начинаем писать код. Для реализации такой функции обновления жестом, нашему activity необходимо выполнять специальный интерфейс SwipeRefreshLayout. OnRefreshListener

import android.app.Activity;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.os.Bundle;

public class MainActivity extends Activity implements SwipeRefreshLayout.OnRefreshListener {

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

 mSwipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
 
 //Настраиваем выполнение OnRefreshListener для данной activity:
 mSwipeRefresh.setOnRefreshListener(this);
 //Настраиваем цветовую тему значка обновления, используя наши цвета:
 mSwipeRefresh.setColorSchemeResources
 (R.color.light_blue, R.color.middle_blue,R.color.deep_blue);

 }

 @Override
 public void onRefresh() {
 new Handler().postDelayed(new Runnable() {
 @Override public void run() {
 
 //Останавливаем обновление:
 mSwipeRefresh.setRefreshing(false)
 ;}}, 5000);
 }
}

Особо то и объяснять нечего, объявили и инициализировали элемент SwipeRefreshLayout, задали выполнение интерфейса .OnRefreshListener, настроили для крутящейся полоски цвета, используя созданные нами с файле colors.xml. Если их не использовать то, как упоминалось выше, анимация будет черно-белой.

Создаем метод onRefresh (), в нем мы указываем на конечность нашего процесса обновления (.setRefreshing (false) ) и задаем длину процесса обновления в 5000 миллисекунд, то есть в 5 секунд. Можете поэкспериментировать и добавить больше цветов и большее время длительности анимации обновления, сколько вам хочется.

Запускаем свое творение и смотрим на результат:

Наше работающее приложение

Получилось, согласитесь довольно прикольная фишка :). Как нибудь позже разберемся с более сложными примерами использования Swipe Refresh Layout.

Категория: Уроки программирования | Просмотров: 734 | Добавил: Oleg | Теги: новинки интерфейса, Material Design, обновление страницы Swipe Refres, Swipe Refres Layout | Рейтинг: 5.0/1
Всего комментариев: 0
avatar