Добавление жестов смахивания в RecyclerViews

Большая часть Material Design — это способ взаимодействия пользователей с визуальными элементами приложения. Поэтому в дополнение к касаниям и долгим нажатиям сегодня ожидается, что хорошо сделанное приложение для Android будет обрабатывать более сложные жесты, такие как перетаскивание и перетаскивание. Это особенно важно, если приложение использует списки для отображения своих данных.

С помощью виджета RecyclerView и нескольких других компонентов Android Jetpack вы можете обрабатывать различные жесты, связанные со списком, в своих приложениях. Кроме того, всего за несколько строк кода вы можете связать анимацию Material Motion с этими жестами.

В этом уроке я покажу вам, как добавить несколько общих жестов смахивания, в комплекте с интуитивно понятными анимациями, в ваши списки.

Предпосылки

Чтобы максимально использовать этот урок, вам понадобятся:

• Android Studio 3.2.1 или выше
• телефон или планшет под управлением Android API уровня 23 или выше

1. Создание списка

Чтобы этот урок был коротким, давайте сгенерируем один из шаблонов, доступных в Android Studio.

Начните с запуска Android Studio и создания нового проекта. В мастере создания проекта убедитесь, что вы выбрали опцию « Пустое действие» .

Вместо библиотеки поддержки мы будем использовать Android Jetpack в этом проекте. Итак, после создания проекта перейдите в Refactor> Migrate to AndroidX . При появлении запроса нажмите кнопку « Перенос» .

Затем, чтобы добавить список в проект, выберите «Файл»> «Создать»> «Фрагмент»> «Фрагмент (список)» . В появившемся диалоговом окне продолжите и нажмите кнопку Готово , не внося никаких изменений в значения по умолчанию.

На этом этапе Android Studio создаст новый фрагмент, содержащий полностью настроенный виджет RecyclerView . Он также будет генерировать фиктивные данные для отображения внутри виджета. Тем не менее, вам все равно придется добавить фрагмент к основному виду деятельности вручную.

Для этого сначала добавьте интерфейс OnListFragmentInteractionListener к основному OnListFragmentInteractionListener деятельности и реализуйте единственный содержащийся в нем метод.

Затем вставьте фрагмент в действие, добавив следующий <fragment> в файл activity_main.xml :

На этом этапе, если вы запустите свое приложение, вы сможете увидеть список, который выглядит следующим образом:

2. Добавление жеста для удаления

Используя класс ItemTouchHelper , вы можете быстро добавлять жесты перетаскивания и перетаскивания в любой виджет RecyclerView . Класс также предоставляет анимации по умолчанию, которые запускаются автоматически при обнаружении действительного жеста.

Класс ItemTouchHelper нуждается в экземпляре абстрактного класса ItemTouchHelper.Callback чтобы иметь возможность обнаруживать и обрабатывать жесты. Хотя вы можете использовать его напрямую, гораздо проще использовать вместо этого класс-оболочку SimpleCallback . Это тоже абстрактно, но у вас будет меньше методов для переопределения.

Создайте новый экземпляр класса SimpleCallback внутри onCreateView() класса ItemFragment . В качестве аргумента для его конструктора вы должны передать направление свайпа, которое хотите обработать. А пока передайте ему RIGHT чтобы он обрабатывал жест смахивания вправо.

У класса есть два абстрактных метода, которые вы должны переопределить: метод onMove() , который обнаруживает перетаскивания, и метод onSwiped() , который обнаруживает свайпы. Поскольку сегодня мы не будем обрабатывать какие-либо жесты перетаскивания, убедитесь, что вы возвращаете false в onMove() .

Внутри onSwiped() вы можете использовать свойство adapterPosition чтобы определить индекс элемента списка, который был проведен. Поскольку сейчас мы реализуем жест смахивания для удаления, передайте индекс методу removeAt() из фиктивного списка, чтобы удалить элемент.

Кроме того, вы должны передать этот же индекс notifyItemRemoved() адаптера виджета RecyclerView , чтобы убедиться, что элемент больше не отображается. При этом также запускается анимация удаления элемента по умолчанию.

На этом этапе объект SimpleCallback готов. Все, что вам нужно сделать сейчас, это создать объект ItemTouchHelper и прикрепить к нему виджет RecyclerView .

Если вы запустите приложение сейчас, вы сможете смахивать элементы из списка.

3. Выявление фона

