Coordinator layout android пример

Введение в новый CoordinatorLayout

В этом году на конференции Google IO компания Google представила новую библиотеку Android Design Support Library, которая создана для того, чтобы помочь разработчикам внедрять материальный дизайн в их приложения. Билиотека содержит много компонентов, нужных для этого нового стиля, и работает со всеми уровнями API, начиная с седьмого. Если по какой-то причине вы пропустили её анонс, можете ознакомиться с постом Ian Lake, выложенным на Android Developers Blog.

Встречайте Android CoordinatorLayout

Из всех компонентов, включенных в Android Design Support Library, наиболее интересным выглядит новый «прокачанный FrameLayout», он же герой нашей статьи — CoordinatorLayout. По названию можно догадаться, что CoordinatorLayout позволяет координировать некие зависимости между включенными в него виджетами.

Всё, что нужно сделать — обернуть необходимые нам виджеты в CoordinatorLayout. Давайте посмотрим, как это будет выглядеть в коде. Наш демонстрационный код очень прост — Floating Action Button, по нажатию на которую на экране появляется Snackbar.

Сначала добавим Support Design Library в gradle:

Теперь создадим разметку для нашей Activity:

И, заодно, саму MainActivity:

Посмотрим на демо:

Но что если мы захотим использовать другую реализацию FAB? FAB из Support Library не умеет разворачиваться по нажатию на неё в список доступных опций (прим. переводчика: так, как это показано в спецификациях дизайна от самой Google), поэтому давайте-ка попробуем другую реализацию FAB:

В этом случае CoordinatorLayout не работает из коробки, и связано это с тем, что наша новая FAB не имеет подключенной к ней реализации класса CoordinatorLayout.Behavior (прим. переводчика: далее по тексту будет использоваться слово «поведение»). Что можно сделать? Можно подождать, пока кто-нибудь не добавит её…

… или написать свою собственную реализацию CoordinatorLayout.Behavior, специфичную для FAB в нашем проекте.

Виджеты учатся вести себя правильно

Чем по-настоящему хорош CoordinatorLayout, так это тем, что нам не нужно иметь доступа к исходникам того виджета, для которого нужно реализовать его поведение. Также можно изменить поведение по умолчанию для любого виджета.

Сначала отнаследуемся от класса CoordinatorLayout.Behavior:

Добавим конструктор с параметрами Context и AttributeSet для того, чтобы наша реализация могла получить необходимые ей аттрибуты из xml-файла:

Следующий шаг — переопределить метод layoutDependsOn() и возвращать true только тогда, когда мы хотим отреагировать на происходящие в разметке изменения. В нашем случае, мы хотим реагировать только на изменения виджета Snackbar:

Теперь перейдем к реализации поведения. Метод onDependentViewChanged вызывается всякий раз, когда с виджетом, который находится в CoordinatorLayout и изменения которого мы отслеживаем, что-то происходит (прим. переводчика: имеются в виду изменения, приводящие к тому, что нужно пересчитать положение на экране виджета, для которого мы реализуем поведение, то есть понятно, что изменение, скажем, цвета Snackbar нас никак не интересует). В этом методе мы можем узнать текущее состояние Snackbar, и, соответственно, подвинуть FAB вверх, когда Snackbar появляется на экране. Для этого нужно изменить значение translationY у FAB на величину, равную высоте Snackbar. В начале анимации Snackbar, свойство translationY SnackBar’a выставлено в величину, равную высоте самого Snackbar, а значит, чтобы получить правильное значение translationY для FAB, нам нужно вычесть высоту Snackbar из его же translationY. Согласно документации, нам нужно вернуть true тогда, когда объект меняет своё положение на экране.

Последнее, что остаётся сделать — указать, что CoordinatorLayout должен использовать FloatingActionButtonBehavior. Сделать это можно в разметке:

И вот результат:

Если вы хотите указать для своего виджета поведение по умолчанию, пометьте его аннотацией DefaultBehavior, указав в параметрах аннотации путь к нужной вам реализации класса Behavior.

Хотите взглянуть на полную реализацию? Вам на github.

Источник

Using CoordinatorLayout in Android apps

The CoordinatorLayout is a new layout, introduced with the Android Design Support Library. The CoordinatorLayout is a super-powered FrameLayout (according to the official documentation). If you have used a FrameLayout before, you should be very comfortable using CoordinatorLayout. If you haven’t used a FrameLayout, do not worry, it is pretty straightforward.

