Android studio свайп вниз

SwipeRefreshLayout

В марте 2014 года был представлен новый компонент android.support.v4.widget.SwipeRefreshLayout, который входил в состав библиотеки Support Library v4. Сейчас это отдельная библиотека в составе AndroidX.

Компонент позволяет отказаться от сторонних библиотек и собственных велосипедов для реализации шаблона «Pull to Refresh», когда пользователь сдвигает экран, чтобы обновить данные. Подобное поведение можно увидеть в клиентах для Твиттера, чтобы получить новую порцию твитов, не дожидаясь, когда список сообщений обновится самостоятельно.

Пример на Kotlin

В марте 2020 года обзавелась стабильной версией.

В методах setColorSchemeColors() или setColorSchemeResources() следует указать используемые цвета.

Компонент достаточно интересный с занимательной анимацией. Вначале анимация представляла собой цветные полоски под заголовком программы. Позже анимацию заменили в стиле Material Design, теперь это маленький кружочек, внутри которого крутятся цветные линии (или чёрная линия, если не использовать метод setColorSchemeResources() со цветами).

Запустите пример и потяните экран сверх вниз, чтобы увидеть эффект обновления данных.

Устаревший пример для Java

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

В примере реализуется интерфейс OnRefreshListener с методом onRefresh(), в котором следует обновить поступающие данные. В нашем случае просто генерируются случайные числа.

При первом появлении библиотеки использовался метод setColorScheme(), который объявлен устаревшим. Вместо него появились два новых метода setColorSchemeColors() и setColorSchemeResources(). Принцип остался тот же, вам нужно указать четыре цвета по константам Color.XXX или из ресурсов. Вы можете не использовать вызов метода с цветными линиями, тогда будет выводиться только чёрная линия по умолчанию.

Компонент достаточно интересный с занимательной анимацией. Вначале анимация представляла собой цветные полоски под заголовком программы, как представлено на видео.

Позже анимацию заменили в стиле Material Design, теперь это маленький кружочек, внутри которого крутятся цветные линии (или чёрная линия, если не использовать метод setColorSchemeResources() со цветами).

Обновляем список

По такому же принципу обновляем данные в списке.

При каждой попытке обновить список будет добавляться текущая дата и время.

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

Источник

Новый 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).

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

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

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

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

UPD:
Для желающих добавил саму APK
Ссылка на APK в виде кода, чтобы было жить легче:

Источник

Swiperefreshlayout

Latest Update	Current Stable Release	Next Release Candidate	Beta Release	Alpha Release
July 22, 2020	1.1.0	—	—	1.2.0-alpha01

Declaring dependencies

To add a dependency on SwipeRefreshLayout, you must add the Google Maven repository to your project. Read Google’s Maven repository for more information.

Add the dependencies for the artifacts you need in the build.gradle file for your app or module:

Groovy

Kotlin

For more information about dependencies, see Add build dependencies.

Feedback

Your feedback helps make Jetpack better. Let us know if you discover new issues or have ideas for improving this library. Please take a look at the existing issues in this library before you create a new one. You can add your vote to an existing issue by clicking the star button.

See the Issue Tracker documentation for more information.

Version 1.2.0

Version 1.2.0-alpha01

androidx.swiperefreshlayout:swiperefreshlayout:1.2.0-alpha01 is released. Version 1.2.0-alpha01 contains these commits.

Bug Fixes

• requestDisallowInterceptTouchEvent(boolean) now honors the request like any other ViewGroup. While strongly discouraged, new behavior can be disabled with setLegacyRequestDisallowInterceptTouchEventEnabled . (I968da, b/141855018)

Version 1.1.0

Version 1.1.0

androidx.swiperefreshlayout:swiperefreshlayout:1.1.0 is released. Version 1.1.0 contains these commits.

Major changes since 1.0.0

• SwipeRefreshLayout now implements NestedScrollingChild3 and NestedScrollingParent3 .

Version 1.1.0-rc01

androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-rc01 is released with no changes since 1.1.0-beta01 . Version 1.1.0-rc01 contains these commits.

Version 1.1.0-beta01

androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-beta01 is released with no changes since 1.1.0-alpha03 . Version 1.1.0-beta01 contains these commits.

Version 1.1.0-alpha03

androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha03 is released. Version 1.1.0-alpha03 contains these commits.

New features

• We have a new style attribute R.styleable.SwipeRefreshLayout_swipeRefreshLayoutProgressSpinnerBackgroundColor to set the background color of the progress indicator. (aosp/931124)

API changes

• requestDisallowInterceptTouchEvent(boolean) now always propagates up to its parents. While strongly discouraged, new behavior can be disabled with setLegacyRequestDisallowInterceptTouchEventEnabled . (aosp/1108540)

Bug fixes

• Fixed issue with nested scrolling where SwipeRefreshLayout has a scrollable parent (e.g. ViewPager2) and a scrollable child. (b/138314213)

Version 1.1.0-alpha02

androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02 is released. The commits included in this version can be found here.

Bug fixes

• Implemented saving and restoring of the refreshing state of SwipeRefreshLayout
• Fixed usability bug when SwipeRefreshLayout is embedded in a RecyclerView

Version 1.1.0-alpha01

December 3, 2018

API changes

