Шаблон «Basic Activity»
Раньше шаблон использовал компоненты из библиотеки Android Support Design и был специально спроектирован под новый дизайн Material Design. Позже появился Jetpack AndroidX и шаблон переделали. А недавно его в очередной раз изменили, добавив фрагменты и новый способ навигации между ними.
Создадим проект при помощи шаблона Basic Activity.
Заполняем нужные поля. Флажок ставить не нужно, он нужен для поддержки старой библиотеки.
При использовании шаблона будут задействованы различные компоненты: CoordinatorLayout, AppBarLayout, FloatingActionButton, Snackbar.
Первые три компонента доступны через XML-разметку, а Snackbar вызывается программно.
Изучим разметку активности activity_main.xml.
Корневым элементом разметки служит компонент CoordinatorLayout, который является наследником стандартного FrameLayout. Но если обычный FrameLayout позволяет просто накладывать один компонент поверх другого, то CoordinatorLayout позволяет координировать определённые зависимости между дочерними компонентами. Сейчас мы не будем вдаваться в тонкости, этой теме можно посвятить отдельную статью.
Далее идёт AppBarLayout с вложенным Toolbar. Связка компонентов образуют внешний вид и поведение продвинутого заголовка экрана активности, который пришёл на смену ActionBar из Android 4.x, который в свою очередь заменил стандартный заголовок (Title) в Android 2.x. Опять оставляем их пока без внимания.
Потом следует интересный приём, который вам может впоследствии пригодиться. В существующую разметку вставляется ещё одна разметка при помощи тега include и с указанием вставляемой разметки — layout/content_main.xml.
Завершает основную разметку красивая кнопка FloatingActionButton, которая на самом деле является продвинутым вариантом ImageView. Но в спецификации Material Design кнопке отводится большая роль и практически является визитной карточкой нового дизайна. Наверняка, вы уже видели её на различных картинках.
Подробнее о возможностях кнопки в отдельной статье. Обратите внимание, что кнопка «пришпилена» к нижнему правому углу экрана при помощи layout_gravity. В качестве значка используется изображение из системных ресурсов @android:drawable/ic_dialog_email в свойстве srcCompat. Вы можете установить собственное изображение, подходящее по контексту. На данный момент Гугл рекомендует отказываться от растровых изображений и активно использовать векторные изображения.
Заменим значок электронной почты на изображение лапы кота. Щёлкаем правой кнопкой мыши по папке app и вызываем контекстное меню New | Vector Asset. В диалоговом окне щёлкаем по значку Clip Art, чтобы открыть другое окно для выбора значка. В строке поиска набираем pets и находим нужный значок. Выделяем его и нажимаем OK.
По умолчанию значок имеет чёрный цвет. Для нашего примера удобнее использовать белый цвет. В том же окне есть настройка цвета. Впрочем, цвет можно будет поменять и вручную позже. Для нашего урока это пока не важно, можете вообще не менять цвет.
Далее нажимаем кнопку Next и в следующем окне запоминаем название файла в ресурсах. Если вы всё-таки поменяли цвет, то логичнее будет поменять и название файла, убрав слово «black». Для этого можно вернуться на ша назад и отредактировать поле Name. Оставляю на ваше усмотрение.
Теперь вы можете заменить значок для кнопки, выбрав соответствующий атрибут.
Также у активности есть меню в виде трёх точек, как создавать меню вы должны уже знать.
Snackbar
Если раньше для всплывающих сообщений использовались хлебные тосты Toast, то теперь можно использовать новый класс Snackbar.
Класс Snackbar имеет много общего с классом Toast и имеет практически тот же синтаксис.
Пример запуска сообщения находится в файле класса MainActivity.kt.
Как видите, код очень похож. Но есть и различия. Если Toast является частью активности и выводится поверх неё в нижней части по умолчанию, если не заданы другие параметры, то Snackbar выводится в «подвале» родительского элемента. В первом параметре указывается подходящий компонент, по которому система попытается найти родителя, обычно им является CoordinatorLayout. В некоторых примерах я видел код, когда родитель указывается явно.
Раньше шаблон состоял из одного класса активности. Сейчас всё поменяли. Теперь за экран активности отвечают два фрагмента, между которыми можно переключаться кнопками. Взаимодействие между фрагментами реализовано через новый способ навигации.
Источник
Русские Блоги
Обучение AppBarLayout и CollapsingToolbarLayout от MaterialDesign
1. Краткое введение
AppBarLayout и CollapsingToolbarLayout, которые будут представлены в этой статье, — это новые элементы управления, которые появляются с MaterialDesign. Их роль заключается в «улучшении» панели инструментов. Их внешний вид делает панель инструментов не просто скучной «панелью действий», а Поистине духовная и динамичная панель инструментов приложения. Давайте посмотрим, как они используются.
Два, используйте
1、CoordinatorLayout
Прежде чем использовать AppBarLayout и CollapsingToolbarLayout, давайте сначала поговорим об этом CoordinatorLayout. CoordinatorLayout буквально переводится как «координирующий макет». Как следует из названия, он используется для координации вложенных макетов и элементов управления. Чтобы использовать его, вы должны установить его как корень всего макета. В то же время установите для свойства app: appbar_scrolling_view_behavior значение «специальный дочерний элемент управления» Значение для координации позиции отображения дочернего элемента управления во всем макете. Эта статья не будет подробно объяснять это, нам нужно только знать, что для использования AppbarLayout для «улучшения» Toolbar вам необходимо использовать CoordinatorLayout. Пример кода для использования CoordinatorLayout:
Из приведенного выше кода мы можем узнать, что для элемента управления NestedScrollView установлено только свойство app: appbar_scrolling_view_behavior. Да, NestedScrollView является упомянутым выше «специальным дочерним элементом управления». Существует 3 таких «специальных дочерних элемента управления», соответственно. Использование RecyclerView, ViewPager и NestedScrollView в основном одинаково, а свойство app: appbar_scrolling_view_behavior действительно только для этих трех «специальных дочерних элементов управления». Для этого NestedScrollView вы можете рассматривать его как расширенную версию ScrollView. Что ж, давайте представим главного героя этой статьи.
2、AppBarLayout
Ниже приводится описание AppBarLayout в официальном документе:
AppBarLayout — это вертикальный LinearLayout, который реализует функцию жестов прокрутки панели приложения в Material Design. Дочерний View AppBarLayout должен объявлять желаемое «поведение при прокрутке», которое может быть определено свойством layout_scrollFlags или методом setScrollFlags ().
AppBarLayout работает только как прямой дочерний View для CoordinatorLayout.
Чтобы AppBarLayout знал, когда прокручивать дочерние представления, мы также должны предоставить прокручиваемый вид в макете CoordinatorLayout, который мы называем прокручиваемым представлением. Связь между представлением с прокруткой и AppBarLayout устанавливается путем установки для Behavior представления с прокруткой значения AppBarLayout.ScrollingViewBehavior.
В сочетании с кодом, опубликованным в разделе CoordinatorLayout выше, вторую половину этого описания нетрудно понять, и более сложным для понимания должен быть атрибут layout_scrollFlags. Прокручиваемый вид в описании — это упомянутый выше «специальный дочерний элемент управления». Имейте в виду, что в описании говорится, что свойство layout_scrollFlags установлено для прямых дочерних элементов управления AppbarLayout. Давайте посмотрим, какие свойства ayout_scrollFlags доступны:
| Значение атрибута scrollFlags | эффект |
|---|---|
| scroll | Пусть AppBarLayout и представление прокрутки будут интегрированы, когда прокручиваемое представление прокручивается, AppBarLayout также прокручивается вместе с ним. Это обязательное значение для «расширенной» панели инструментов, и его можно использовать с другими значениями для достижения различных «расширенных» эффектов. При использовании только прокрутки эффект аналогичен добавлению HeaderView в ListView. |
scroll
| Значение атрибута scrollFlags | эффект |
|---|---|
| scroll | enterAlways | Когда прокручиваемое представление прокручивается вверх, AppBarLayout также выкатывается за пределы экрана.После прокрутки представления прокручивается вниз, AppBarLayout также перемещается на экран. |
enterAlways
| Значение атрибута scrollFlags | эффект |
|---|---|
| scroll | enterAlways | enterAlwaysCollapsed | Когда прокручиваемый вид прокручивается вверх, AppBarLayout также выкатывается за пределы экрана. Когда прокручиваемый вид прокручивается вниз, AppBarLayout сначала медленно прокручивается до свернутой высоты (т. Е. Минимальной высоты), пока прокручиваемый вид не прокручивается вверх, AppBarLayout затем Сначала медленно прокрутите до исходной высоты (в это время вид прокрутки также снова будет прокручиваться вместе с AppBarLayout). |
enterAlwaysCollapsed
| Значение атрибута scrollFlags | эффект |
|---|---|
| scroll | exitUntilCollapsed | Когда прокручиваемое представление прокручивается вверх, AppBarLayout также выкатывается за пределы экрана вместе, пока не достигнет высоты сворачивания (т. Е. Минимальной высоты). В это время AppBarLayout больше не прокручивается, то есть не полностью скатывается с экрана, и когда прокручиваемый вид прокручивается вниз до максимума Вверху AppBarLayout будет затем прокручиваться в режиме прокрутки, пока не достигнет исходной высоты. |
exitUntilCollapsed
| Значение атрибута scrollFlags | эффект |
|---|---|
| scroll | snap | Snap имеет значение спешки, и эффект такой же, как и означает. Когда прокручиваемое представление находится в состоянии, когда оно больше не может прокручиваться вниз (то есть достигло вершины), прокрутите прокручиваемое представление вверх в это время, и AppBarLayout сразу же развернется с экрана, или Прокрутите страницу прокрутки вниз, AppBarLayout сразу перейдет на экран. Есть ощущение тяжести. |
Что ж, «улучшение» панели инструментов AppBarLayout почти похоже на это, но, чтобы исправить один момент, на самом деле AppBarLayout — это не просто «улучшение» панели инструментов, это то же самое для других элементов управления, но более распространена комбинация AppBarLayout и панели инструментов. Теперь давайте посмотрим, как CollapsingToolbarLayout может «улучшить» панель инструментов.
3、CollapsingToolbarLayout
«Улучшение» CollapsingToolbarLayout для панели инструментов состоит в том, что она делает панель инструментов складной, чтобы на ней было больше интерактивных шаблонов (фактически, больше интерактивной анимации). Давайте сначала посмотрим на эффекты, которые могут быть достигнуты:
Чтобы добиться эффекта, показанного на рисунке выше, его необходимо использовать вместе с AppBarLayout. Использовать CollapsingToolbarLayout очень просто. Просто оберните панель инструментов напрямую. Элемент управления ImageView можно добавить в качестве «фона» CollapsingToolbarLayout. Фактически, CollapsingToolbarLayout сам является FrameLayout, поэтому его дочерние элементы управления Размещение должно начинаться с левого верхнего угла и складываться по очереди. Однако по умолчанию панель инструментов сначала скрыта.
В этом коде есть деталь, требующая внимания. Вы можете обнаружить, что свойство app: layout_scrollFlags больше не установлено для панели инструментов в коде, а для элемента управления CollapsingToolbarLayout. Это неудивительно, поскольку, как упоминалось выше, свойство app: layout_scrollFlags установлено для прямых дочерних элементов управления AppBarLayout. Посмотрим, как это работает:
Это эффект по умолчанию. Вы можете видеть, что во время процесса прокрутки ImageView и заголовок прокручиваются вверх или вниз вместе. В этом процессе панель инструментов будет отображаться только тогда, когда CollapsingToolbarLayout свернут, а заголовок выполнил масштабирование, положение и прозрачность. Дождитесь анимации, и панель инструментов выполнит прозрачную анимацию.Два заголовка перекрываются или разделяются, и похоже, что есть только один заголовок. Кроме того, в приведенном выше коде макета есть стили для панели инструментов, но он не работает. CollapsingToolbarLayout предоставляет атрибуты стиля текста, которые могут устанавливать стили текста для большого заголовка (расширенный заголовок) и подзаголовка (свернутый заголовок) соответственно.
Код стиля текста в style.xml выглядит следующим образом:
Установите стиль развернутого заголовка и стиль свернутого заголовка для CollapsingToolbarLayout соответственно
Этого недостаточно. Если вы хотите изменить цвет фона на сплошной цвет и строку состояния, когда CollapsingToolbarLayout свернут, вы можете установить это с помощью следующего кода:
ContentScrim устанавливает цвет фона CollapsingToolbarLayout при сворачивании. statusBarScrim устанавливает цвет строки состояния, когда она сложена, что может обеспечить эффект погружения, но этот атрибут должен поддерживаться Android 5.0 или более поздней версии. Более того, некоторые домашние машины имеют ограничения на строку состояния и не могут действовать, например система молотка , Строка состояния имеет полупрозрачный цвет, и этот атрибут не может действовать, поэтому этот эффект зависит от телефона и версии системы. Посмотрим, как это работает:
Да, так себе, но это почти готово, вам нужно установить эффект параллакса для картинки «фон», и текст заголовка отображается внизу по центру. Установка эффекта параллакса для изображения «фон» может быть выполнена путем установки свойства app: layout_collapseMode, если это свойство является дочерним элементом управления CollapsingToolbarLayout, есть три значения: none, pin, parallax. Эффект параллакса заключается в том, что при свертывании CollapsingToolbarLayout этот макет (или элемент управления) будет иметь эффект складывания параллакса; эффект закрепления заключается в том, что после свертывания CollapsingToolbarLayout этот макет (или элемент управления) будет зафиксирован вверху. «Нет» является значением по умолчанию, то есть не имеет никакого эффекта. Если честно, я чувствую, что нет никакой разницы между «pin» и «none» (если вы считаете, что я ошибаюсь, пожалуйста, просветите меня). Что касается положения заголовка, его можно настроить с помощью app: collapsedTitleGravity и app: collapsedTitleGravity. Используется так же, как layout_gravity, поэтому я не буду об этом говорить. Вставьте код и просто посмотрите на эффект.
Источник