By default, if you add multiple children to a FrameLayout, they would overlap each other. A FrameLayout should be used most often to hold a single child view. The main appeal of the CoordinatorLayout is its ability to coordinate the animations and transitions of the views within it. Using xml only, you can describe a layout where a FAB moves out of the way of an incoming Snackbar, for example, or have a FAB (or any other View really) that is apparently attached to another widget, and moves on screen with the widget.

For this article, we are going to show three different out of the box ways that using CoordinatorLayout can simplify your code, by making views respond to changes in the layout or position of other views. Then, we will discuss how this behavior is achieved in code, and show a fourth method, where you learn how to implement your own custom behaviors between views. By implementing custom behaviors, you can easily create amazing interdependent animations, transitions and effects, limited only by your imagination (and coding ability :D).

Источник

Русские Блоги

Координатор элемента управления AndroidLayout

[Android Control CoordinatorLayout]

Обзор

определение

Прежде всего, мы должны знать, что такое CoordinatorLayout и для чего он полезен. Давайте посмотрим на описание официального документа:

CoordinatorLayout — это «улучшенный» FrameLayout, у него две основные цели:

1. Для примененияМенеджер по расположению верхнего уровня, То есть в качестве контейнера для всех элементов управления пользовательского интерфейса в пользовательском интерфейсе;
2. Используется в качествеКонтейнер элементов управления пользовательского интерфейса, которые взаимодействуют друг с другом.Указав Behavior для дочернего View объекта CoordinatorLayout, можно реализовать взаимодействие между ними.
   Behavior Может быть использовандостичьСерияИнтерактивное поведение и изменения макета, Такие как меню с боковым скольжением, элементы пользовательского интерфейса, которые можно провести для удаления, и кнопки, перемещающиеся вместе с другими элементами управления пользовательского интерфейса.

Фактически, можно резюмировать, что CoordinatorLayout — это менеджер компоновки, эквивалентный расширенной версии FrameLayout, но его магия заключается в том, что он может реализовать взаимодействие между своими дочерними представлениями.

Интерактивное поведение (поведение предварительно)

Сначала посмотрите на простой рендеринг

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

Наша Button является наблюдателем, а TextView действует как наблюдатель.Когда Button перемещается, TextView уведомляется, и TextView перемещается вместе с ним. Взгляните на его макет:

Очень просто: TextView, Button, CoordinatorLayout для внешнего слоя, а затем добавить пользовательский файл поведения в наш TextView.

Пользовательское поведение：
переписать layoutDependOn с участием onDependentViewChanged

Сосредоточьтесь на двух переписанных методах layoutDependsOn () и onDependentViewChanged ().

Прежде чем описывать эффекты этих двух методов, давайте сначала представимDependent View. В интерактивном режиме изменение зависимого представления определяет поведение другого связанного представления. В этом примере Button является зависимым представлением, потому что TextView следует за ним. Фактически, Зависимое представлениеЭквивалентноЧто мы представили ранееНаблюдаемый。

Зная эту концепцию, давайте посмотрим на роль двух переписанных методов:

• layoutDependsOn(): Этот метод будет вызываться по крайней мере один раз во время макета интерфейса, чтобы определить зависимое представление в этом интерактивном поведении. В приведенном выше коде, когда Dependency является экземпляром класса Button, он возвращает true, чтобы система знала макет файл. Кнопка в этом взаимодействии являетсяDependent View。
• onDependentViewChanged(): При изменении зависимого представления будет вызван этот метод, иchildЭквивалентно этому взаимодействиюНаблюдатель, Наблюдатель может изменить наблюдаемого человека в этом методеРеагировать, Чтобы завершить интерактивное поведение.

Итак, теперь мы можем начать писать код в Activity:

Таким образом, мы завершили интерактивное поведение по настройке последующего перемещения для TextView и Button.
На самом делеНастройте взаимодействие для дочернего представления CoordinatorLayoutПоведение занимает всего три шага:

• Настроить интерактивный класс поведения, унаследованный от класса Behavior;
• Установите атрибут layout_behavior наблюдателя равным имени класса настраиваемого класса поведения;
• Переопределите соответствующие методы класса Behavior для достижения желаемого интерактивного поведения.

Стоит отметить, что иногда нам не нужно определять класс поведения самостоятельно, потому чтоВ системе предопределено множество классов поведения для нас.。

