Овладение Coordinator Layout
На презентации Google I/O 15, компания Google представила новую версию библиотеки поддержки которая реализует несколько компонентов, сильно связанных со спецификациями Material Design, среди этих компонентов вы можете найти новые типы ViewGroup такие как AppbarLayout , CollapsingToolbarLayout и CoordinatorLayout .
При правильном комбинировании и настройке данные Viewgroup могут быть очень мощным инструментом, по этому я решил написать статью с некоторыми настройками и советами.
CoordinatorLayout
Как и предполагает его название, цель и философия этой ViewGroup является координация view элементов, которые находятся внутри него.
Рассмотрим следующую картинку:
В этом примере можем видеть как view элементы размещены друг относительно друга, не прибегая к детальному просмотру, мы видим как одни View зависят от других. (мы поговорим об этом позже).
Это будет простейшая структура использования CoordinatorLayout :
Рассмотрим скелет данного layout. У этого CoordinatorLayout имеется только три дочерних элемента: AppbarLayout , прокручиваемый view и закрепленный FloatingActionBar .
AppBarLayout
Проще говоря, AppBarLayout это LinearLayout на стероидах, их элементы размещены вертикально, с определенными параметрами элементы могут управлять их поведением, когда содержимое прокручивается.
Это может прозвучать запутано сначала, но как, — «Лучше один раз увидеть, чем сто раз услышать», к вашему вниманию .gif-пример:
В данном случае AppBarLayout это синяя view, размещенная под исчезающим изображением, она содержит Toolbar , LinearLayout с заголовком и подзаголовком и TabLayout с несколькими вкладками.
Мы можем управлять поведением элементов AppbarLayout с помощью параметров: layout_scrollFlags . Значение: scroll в данном случае присутствует почти во всех элементах view, если бы этот параметр не был указан ни в одном из элементов AppbarLayout, он остался бы неизменным, позволяя прокручиваемому контенту проходить позади него.
Со значением: snap , мы избегаем попадания в полу-анимационного-состояния, это значит, что анимация всегда скрывает или отображает полный размер view.
LinearLayout который содержит заголовок и подзаголовок будет всегда отображен при прокручивании вверх, ( enterAlways значение), и TabLayout будет видим всегда так как на него не установлен ни один флаг.
Как видите настоящая мощь AppbarLayout определяется должным управлением его флагами прокрутки в определенных view.
Все эти параметры доступны в документации Google Developers. В любом случае, я рекомендую поиграть с примерами. В конце статьи размещены ссылки на репозитории Github с реализацией примеров.
Флаги AppbarLayout
SCROLL_FLAG_ENTER_ALWAYS : При использовании флага, view будет прокручиваться вниз не зависимо от других прокручиваемых view.
SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED : Дополнительный флаг для ‘enterAlways’, который изменяет возвращаемый view к изначально прокручиваемому, при исчезновении высоты.
SCROLL_FLAG_EXIT_UNTIL_COLLAPSED : При выходе, view будет прокручен до тех пор пока не исчезнет.
SCROLL_FLAG_SCROLL : Элемент view будет прокручиваться в направлении события прокрутки.
SCROLL_FLAG_SNAP : В конце прокрутки, если view видим только частично, он будет докручен до его ближайшего края.
CoordinatorLayout Behaviors
Проведем не большой эксперимент, запустим Android Studio (>= 1.4) и создадим проект из шаблона: Scrolling Activity, ничего не изменяя, компилирием и вот что мы видим:
При рассмотрении сгенерированного кода, ни макеты layout ни java классы не имеют ничего относящегося к маштабированию анимации плавающей кнопки при прокрутке. Почему?
Ответ находится в исходном коде FloatingActionButton , с тех пор как Android Studio v1.2 включает java декомпилятор, с помощью ctrl/cmd + click мы можем проверить исходный код и посмотреть что происходит:
За маштабирование анимации отвечает новый элемент, представленый вместе с design library, под названием Behavior . В данном случае , который зависит от некоторых факторов включая прокрутку, показывать FAB или нет, интересно, не правда ли?
SwipeDismissBehavior
Продолжим углубление в код, если вы посмотрите внутрь пакета виджетов design support library, то сможете найти открытй клас под названием: SwipeDismissBehavior . С этим новым Behavior мы можем очень легко реализовать функцию свайп для отмены в наших шаблонах с CoordinatorLayout :
Custom Behaviors
Создать свой шаблон поведения (Behavior) не так и сложно как может показаться, для начала мы должны принять во внимание несколько основных элементов: child и dependency.
Child и dependency
child это элемент который усиливает поведение, dependency — тот кто будет обслуживать его как тригер для взаимодействия с child элементом. Посмотрим на пример, child — элемент ImageView, а dependency это Toolbar, таким образом, если Toolbar движется, ImageView тоже движется.
Теперь, когда мы определили концепт, можем поговорить о реализации, первым шагом будет наследование от:
, значение T будет класс который принадлежит view, что необходим нам для координации, в данном случае ImageView, после чего мы должны переопределить следующие методы:
- layoutDependsOn
- onDependentViewChanged
Метод: layoutDependsOn будет вызван каждый раз когда что-то случится в layout, чтобы вернуть true , как только мы определили dependency, в примере, этот метод срабатывает автоматически при прокручивании (т.к. Toolbar будет двигаться), таким образом, мы можем подать знак нашему child отреагировать соответствующим образом.
Всякий раз когда layoutDependsOn возвращает true будет вызван второй onDependentViewChanged . Вот тут-то мы и должны реализовать нашу анимацию, перевод или движения всегда зависят от предоставленной зависимости.
Источник
Обзор нововведений Android Design Support Library v28
И снова здравствуйте.
Приближаем к дате запуска наш новый курс «Разработчик Android», осталось всего ничего и осталось немного интересных материалов, которыми делимся со всеми, в том числе и потенциальными слушателями.
Недавно была анонсирована 28 версия Android Support Library. В текущей альфа-версии у нас появился доступ к набору новых интересных компонентов. В этой статье я хочу взглянуть на дополнения, которые были внесены в библиотеку Support Library в виде компонентов Material View.
MaterialButton — это виджет, который можно использовать для отображения кнопки в материальном стиле в пользовательском интерфейсе приложений. Этот класс наследуется от класса AppCompatButton, который вы, вероятно, уже используете в своих проектах, но в чем отличия? По умолчанию эта кнопка уже будет оформлена с материальным внешним видом без необходимости настраивать ее самостоятельно, используя флаг стиля. Мы можем использовать класс MaterialButton таким, какой он есть, ведь у него уже будет материальный внешний вид, который нам и нужен — рассматривайте его как более удобный класс.
Мы можем добавить эту кнопку в наш layout-файл следующим образом:
По умолчанию этот класс будет использовать акцентный цвет вашей темы для заполнения фона кнопок и белый цвет для текста на них. Если кнопка не заполняется, то тогда акцентный цвет будет использоваться для цвета текста на кнопке вместе с прозрачным фоном.
Если мы захотим добавить к кнопке некоторые дополнительные стили, мы можем сделать это, используя набор атрибутов стиля MaterialButton.
- app:icon — Используется для определения отображаемого изображения в начале кнопки
- app:iconTint — Используется для изменения цвета иконки, определенной в атрибуте app:icon
- app:iconTintMode — Определяет режим, который будет использоваться для изменения цвета иконки
- app:iconPadding — Отступ, который будет применяться к иконке, определенной в атрибуте app:icon
- app:additionalPaddingLeftForIcon — Определяет отступ, который будет применяться слева от иконки, определенной в атрибуте app:icon
- app:additionalPaddingRightForIcon — Определяет отступ, который будет применяться справа от иконки, определенной в атрибуте app:icon
- app:rippleColor — Цвет эффекта пульсации кнопки
- app:backgroundTint — Используется для применения оттенка к фону кнопки. Если вы хотите изменить цвет фона кнопки, используйте этот атрибут вместо background, чтобы не нарушать стиль кнопок
- app:backgroundTintMode — Используется для определения режима, который будет применятся для изменения оттенка фона
- app:strokeColor — Цвет обводки кнопки
- app:strokeWidth — Ширина обводки кнопки
- app:cornerRadius — Используется для определения радиуса сглаживания углов кнопки
Компонент Chip позволяет отображать чипы в нашем layout. По сути, чип — это некоторый текст на закругленном фоне. Его цель заключается в отображении пользователю некой формы текстового набора, который может или не может быть выбран. Например, чипы могут использоваться для отображения списка выбираемых предложений для пользователя на основе текущего контекста в вашем приложении.
Мы можем добавить Chip в наш layout, используя, например, атрибут app:chipText , чтобы установить текст, который будет отображаться на чипе:
Существует также набор других атрибутов, которые можно использовать для дальнейшей стилизации чипа:
- app:checkable — Используется для объявления, может ли чип быть помечен как выбран/не выбран. Если отключено, выбор чипа ведет себя так же, как и с кнопкой
- app:chipIcon — Используется для отображения иконки в чипе
- app:closeIcon — Используется для отображения иконки удаления в чипе
Мы также можем повесить слушателей на наши экземпляры чипов. Они могут быть полезны для отслеживания взаимодействий пользователей. Если наш чип можно выбрать, скорее всего, мы захотим узнать, когда это состояние было изменено. Мы можем сделать это с помощью слушателя setOnCheckedChangeListener :
То же самое применимо и если мы хотим слушать взаимодействия с иконкой удаления. Для этого мы можем использовать функцию setOnCloseIconClickListener для регистрации событий удаления:
Если мы показываем набор чипов нашим пользователям, мы хотим убедиться, что они правильно сгруппированы вместе в нашем представлении. Для этого мы можем использовать компонент представления ChipGroup:
Если мы хотим использовать ChipGroup, нам просто нужно обернуть наши ChipView в родительский компонент ChipGroup:
По умолчанию ваши ChipView могут казаться немного прижатыми друг к другу. Если это так, вы можете добавить интервал к дочерним представлениям, используя следующие атрибуты ChipGroup:
- app:chipSpacing — Добавляет расстояние как по горизонтали, так и по вертикали
- app:chipSpacingHorizontal — добавляет расстояние по горизонтали
- app:chipSpacingVertical — добавляет расстояние по вертикали
Мы также можем объявить наши дочерние Chip View отображаемыми на одной строке внутри контейнера ChipGroup, используя атрибут app:singleLine :
При этом вам нужно обернуть ChipGroup в прокручивающееся представление, например HorizontalScrollView , чтобы ваши пользователи могли прокручивать отображаемые чипы:
Material Card View
Вероятно, в наших приложениях мы уже использовали компонент CardView в какой-то момент. В библиотеке Support Library теперь есть компонент, называемый MaterialCardView , который предоставляет нам стилизованную под материальный дизайн реализацию из коробки.
CardView можно добавить к вашему layout вот так:
Вы можете дополнительно стилизовать CardView, используя два его атрибута:
- app:strokeColor — Цвет, который будет использоваться для обводки (должен быть установлен для отображения обводки)
- app:strokeWidth — Ширина обводки
Вместе с двумя этими атрибутами, вы также можете стилизовать CardView с использованием первоначально доступных атрибутов, таких как app:cardBackgroundColor и т. д.
BottomAppBar — это новый компонент, который позволяет нам отображать компонент, похожий на панель инструментов, в нижней части нашего layout. Это позволяет нам отображать компоненты для пользователя таким образом, чтобы взаимодействовать с ними было легче, чем, возможно, со стандартной панелью инструментов.
Вы можете добавить BottomAppBar в свой layout-файл так:
Похоже, что BottomAppBar должен иметь меню, назначенное ему, чтобы оно отображалось на экране. Это можно сделать программно следующим образом:
Когда дело доходит до стилизации BottomAppBar, есть несколько атрибутов, которые вы можете использовать.
- app:fabAttached — указывает, был ли FAB прикреплен к BottomAppBar. Вы можете подключить FAB с помощью app:layout_anchor в компоненте FAB, который вы хотите подключить, используя идентификатор BottomAppBar. Если FAB прикреплен, он будет вставлен в BottomAppBar, в противном случае FAB останется выше BottomAppBar.
- app:fabAlignmentMode — Объявляет позицию FAB, который был прикреплен к BottomAppBar. Это может быть либо конец:
либо центр:
- app:fabCradleVerticalOffset — Объявляет вертикальное смещение, которое будет использоваться для прикрепленного FAB. По умолчанию это 0dp
Установка значения dp позволит FAB перемещаться вверх по вертикали:
- app:backgroundTint — Используется для изменения оттенка фона представления. Если вы хотите установить цвет фона в представлении, тогда вам нужно использовать атрибут android:background . Это обеспечит сохранение стабильности представления.
На мой взгляд, это изящные дополнения к библиотеке Support Library. Я с нетерпением жду возможности использовать компоненты в материальном стиле прямо из коробки и я также рад найти случай, где может использоваться BottomAppBar. Я уверен, что требуется некоторое время, чтобы версия Support Library стала стабильной. Как обычно, я хотел бы услышать ваши мысли или комментарии об этих новых компонентах!
Ждём ваши комментарии и вопросы, которые можно оставить тут или можете зайти к Варваре на день открытых дверей.
Источник
