Що таке CoordinatorLayout?


96

Щойно подивився демонстраційний додаток нової бібліотеки дизайну підтримки Android. Надано Крісом Бейнсом на github . Через додаток CoordinatorLayoutвикористовується сильно. Крім того , багато хто з дизайну підтримки бібліотеки класів , таких як FloatingActionButton, SnackBar, і AppBarLayoutт.д. поводиться по- різному , коли використовується всередині CoordinatorLayout.

Чи може хтось пролити світло на те, що є CoordinatorLayoutі чим воно відрізняється від інших ViewGroups в android, або принаймні надати правильний шлях до навчання CoordinatorLayout.


5
android-developers.blogspot.com/2015/05/... У ньому також є розширений, хоч і заплутаний опис у JavaDocs (на даний момент не доступний у формі прямої зв’язки, але ви можете завантажити ZIP з сайту developer.android.com/preview /download.html ).
CommonsWare

1
У чому насправді перевага використання CordinatorLayout? Який край він має над іншими?
eRaisedToX

Відповіді:


43

Ось це ви шукаєте.

з документів

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

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

за цим посиланням ви побачите демонстраційні відеозаписи всіх вищезазначених переглядів.

сподіваюся, це допоможе :)


3
посилання порушено.
Йогеш Сералія,

40

Що таке CoordinatorLayout? Не дозволяйте химерному імені обдурити вас, це не що інше, як FrameLayout на стероїдах

Щоб найкраще зрозуміти, що CoordinatorLayoutтаке / робить, ти повинен перш за все зрозуміти / мати на увазі, що означає координувати.

Якщо ти погуглиш слово

Координат

Ось що ви отримуєте:

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

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

CoordinatorLayout (а ViewGroup) приносить різні елементи (дочірні уявлення) а (комплексна робота або організації) · розташування в гармонійні і ефективні відносини:

За допомогою 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>

та прокрутка вмісту:

<?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
Чи не мав відносний або обмежувальний макет також зв'язок між поданнями? Чому координатор краще?
Змія

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

13

Додатковий момент, на який слід звернути увагу. Оскільки ОП спеціально запитував

Крім того, багато класів libabry для підтримки, такі як FloatingActionButton, SnackBar, AppBarLayout тощо, поводяться по-різному при використанні всередині CoordinatorLayout.

І, мабуть, саме через це.

CoordinatorLayout - це надпотужний FrameLayout.

Кнопка FAB, SnackBar працює над концепцією FrameLayout, і оскільки сам CoordinatorLayout має функціонал FrameLayout, це може змусити інші погляди поводитися інакше !.


9

CoordinatorLayout - це, по суті, макет кадру з безліччю можливостей, що очевидно з назви, він автоматизує координацію між своїми дітьми та допомагає будувати прекрасні види. Його реалізацію можна побачити в додатку Google Play Store. Як панель інструментів згортається та змінює кольори.

Найкраще в CoordinatorLayout - це поведінка, яку ми надаємо його прямим або непрямим нащадкам. Ви, мабуть, бачили під час прокрутки весь інтерфейс, який рухається. Дуже ймовірно, що поведінка працює своєю магією.


7

Щоб швидко зробити короткий огляд того, що корисно в документації для Android :

Використовуйте CoordinatorLayout, щоб просто контролювати реляційну поведінку ваших поглядів,

Наприклад, якщо ви хочете, щоб панель інструментів згорнулася або сховалася. Google зробив це дуже легко, представивши AppBarLayout & CollapsingToolbarLayout, які обидва найкраще працюють за допомогою CoordinatorLayout.

Інша найбільш часто використовувана ситуація - це коли ви хочете, щоб кнопка FloatingAction прилипала до нижньої частини панелі інструментів CollapsingTool і рухалася разом з нею, ставлячи їх під координатор 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 $ Behaviour". Цей фреймворк дозволяє будь-якому погляду інтегруватися з CoordinatorLayout.

Наявний зараз! Бібліотека дизайну доступна зараз, тому обов’язково оновіть сховище підтримки Android у Менеджері SDK. Потім ви можете почати використовувати бібліотеку дизайну з однією новою залежністю:

compile 'com.android.support:design:22.2.0' Зверніть увагу: оскільки бібліотека Design залежить від бібліотек підтримки Support v4 та AppCompat, вони будуть включені автоматично при додаванні залежності бібліотеки Design. Ми також подбали про те, щоб ці нові віджети можна було використовувати в поданні дизайну редактора макета Android Studio (знайти їх у CustomView), надаючи вам простіший спосіб попереднього перегляду деяких з цих нових компонентів.

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


0

Це CoordinatorLayoutсупер-потужний FrameLayout.

За замовчуванням, якщо ви додасте кілька дочірніх елементів до FrameLayout, вони будуть перекривати одне одного. А FrameLayoutслід використовувати найчастіше для догляду за єдиною дитиною. Основною привабливістю CoordinatorLayoutє його здатність координувати анімацію та переходи поглядів всередині неї. Використовуючи лише XML, ви можете описати макет, де FAB зміщується зі шляху вхідної Snackbar, наприклад, або має FAB (або будь-який інший вигляд насправді), який, мабуть, приєднаний до іншого віджету і рухається на екрані за допомогою віджет.

Ось основне джерело підручника .

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.