Методы прокрутки для дизайна материалов

Вступление

В прошлом году Google представила Material Design, и стало ясно, что движение и анимация станут двумя наиболее привлекательными функциями в современных приложениях для Android. Но Google не предоставил разработчикам простого решения для их интеграции в приложения. В результате было разработано много библиотек для решения проблемы интеграции.

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

1. Регионы

В этом уроке я покажу вам, как реализовать методы прокрутки, показанные в спецификации Google Material Design . Прежде чем мы начнем, вы должны ознакомиться с доступными областями прокрутки в приложении Android. На следующем изображении вы видите четыре региона.

Статус бар

Именно здесь появляются уведомления и отображаются сведения о состоянии различных функций устройства.

Панель инструментов

Панель инструментов ранее была известна как панель действий. Теперь это более настраиваемый вид с теми же функциями.

Вкладка / Панель поиска

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

Гибкое пространство

Здесь вы можете отображать изображения или расширенные панели приложений.

Что касается методов прокрутки, то это панель инструментов и панель вкладок / поиска, которые реагируют на прокрутку содержимого вашего приложения.

2. Настройка проекта

Чтобы следовать, вы должны использовать последнюю версию Android Studio. Вы можете получить его с сайта Android Developer . Чтобы попробовать эти методы прокрутки, я рекомендую создать новый проект (с минимальным уровнем API 15), потому что макет вашего приложения значительно изменится.

Я предоставил стартовый проект, который вы можете скачать с GitHub . Вы можете использовать стартовый проект в качестве отправной точки и использовать методы прокрутки в своих собственных приложениях. Давайте сначала добавим следующие зависимости в файл build.gradle вашего проекта в папке приложения:

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

Со второй зависимостью вы получаете последнюю версию RecyclerView . Версия, указанная в официальной статье о создании списков , на этот раз не будет полезна.

Затем вам понадобятся некоторые фиктивные данные, чтобы попробовать эти методы и заполнить RecyclerView . Вы можете реализовать их самостоятельно или скопировать реализацию из класса InitialActivity в InitialActivity проект .

3. Техника прокрутки 1

Этот метод скрывает область панели инструментов при прокрутке содержимого вашего приложения. Вы можете увидеть технику в действии в следующем видео.

Для этого макета вы можете подумать о чем-то вроде этого:

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

В этом новом макете вы можете увидеть, что:

• RelativeLayout заменяется на CoordinatorLayout
• Toolbar обернута в AppBarLayout
• Toolbar и RecyclerView получили несколько дополнительных атрибутов

Что это за новые классы?

CoordinatorLayout

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

AppBarLayout

Этот макет представляет собой еще один новый контейнер, разработанный специально для реализации многих функций концепции панели приложения Material Design. Имейте в виду, что если вы используете его в другой ViewGroup , большая часть его функций не будет работать.

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

Чтобы включить эту технику, атрибут app:layout_behavior указывает, какое представление вызовет события на Toolbar . В данном случае это RecyclerView .

app:layout_scrollFlags Toolbar указывает на представление, как реагировать.

app:layout_scrollFlags может иметь четыре возможных значения, которые можно комбинировать для создания желаемого эффекта:

scroll

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

enterAlways

Этот флаг гарантирует, что при любой прокрутке вниз этот вид станет видимым, что позволяет использовать шаблон быстрого возврата .

enterAlwaysCollapsed

Когда представление объявило minHeight и вы используете этот флаг, представление войдет только на своей минимальной высоте (свернутой), расширившись до полной высоты, только когда прокручиваемое представление достигнет своей вершины.

exitUntilCollapsed

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

Теперь вы можете запустить проект или нажать Control + R и увидеть эту технику в действии.

4. Техника прокрутки 2

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

Для этого метода я собираюсь повторно использовать макет из предыдущего метода и добавить представление TabLayout рядом с Toolbar внутри AppBarLayout .

Представление TabLayout обеспечивает горизонтальное расположение для отображения вкладок. Вы можете добавить любое количество вкладок с newTab метода newTab и установить его режим поведения с помощью setTabMode . Давайте начнем с заполнения вкладок.

Изменяя значение атрибута app:layout_scrollFlags , добавляя и удаляя его с Toolbar и TabLayout , вы можете получать анимации, подобные тем, которые используются в:

