Что такое CoordinatorLayout?


96

Только что взглянул на демонстрационное приложение новой библиотеки дизайна поддержки Android. Он предоставлен Крисом Бэйнсом на github . Через приложение, CoordinatorLayoutактивно используется. Кроме того, многие классы библиотеки дизайна поддержки, такие как FloatingActionButton, SnackBarи AppBarLayoutт. Д., Ведут себя по-разному при использовании внутри CoordinatorLayout.

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


5
android-developers.blogspot.com/2015/05/… Он также имеет обширное, хотя и сбивающее с толку, описание в JavaDocs (в настоящее время недоступно в форме с возможностью прямой ссылки, но вы можете загрузить ZIP с сайта developer.android.com/preview /download.html ).
CommonsWare

1
В чем собственно преимущество использования CordinatorLayout? В чем его преимущество перед другими?
eRaisedToX

Ответы:


44

Вот она, которую вы ищете.

из документов

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

https://android-developers.googleblog.com/2015/05/android-design-support-library.html

по этой ссылке вы увидите демонстрационные видеоролики всех вышеупомянутых просмотров.

надеюсь это поможет :)


4
ссылка не работает.
Йогеш Сералия

40

Что такое CoordinatorLayout? Не позволяйте причудливому названию ввести вас в заблуждение, это не что иное, как FrameLayout на стероидах.

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

Если вы погуглите слово

Координаты

Это то, что ты получаешь:

введите описание изображения здесь

Я думаю, что эти определения помогают описать, что CoordinatorLayout делает сам по себе и как ведут себя представления внутри него.

CoordinatorLayout (ViewGroup) объединяет различные элементы (дочерние представления) в (̶a̶ ̶c̶o̶m̶p̶l̶e̶x̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶ ̶o̶r̶ ̶a̶n̶ ̶o̶r̶g̶a̶n̶i̶z̶ati̶i̶iiizati̶i̶iiiiz̶ati̶i̶ii

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

перетаскивание, смахивание, бросок или любые другие жесты.

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

CoordinatorLayout - это очень крутая функция Material Design, которая помогает создавать привлекательные и гармоничные макеты.

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout        
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity">

 <android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">



        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_scolling" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email" />

 </android.support.design.widget.CoordinatorLayout>

и content_scrolling:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView     
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.byte64.coordinatorlayoutexample.ScollingActivity"
 tools:showIn="@layout/activity_scolling">

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_margin"
    android:text="@string/large_text" />

 </android.support.v4.widget.NestedScrollView>

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

Открыто:

введите описание изображения здесь

Закрыто:

введите описание изображения здесь


2
Разве относительный макет или макет ограничения не будет иметь взаимосвязи между представлениями? Если один перемещается вверх, связанный вид перемещается вверх. Почему координатор лучше?
Snake

1
@Snake 1. CoordinatorLayout помогает организовать представление поверх другого представления, чего не могут сделать ни ConstraintLayout, ни RelativeLayout. 2. Также помогает анимировать переход взглядов. Хорошим примером является переход активности / фрагмента «Просмотр контакта» в приложении Whatsapp.
Феликс Фавор Чинемерем

13

Еще одно замечание. Поскольку ОП специально спросил

Кроме того, многие классы библиотеки поддержки дизайна, такие как FloatingActionButton, SnackBar, AppBarLayout и т. Д., Ведут себя по-разному при использовании внутри CoordinatorLayout.

Думаю, это из-за этого.

CoordinatorLayout - это сверхмощный FrameLayout.

FAB Button, SnackBar работает по концепции FrameLayout, и, поскольку сам CoordinatorLayout имеет функциональность FrameLayout, он может заставить другие представления вести себя иначе!


9

CoordinatorLayout - это, по сути, макет фрейма с множеством возможностей, что очевидно из названия, он автоматизирует координацию между своими дочерними элементами и помогает создавать красивые виды. Его реализацию можно увидеть в приложении Google Play Store, как панель инструментов сворачивается и меняет цвет.

Лучшее в CoordinatorLayout - это поведение, которое мы даем его прямым или косвенным потомкам. Вы, должно быть, видели, как при прокрутке весь пользовательский интерфейс приходит в движение. Скорее всего, такое поведение творит чудеса.


7

Чтобы сделать быстрый снимок того, что полезно в документации Android :

Используйте CoordinatorLayout, чтобы просто контролировать реляционное поведение ваших представлений,

Например, если вы хотите, чтобы панель инструментов сворачивалась или скрывалась. Google упростил эту задачу, представив AppBarLayout и CollapsingToolbarLayout, которые лучше всего работают в CoordinatorLayout.

Другая наиболее часто используемая ситуация - это когда вы хотите, чтобы FloatingActionButton прилипал к нижней части CollapsingToolbar и перемещался вместе с ним, помещая их под координаторLayout и используя app:layout_anchor="@id/YourAppBarId"для клея (!), И app:layout_anchorGravity="bottom|end"позиции будет достаточно, чтобы вы могли видеть волшебная работа!

Используя этот макет в качестве контекста, дочерние представления будут лучше взаимодействовать и вести себя разумно, потому что они будут знать друг о друге через контекст CoordinatorLayout, это означает, что ваши кнопки FloatingAction больше не будут перекрываться SnackBar и т. Д.

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

см. шаблон активности просмотра Google Scrolling


1

Важно отметить, что CoordinatorLayout не имеет врожденного понимания работы FloatingActionButton или AppBarLayout - он просто предоставляет дополнительный API в виде Coordinator.Behavior, который позволяет дочерним представлениям лучше контролировать события касания и жесты. а также объявлять зависимости друг от друга и получать обратные вызовы через onDependentViewChanged ().

Представления могут объявлять поведение по умолчанию с помощью аннотации CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) или устанавливать его в файлах макета с помощью атрибута app: layout_behavior = "com.example.app.YourView $ Behavior". Эта структура позволяет любому представлению интегрироваться с CoordinatorLayout.

Доступен сейчас! Библиотека дизайна уже доступна, поэтому обязательно обновите репозиторий поддержки Android в SDK Manager. Затем вы можете начать использовать библиотеку дизайна с одной новой зависимостью:

compile 'com.android.support:design:22.2.0' Обратите внимание, что поскольку библиотека дизайна зависит от библиотек поддержки Support v4 и AppCompat, они будут включены автоматически, когда вы добавите зависимость библиотеки дизайна. Мы также позаботились о том, чтобы эти новые виджеты можно было использовать в представлении «Дизайн» редактора макетов Android Studio (их можно найти в CustomView), что дает вам более простой способ предварительного просмотра некоторых из этих новых компонентов.

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


0

Это CoordinatorLayoutсверхмощный FrameLayout.

По умолчанию, если вы добавите в a несколько дочерних элементов FrameLayout, они будут перекрывать друг друга. FrameLayoutЧаще всего следует использовать A для хранения одного дочернего представления. Основная привлекательность - CoordinatorLayoutэто его способность координировать анимацию и переходы представлений внутри него. Используя только XML, вы можете описать макет, в котором FAB перемещается с пути входящей панели Snackbar, например, или иметь FAB (или любой другой View), который, по-видимому, прикреплен к другому виджету и перемещается по экрану с помощью виджет.

Вот основной исходный учебник .

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.