Теперь мы уже знаем, как реализовать интерактивное поведение, установив Behavior для дочернего View объекта CoordinatorLayout.

Фактически, сам CoordinatorLayout не проделал слишком много работы, главным за реализацию интерактивного поведения является внутренний класс CoordinatorLayout-Behavior. Пропуск для координатораLayoutПрямой просмотрСвязывая поведение, это поведение будет перехватывать события касания и вложенную прокрутку, которые происходят в этом представлении. Мало того, Behavior также может перехватывать измерения и макет привязанного к нему View.

Глубокое понимание поведения

Перехват событий касания

Когда мы устанавливаем Behavior для прямого дочернего View для CoordinatorLayout, это Behavior может перехватывать события Touch, которые происходят в этом View. Итак, как это сделать?
Фактически, CoordinatorLayout переписывает метод onInterceptTouchEvent () и открывает в нем бэкдор для Behavior, позволяя ему обрабатывать события Touch до самого представления.
В частности,CoordinatorLayout изonInterceptTouchEvent() будет проходить через все прямые дочерние View, дляПрямой дочерний View, связанный с Behavior, вызывает метод Behavior onInterceptTouchEvent ()Если этот метод возвращает true, то последующие события Touch, которые должны обрабатываться соответствующим дочерним View, будут обрабатываться Behavior, а само View вызывает смущение и не знает, что произошло.

Измерение перехвата и расположение

CoordinatorLayout переписывает методы, связанные с измерениями и макетом, и открывает черный ход для Behavior.

CoordinatorLayout ВonMeasure(), он будет проходить весь прямой дочерний View, если дочернийПросмотр привязан к поведению , БудетперечислитьСоответствующийПоведение onMeasureChild(), если этот метод возвращает true, то CoordinatorLayout не будет измерять дочерний View. Таким образом, Behavior успешно взяла на себя измерение View.

Точно так же CoordinatorLayoutonLayout() также выполняется с помощью метода onMeasure ()аналогичныйЭто позволяет Behavior взять на себя макет связанных дочерних представлений.

Определение зависимости представления

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

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

1. Явная зависимость: Привязать Behavior к дочернему элементу и управлять им в методе layoutDependsOn () класса Behavior. То есть, когда переданной зависимостью является зависимое представление, она возвращает истину, так что устанавливается отношение зависимости между дочерним и зависимым представлением.
2. Неявная зависимость: Установлен якорем, о котором мы упоминали в начале. Конкретный подход может заключаться в следующем: в файле макета XML установите для атрибута layout_anchor дочернего элемента идентификатор зависимого представления, а затем атрибут layout_anchorGravity дочернего элемента используется для описания того, какой ответ он хочет сделать на изменение Зависимый взгляд. В последующих главах мы приведем конкретные примеры по этому поводу.

Независимо от того, является ли это неявной зависимостью или явной зависимостью, при изменении зависимого представления будет вызван метод onDependentViewChanged () соответствующего класса Behavior. В этом методе мы можем позволить дочернему элементу вносить изменения в ответ на изменения зависимого представления.

Развлечения с AppBarLayout

Фактически, там, где у нас есть CoordinatorLayout в приложении, AppBarLayout обычно объединяется. Как и та же библиотека из пакета Design, давайте посмотрим, что говорится в официальной документации:

AppBarLayout — это вертикальный LinearLayout, который реализует функцию жестов прокрутки панели приложений в Material Design. Дочерний View AppBarLayout должен объявлять желаемое «поведение при прокрутке», которое может быть определено свойством layout_scrollFlags или методом setScrollFlags ().

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

Между просмотром с прокруткой и AppBarLayoutСвязанный, ДобавлениемДля режима прокрутки установлено значение AppBarLayout.ScrollingViewBehavior. Строить.

Основное использование

AppBar — это концепция дизайна. Фактически, мы также можем рассматривать его как ToolBar из 5.0. Сначала почувствуйте очарование AppBarLayout + CoordinatorLayout.

Фактический эффект такой: когда вы сдвигаете View вверх, ToolBar будет маленьким, а когда вы спуститесь вниз, ToolBar появится снова, но не забывайте, это функция AppBarLayout.ToolBar мочьНе могу это сделать. Из-за скольжения наш AppBarLayout должен использоваться с скользящим представлением, таким как RecyclerView, NestedScrollView и т. Д.