Хотя жест смахивания с удалением очень интуитивен, некоторые пользователи могут быть не уверены, что произойдет, когда они будут выполнять жест. Поэтому в руководствах по дизайну материалов говорится, что жест должен также постепенно раскрывать вид, скрытый за элементом, который четко указывает на то, что произойдет дальше. Обычно фоновый вид — это просто значок, отображающий мусорное ведро.

Чтобы добавить значок корзины в проект, выберите « Файл»> «Создать»> «Векторный набор» и выберите значок « Удалить» .

Теперь вы можете получить ссылку на значок в своем коде Kotlin, вызвав метод getDrawable() . Поэтому добавьте следующую строку в метод onCreateView() класса ItemFragment :

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

Переопределите метод onChildDraw() вашей реализации SimpleCallback чтобы начать рисование.

В приведенном выше коде onChildDraw() метода onChildDraw() суперкласса. Без этого ваши элементы списка не будут перемещаться при их перелистывании.

Поскольку мы обрабатываем только жест смахивания вправо, координаты X верхнего левого и нижнего левого углов фонового представления всегда будут равны нулю. Координаты X верхнего правого и нижнего правого углов, с другой стороны, должны быть равны параметру dX , который указывает, насколько элемент списка был перемещен пользователем.

Чтобы определить координаты Y всех углов, вы должны будете использовать свойства top и bottom одного из представлений, представленных внутри объекта viewHolder .

Используя все эти координаты, теперь вы можете определить прямоугольную область клипа. В следующем коде показано, как использовать для clipRect() метод clipRect() объекта Canvas :

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

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

Вы можете повторно использовать координаты верхнего левого угла области клипа в качестве координат верхнего левого угла значка. Однако они должны быть смещены с помощью textMargin . Чтобы определить координаты его нижнего правого угла, используйте его ширину и высоту. Вот как:

Наконец, нарисуйте значок, вызвав его метод draw() .

Если вы снова запустите приложение, вы сможете увидеть значок, когда проводите пальцем, чтобы удалить элемент списка.

4. Добавление жеста смахивания к обновлению

Жест смахивания до обновления, также известный как жест с вытягиванием до обновления, стал настолько популярным в наши дни, что в Android Jetpack есть специальный компонент для него. Он называется SwipeRefreshLayout и позволяет быстро связать жест с любым виджетом RecyclerView , ListView или GridView .

Для поддержки жеста смахивания до обновления в вашем виджете RecyclerView вы должны сделать его дочерним по SwipeRefreshLayout виджету SwipeRefreshLayout . Итак, откройте файл <SwipeRefreshLayout> добавьте к нему тег <SwipeRefreshLayout> и переместите <RecyclerView> внутри него. После этого содержимое файла должно выглядеть так:

Фрагмент списка предполагает, что виджет RecyclerView является корневым элементом его макета. Поскольку это больше не так, вам нужно внести несколько изменений в метод onCreateView() класса ItemFragment . Сначала замените первую строку метода, которая раздувает макет, следующим кодом:

Затем измените последнюю строку метода, чтобы он возвращал виджет SwipeRefreshLayout вместо виджета RecyclerView .

Если вы попробуете запустить приложение сейчас, вы сможете выполнить жест вертикальной прокрутки и получить визуальную обратную связь. Содержимое списка не изменится. Чтобы действительно обновить список, вы должны связать объект SwipeRefreshLayout виджетом SwipeRefreshLayout .

Внутри слушателя вы можете изменять данные, отображаемые в списке, в соответствии с вашими требованиями. На данный момент, поскольку мы работаем с фиктивными данными, давайте просто очистим список фиктивных элементов и загрузим его с 25 новыми фиктивными элементами. Следующий код показывает вам, как это сделать:

После обновления данных не забудьте вызвать метод notifyDataSetChanged() чтобы adapter виджета RecyclerView знал, что он должен перерисовать список.

По умолчанию, как только пользователь выполняет жест смахивания для обновления, виджет SwipeRefreshLayout отображает анимированный индикатор хода выполнения. Поэтому после обновления списка вы должны не забыть удалить индикатор, установив для свойства isRefreshing виджета значение false.

Если вы запустите приложение сейчас, удалите несколько элементов списка и выполните жест «пролистывание до обновления», вы увидите сам сброс списка.

Вывод

Material Design существует уже несколько лет, и большинство пользователей в наши дни ожидают, что вы справитесь со многими жестами, которые он упоминает. К счастью, это не требует особых усилий. В этом уроке вы узнали, как реализовать два очень распространенных жеста смахивания. Вы также узнали, как постепенно открывать вид, скрытый за предметом списка.

Вы можете узнать больше о жестах и ​​движении материала, обратившись к руководству по дизайну жестов.