• Google Play Store, где скрывается панель инструментов, а панель вкладок остается видимой.
• Foursquare, где панель вкладок прокручивается за пределами экрана, а панель инструментов остается наверху.
• Воспроизведение музыки, когда и панель инструментов, и панель вкладок прокручиваются за пределами экрана.

Посмотрите на следующие видео примеры этой техники прокрутки.

Вы можете запустить свой проект и увидеть эту технику прокрутки в действии.

5. Техника прокрутки 3

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

Для этой техники прокрутки я буду использовать следующую раскладку:

Это, конечно, выглядит много кода, поэтому давайте разберем его. В этом макете я внес следующие изменения:

• Toolbar обернута в CollapsingToolBarLayout и оба элемента помещены в AppBarLayout .
• app:layout_scrollFlags перемещен с Toolbar в CollapsingToolBarLayout , поскольку этот контейнер теперь отвечает за события прокрутки.
• Новый атрибут app:layout_collapseMode был добавлен на Toolbar . Этот атрибут гарантирует, что Toolbar остается закрепленной в верхней части экрана.
• AppBarLayout имеет фиксированную начальную высоту 192dp .
• FloatingActionButton была добавлена ​​в макет под RecyclerView .

Для чего нужны эти новые классы?

CollapsingToolBarLayout

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

app:contentScrim

Этот атрибут определяет цвет для отображения, когда он полностью свернут.

app:expandedTitleMarginStart/app:expandedTitleMarginEnd

Эти атрибуты определяют поля расширенного заголовка. Они полезны, если вы планируете использовать метод setDisplayHomeAsUpEnabled в своей деятельности и заполнять новые пробелы, созданные вокруг заголовка.

FloatingActionButton

Кнопка с плавающим действием является важным компонентом приложений Material Design. Теперь вы можете включить плавающие кнопки действий в макете всего с несколькими строками кода. Вы можете использовать атрибут app:fabSize чтобы выбрать один из двух размеров: стандартный (56 дп) и мини (40 дп). Стандартный размер по умолчанию.

Исчезающий эффект достигается автоматически путем привязки плавающей кнопки действия к AppBarLayout с помощью AppBarLayout app:layout_anchor . Вы также можете указать положение относительно этого якоря с помощью атрибута app:layout_anchorGravity .

Перед запуском проекта нам нужно указать в действии, что CollapsingToolBarLayout будет отображать заголовок вместо Toolbar . Взгляните на следующий фрагмент кода для пояснения.

Запустите проект, чтобы увидеть третий метод прокрутки в действии.

6. Техника прокрутки 4

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

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

В этот макет я внес следующие изменения:

• Атрибут android:background был удален из AppBarLayout . Поскольку ImageView собирается заполнить это пространство, нет необходимости иметь цвет фона.
• Атрибуты app:expandedTitleMarginEnd setDisplayHomeAsUpEnabled и app:expandedTitleMarginEnd setDisplayHomeAsUpEnabled были удалены, поскольку мы не используем метод setDisplayHomeAsUpEnabled в setDisplayHomeAsUpEnabled .
• ImageView был добавлен перед Toolbar . Это важно во избежание того, что AppBarLayout показывает часть изображения вместо основного цвета, когда оно AppBarLayout .

Вы также могли заметить, что ImageView имеет атрибут app:layout_collapseMode . Значение атрибута установлено равным parallax чтобы реализовать прокрутку параллакса. Кроме того, вы также можете добавить атрибут app:layout_collapseParallaxMultiplier чтобы установить множитель.

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

7. Техника прокрутки 5

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

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

Для этого макета:

• ImageView и FloatingActionButton внутри CollapsingToolbarLayout были удалены. Эта техника не требует изображения.
• В CollapsingToolbarLayout атрибут app:contentScrim был заменен атрибутом android:background . Мы делаем это, потому что цвет фона должен точно соответствовать цвету фона Toolbar при исчезновении.
• Атрибут android:background был добавлен на Toolbar .
• Атрибут app:behavior_overlapTop был добавлен в RecyclerView . Это наиболее важный атрибут для этой техники прокрутки, так как этот атрибут определяет степень перекрытия, которое должно иметь представление с AppBarLayout . Чтобы этот атрибут имел эффект, его следует добавить в то же представление, которое имеет атрибут app:layout_behavior .

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

Вывод

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

Я надеюсь, что вы нашли этот урок полезным. Не забудьте поделиться, если вам понравилось. Вы можете оставить любые комментарии и вопросы ниже.