Посмотрим, как достигается вышеуказанное:

• Приложение настроек дочернего элемента управления AppBarLayout:layout_scrollFlags
• Настройки RecyclerView: приложение:layout_behavior=”@string/appbar_scrolling_view_behavior”

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

layout_scrollFlags

Согласно официальным документам, значение layout_scrollFlags может быть следующим.

scroll

Эффект от установки этого значения такой же, как в представлении «Просмотр» и «Прокрутка»Один«Конкретный пример, который мы привели выше. Особого внимания требует наше внимание, чтобы другое поведение прокрутки вступило в силу, вы должны указать Scroll и соответствующий флаг одновременно, например, если мы хотим, чтобы exitUntilCollapsed показывал поведение прокрутки, мы должны установить layout_scrollFlags Укажите как scroll | exitUntilCollapsed.

exitUntilCollapsed

Когда этот вид покидает экран, он будет «свернут», пока не достигнет минимальной высоты. Мы можем понять этот эффект так: когда мы начинаем прокрутку прокрутки,Этот вид встречапервыйперениматьпрокруткаСобытие, поэтому этот вид будет прокручиваться первым, пока не достигнет минимальной высоты (складыватьВверх),Только просмотр с прокруткойНачать актуальнорулонпереехать. И когда представление полностью свернуто, прокрутите представление прокрутки вниз, покаScrolling view Топ-контентПосле полного отображения，Этот вид НачнетСкатывайсяДвигайтесь, чтобы появиться.

enterAlways

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

enterAlwaysCollapsed

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

В конце прокрутки этот вид, вероятно, находится только в состоянии «частично отображен», и эту отметку можно добавить для достижения «Либо полностью скрыт, либо полностью отображается«Эффект.

CollapsingToolBarLayout

Я считаю, что многие блоги и технические статьи объединят CollapsingToolBarLayout и CoordinatorLayout, это действительно потрясающе. Давайте также взглянем на введение в официальный документ:

CollapsingToolbarLayout обычно используется для обертывания панели инструментов в макете, чтобы получить верхнюю панель с «эффектом сворачивания».Это должно быть непосредственное дочернее представление AppBarLayout, чтобы быть эффективным.。

CollapsingToolbarLayout включает в себя следующие функции:

• Collasping title(Складываемый заголовок): когда макет полностью виден, заголовок становится больше; в сложенном виде заголовок также становится меньше. Появление титула можно передатьexpandedTextAppearance с участием collapsedTextAppearance Атрибуты для настройки.
• Content scrim(Маркер содержимого): в зависимости от того, прокручивается ли CollapsingToolbarLayout до критической точки, маркер содержимого будет отображаться или скрыт. в состоянии пройтиsetContentScrim(Drawable) Установить марлю содержимого.
• Status bar scrim(Шкала строки состояния): это также зависит от того, нужно ли прокручивать до критической точки, чтобы определить, следует ли отображать. в состоянии пройтиsetStatusBarScrim(Drawable) Способ установки. Эта функция может работать только в Android 5.0 и более поздних версиях, когда мы устанавливаем для fitSystemWindows значение ture.
• Parallax scrolling children(Дополнительный вид параллакс-прокрутки): Дополнительный вид можно прокручивать в режиме «параллакса». (Визуальный эффектДочернее представление прокручивается немного медленнее, чем другие представлениянесколько)
• Pinned position children：Дополнительный вид можешь выбратьисправленоВ определенном положении.

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

Давайте посмотрим на часто используемый эффект:

Взгляните на макет:

Мы указываем layout_scrollFlags в CollapsingToolBarLayout как scroll | exitUntilCollapsed | snap в XML-файле, чтобы реализовать эффект сворачивания при прокрутке вверх.

CollapsingToolbarLayout по сути тоже является FrameLayout. Мы указываем ImageView и Toolbar в файле макета.
Для свойства layout_collapseMode ImageView установлено значение parallax, которое представляет собой параллаксную прокрутку, которую мы представили ранее;
И layout_collaspeMode панели инструментов установлен на закрепление, что означает, что панель инструментов всегда будет закреплена вверху.

Продвинутое поведение