• aosp/737631: SwipeRefreshLayout now implements NestedScrollingChild3 and NestedScrollingParent3 , enabling nested scrolling 3 parents and children to pass consumed nested scrolling distance information through SwipeRefreshLayout . If developer code currently overrides SwipeRefreshLayout.onNestedScroll(View, int, int, int, int, int) , it will likely no longer be called and SwipeRefreshLayout.onNestedScroll(View, int, int, int, int, int, int[]) should be overridden instead. Likewise, SwipeRefreshLayout.dispatchNestedScroll(int, int, int, int, int[], int) will likely no longer be called and SwipeRefreshLayout.dispatchNestedScroll(int, int, int, int, int[], int, int[]) should be overridden instead.

Content and code samples on this page are subject to the licenses described in the Content License. Java is a registered trademark of Oracle and/or its affiliates.

Источник

Отличный Android UX: Как сделать кнопку свайпа (swipe button)

Суть дизайна не в том, чтобы сделать что-то красивое, а в том, чтобы сделать что-то отличное. Вы можете делать хорошие приложения различными способами, но один из моих любимых — сделать его максимально простым и интуитивно понятным, но при этом оригинальным. Важно, чтобы ваш пользовательский интерфейс (UI) реагировал на пользователя в соответствии с важностью определённого действия. Иногда это действие слишком важно, чтобы запускать его простым кликом, например, разблокирование смартфона. Нажатие на кнопку и получение диалога для подтверждения это нормально. Это работает. Но все так делают! Почему бы не сделать иначе?

Что ж, сегодня мы это сделаем.

В этом уроке я покажу, как сделать кнопку свайпа. Она позволяет пользователю совершать важные действия, не обязательно подтверждая свои намерения, потому что трудно случайно нажать на кнопку (но, пожалуйста, помните: это не невозможно, так что будьте осторожны!). Таким образом, у вас есть гораздо более интуитивный. приятный и простой UX.

Круто? Итак, начнём!

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

Часть 1 — Давайте создадим наш XML

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

И фон: shape_rounded.xml:

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

Итак, теперь у нас есть xml. Давайте создадим нас пользовательский View.

Часть 2 — Делаем наш собственный View

Мы собираемся наследовать RelativeLayout, как показано ниже:

Вы, должно быть, думаете… «Это кнопка, почему мы наследуем RelativeLayout?»

Поскольку это составная кнопка, нам нужно добавить несколько представлений (views), чтобы иметь возможность сконструировать поведением, которое нам нужно, поэтому нам нужен ViewGroup. RelativeLayout — хороший вариант, потому что многие представления будут заходить один на другой в этом компоненте.

У нас есть много внутренних представлений. Итак, давайте разберём эту реализацию поэтапно.

Для вас также важно понятно переменные, объявленные в классе:

• slidingButton — это движущаяся компонента. Она содержит иконку.
• initialX — это позиция движущейся части, когда пользователь начнёт её перемещать.
• active — это переменная, которая говорит, активна кнопка или нет.
• initialButtonWidth — это начальная ширина движущейся части. Нам нужно сохранить её, чтобы мы могли вернуться в исходное положение.
• centerText — это текст в центре кнопки.
• disabledDrawable / enadledDrawable — иконки, которые движущаяся часть будет использовать, когда кнопка активна или неактивна. Используйте те иконки. которые нравятся вам.

Сначала добавим фон:

Этот View отвечает за округленный фон кнопки.

Текст

Теперь мы добавим в конец метода init() информативный текст для кнопки.

Это текст в центре компоненты. Я просто захардкодил текст для простоты, но вы можете использовать строковые ресурсы для интернационализации. Вы можете добавить отступы как вам нравится. Именно так вы контролируете размер фона вашего изображения.

Добавление движущейся иконки

Это движущаяся часть компоненты. Мы должны установить иконки для неактивного и активного состояний. Настройка отступов позволяет установить размер движущейся части.

Добавление слушателя касания

Добавьте эту строку в конец метода init(). Мы поговорим о ней в следующем разделе. В результате init() должен выглядеть следующим образом:

Уже сейчас вы можете добавить кнопку в своё приложение и увидеть результат. Например, кнопка со следующей разметкой:

Будет выглядеть так:

Пока всё выглядит хорошо. Но мы не реализовали поведение. В следующем разделе вы найдёте логику для своей кнопки!

Часть 3 — Реализация логики кнопки

Давайте реализуем метод getButtonTouchLisneter().

Теперь у нас есть слушатель. Давайте добавим логику в ACTION_MOVE.

Логика перемещения

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

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

Второе условие отвечает за касание кнопки пальцем. event.getX() возвращает позицию текущего касания. В этой части кода мы устанавливаем центр кнопки в положение касания и уменьшаем альфа-канала текста по мере свайпа.

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

Логика раскрытия

В раскрытии нам нужны три метода:

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

Примечание: Если вы хотите подробнее узнать, как создавать анимацию, то вы можете пройти по ссылке.

Вот эти анимации:

Анимация расширения

Анимация кажется сложной, правда? Не волнуйся, у тебя всё получится! Позволь мне объяснить:

Во-первых, slidingButton будет анимировать левый край вашего компонента. Это positionAnimator.

Во-вторых, кнопка должна расширяться и занимать всё пространство компонента. Это widthAnimator.

В-третьих, мы создаём AnimatorSet, чтобы можно было вместе воспроизводить анимацию. В конце анимации мы устанавливаем состояние кнопки как активное и меняем изображение.

Анимация сворачивания

Эта анимация похожа на расширение кнопки, но на этот раз мы увеличиваем альфа-канал текста, поэтому он может стать видимым.

Возвращение кнопки назад

Эта анимация перемещает кнопку назад к левому краю и восстанавливает альфа-канал текста.

Часть 4 — Результат

Если вы всё сделали правильно, то получите следующий результат (используйте тёмный фон на вашей активности):

Источник