Сегодняшний эффект очень распространен в приложениях электронной коммерции, таких как Alipay, Taobao и JD. Например, когда вы вводите всплывающее окно пароля Alipay и выбираете атрибут продукта при размещении заказа в торговом центре, один снизу всплывает вверх. PopupWindow , Тогда я возьму тебя использовать его сегодня Behavior Вы обнаружите, что для достижения этих двух эффектов вам понадобится всего одна строка кода.

Кратко опишите используемое приложение:
1. Имитируйте всплывающее окно Alipay для ввода платежного пароля.
2. Имитация Taobao / Tmall открывает окно выбора атрибута продукта.
3. Проведите вверх и вниз по домашней странице, чтобы скрыть ToolBar и NavigationBar.
4. …

BottomSheetBehavior

① Установите поведение

• контрольУстановите слой наappbar_scrolling_view_behavior

• контролируемыйУстановите слой наbottom_sheet_behavior

Прежде всего Behavior В виде CoordinatorLayout Детский вид LayoutParams (Причина объяснена позже), поэтому CoordinatorLayout Совершенно необходимо сначала показать всю раскладку:

Как правило, на странице можно увидеть только панель инструментов и кнопку: показать / скрыть лист.
Тогда макет android: + id / tab_layout” будет горизонтальным, и для него будет установлено поведение Behavior: app: layout_behavior = ”@ string / bottom_sheet_behavior”. После тестирования он Обнаружено, что если не установить BottomSheetBehavior для tab_layout, он будет плавать вверху всей страницы и под панелью инструментов. Когда BottomSheetBehavior установлен, он будет автоматически перемещен за пределы нижней части страницы с помощью BottomSheetBehavior, поэтому макет android: + id / tab_layout” не будет виден на странице.

② Получить BottomSheetBehavior

BottomSheetBehavior имеет статический метод BottomSheetBehavior.from(View) , Вернет BottomSheetBehavior, на который ссылается это представление:

BottomSheetBehavior.from(View) Исходный код:

Этот метод проверяет, является ли это представление дочерним представлением CoordinatorLayout, и если это так, вы получите поведение этого представления, поэтому вы должны понять, почему я сказал Behavior как LayoutParams дочернего представления CoordinatorLayout в начале.

③ Управление отображением и скрытие с помощью BottomSheetBehavior

• BottomSheetBehavior.getState() Получить статус
  Его возвращаемые значения следующие:

• BottomSheetBehavior.setState Установить статус

BottomSheetDialog

Внутри представления находится RecyclerView:

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

• BottomSheetDialog.dismiss()
• BottomSheetDialog.show()

Когда вышло это диалоговое шоу, было обнаружено, что оно отображено наполовину. Что ж, этот эффект действительно хорош, так что мы достигли всплывающего окна пароля Alipay и выбора атрибута продукта Taobao / Tmall, о котором мы изначально говорили.
Когда мы скользим, если ниже есть контент, он EXPANDED Если этоОбычный вид(Non-RecyclerView, NestedScrollView) будетНе буду продолжать скользить вверх, Следующее содержимое будет продолжать отслеживаться, но вы также можете сдвинуть его вниз, чтобы скрыть его, или вы можете позвонить dismiss с участием close неисправность.

Яма BottomSheetDialog

Когда этот Dilaog открывается, а затем закрывается, его нельзя использовать Dialog.show() Снова открыть, зачем?

Я пошел читать это BottomSheetDialog Исходный код, нашел следующий код:

Другими словами, систематический BottomSheetDialog основывается на BottomSheetBehavior Инкапсулированный, здесь судят, когда мы скользим, чтобы спрятаться BottomSheetBehavior После просмотра устанавливается внутренний BottomSheetBehavior Статус STATE_HIDDEN , А потом он закрылся для нас Dialog , Поэтому мы снова звоним dialog.show() когда Dialog Больше невозможно открыть диалог со статусом СКРЫТЬ.

Здесь есть вопрос:
Почему Google не предоставил собственные настройки BottomSheetCallback А как насчет интерфейса?

Ничего страшного. После прочтения исходного кода это очень просто. Давайте реализуем это сами, и мы слушаем, как пользователь скользит, чтобы закрыть BottomSheetDialog После того, как мы положили BottomSheetBehavior Установлен на BottomSheetBehavior.STATE_COLLAPSED , Что является половиной открытого состояния ( BottomSheetBehavior.STATE_EXPANDED Чтобы открыть все) по исходному коду предоставляю способ настройки:

Так решено BottomSheetDialog Проблема не может быть открыта снова после закрытия.

Источник