Co to jest CoordinatorLayout?

96

Właśnie rzuciłem okiem na aplikację demonstracyjną nowej biblioteki projektów obsługi Androida. Udostępnia je Chris Banes na github . Przez aplikację CoordinatorLayoutjest intensywnie używany. Ponadto, wiele z tych zajęć projektowych wsparcie bibliotek takich jak FloatingActionButton, SnackBar, AppBarLayoutitp zachowuje się inaczej, gdy używany wewnątrz CoordinatorLayout.

Czy ktoś może rzucić trochę światła na to, co jest CoordinatorLayouti czym różni się od innych ViewGroupw Androidzie, lub przynajmniej zapewnić właściwą ścieżkę do nauki CoordinatorLayout.

jimmy0251
źródło
5
android-developers.blogspot.com/2015/05/… Ma również obszerny, choć mylący, opis w JavaDocs (obecnie niedostępny w formie bezpośredniego połączenia, ale możesz pobrać ZIP z developer.android.com/preview /download.html ).
CommonsWare
1
Jaka jest właściwie zaleta używania CordinatorLayout? Jaką przewagę ma nad innymi?
eRaisedToX

Odpowiedzi:

44

Oto, czego szukasz.

z dokumentów

Biblioteka projektu wprowadza CoordinatorLayoutukład, który zapewnia dodatkowy poziom kontroli nad zdarzeniami dotyku między widokami podrzędnymi, z czego korzysta wiele komponentów w bibliotece projektu.

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

w tym linku zobaczysz filmy demonstracyjne wszystkich wyżej wymienionych widoków.

mam nadzieję że to pomoże :)

Qadir Hussain
źródło
4
link jest uszkodzony.
Yogesh Seralia
40

Co to jest CoordinatorLayout? Nie daj się zwieść tej wymyślnej nazwie, to nic innego jak FrameLayout na sterydach

Aby najlepiej zrozumieć, co CoordinatorLayoutjest / robi, musisz przede wszystkim zrozumieć / mieć na uwadze, co to znaczy koordynować.

Jeśli wygooglujesz słowo

Koordynować

Oto, co otrzymujesz:

wprowadź opis obrazu tutaj

Myślę, że te definicje pomagają opisać, co robi CoordinatorLayout samodzielnie i jak zachowują się w nim widoki.

A CoordinatorLayout (a ViewGroup) przenosi różne elementy (widoki potomne) (̶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̶̶̶ ̶t)

Z pomocą CoordinatorLayout poglądy podrzędne współpracują ze sobą harmonijnie, aby wdrożyć niesamowite zachowania, takie jak

przeciąga, macha, rzuca lub inne gesty.

Widoki wewnątrz CoordinatorLayout negocjują z innymi, aby skutecznie współpracować, określając te zachowania

CoordinatorLayout to super fajna funkcja Material Design, która pomaga tworzyć atrakcyjne i zharmonizowane układy.

Wszystko, co musisz zrobić, to umieścić swoje widoki podrzędne wewnątrz 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>

i 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>

To daje nam układ, który można przewijać, aby zwinąć pasek narzędzi i ukryć FloatingActionButton

Otwarty:

wprowadź opis obrazu tutaj

Zamknięte:

wprowadź opis obrazu tutaj

Ojonugwa Jude Ochalifu
źródło
2
Czy układ względny lub z ograniczeniami nie miałby również związku między widokami? Jeśli jeden przesunie się w górę, powiązany widok przesunie się w górę. Dlaczego koordynator jest lepszy?
Snake
1
@Snake 1. CoordinatorLayout pomaga w zorganizowaniu widoku na inny widok, czego nie mogą zrobić ani ConstraintLayout, ani RelativeLayout. 2. Pomaga również w animowaniu przejścia widoków. Dobrym przykładem jest przejście aktywności / fragmentu „Wyświetl kontakt” w aplikacji Whatsapp.
Felix Favor Chinemerem
13

Dodatkowa uwaga. Ponieważ OP specjalnie zapytał

Ponadto wiele klas libabry projektowania wsparcia, takich jak FloatingActionButton, SnackBar, AppBarLayout itp., Zachowuje się inaczej, gdy są używane wewnątrz CoordinatorLayout.

I myślę, że to z tego powodu.

CoordinatorLayout to bardzo wydajny FrameLayout.

Przycisk FAB, SnackBar działa zgodnie z koncepcją FrameLayout, a ponieważ sam CoordinatorLayout ma funkcjonalność FrameLayout, może sprawić, że inne widoki będą się zachowywać inaczej!

capt.swag
źródło
9

CoordinatorLayout to w istocie układ ramek z wieloma możliwościami, co wynika z nazwy, automatyzuje koordynację między swoimi dziećmi i pomaga budować piękne widoki. Jego implementację można zobaczyć w aplikacji Google Play Store, w jaki sposób pasek narzędzi zwija się i zmienia kolory.

Najlepszą rzeczą w CoordinatorLayout jest zachowanie, które dajemy jego bezpośrednim lub pośrednim potomkom. Musiałeś zobaczyć, jak podczas przewijania, cały interfejs użytkownika zostaje uruchomiony. Jest bardzo prawdopodobne, że to zachowanie działa magicznie.

Uzair
źródło
7

Aby szybko sprawdzić, co jest przydatne w dokumentacji systemu Android :

Użyj CoordinatorLayout, aby po prostu kontrolować relacyjne zachowanie swoich poglądów,

Na przykład, jeśli chcesz, aby pasek narzędzi ToolBar zwinął się lub ukrył. Firma Google bardzo to ułatwiła, wprowadzając AppBarLayout i CollapsingToolbarLayout, które najlepiej działają w układzie CoordinatorLayout.

Inną najczęściej używaną sytuacją jest sytuacja, w której chcesz, aby FloatingActionButton przykleił się do dolnej części paska narzędzi CollapsingToolbar i poruszał się z nim, umieszczając je pod koordynatorem Layout i używaj app:layout_anchor="@id/YourAppBarId"do kleju (!) I app:layout_anchorGravity="bottom|end"jako położenie wystarczy, abyś zobaczył magiczna praca!

Używając tego układu jako kontekstu, widoki podrzędne będą lepiej współpracować i będą zachowywać się w inteligentny sposób, ponieważ będą się wzajemnie świadomi za pośrednictwem kontekstu CoordinatorLayout, co oznacza, że ​​przyciski FloatingAction Buttons nie będą już nakładać się na snackBar itp.

to tylko krótkie podsumowanie najbardziej przydatnych części, więc jeśli chcesz zaoszczędzić więcej czasu na animowaniu aplikacji, warto zagłębić się w ten temat.

zobacz szablon aktywności widoku przewijania Google

AmiNadimi
źródło
1

Ważne jest, aby pamiętać, że CoordinatorLayout nie ma wrodzonego zrozumienia pracy FloatingActionButton lub AppBarLayout - zapewnia tylko dodatkowe API w postaci Coordinator.Behavior, które pozwala widokom podrzędnym na lepszą kontrolę zdarzeń dotykowych i gestów a także deklarować zależności między sobą i odbierać wywołania zwrotne za pośrednictwem onDependentViewChanged ().

Widoki mogą deklarować zachowanie domyślne za pomocą adnotacji CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) lub ustawić je w plikach układu za pomocą atrybutu app: layout_behavior = "com.example.app.YourView $ Behavior". Ta struktura umożliwia integrację dowolnego widoku z CoordinatorLayout.

Już dostępny! Biblioteka projektu jest już dostępna, więc upewnij się, że zaktualizujesz repozytorium pomocy technicznej systemu Android w Menedżerze SDK. Następnie możesz rozpocząć korzystanie z biblioteki projektu z jedną nową zależnością:

compile „com.android.support:design:22.2.0” Należy pamiętać, że ponieważ biblioteka projektów zależy od bibliotek Support v4 i AppCompat Support, zostaną one dołączone automatycznie po dodaniu zależności biblioteki projektu. Zadbaliśmy również o to, aby te nowe widżety były użyteczne w widoku Projekt edytora układu Android Studio (można je znaleźć w CustomView), co daje łatwiejszy sposób podglądu niektórych z tych nowych komponentów.

Biblioteka projektów, AppCompat i cała biblioteka obsługi systemu Android to ważne narzędzia zapewniające elementy konstrukcyjne potrzebne do zbudowania nowoczesnej, świetnie wyglądającej aplikacji na Androida bez budowania wszystkiego od zera.

Qaim Raza
źródło
0

CoordinatorLayoutJest super-zasilany FrameLayout.

Domyślnie, jeśli dodasz wiele elementów podrzędnych do elementu FrameLayout, będą się one nakładać. A FrameLayoutpowinien być używany najczęściej do przechowywania widoku pojedynczego dziecka. Główną zaletą programu CoordinatorLayoutjest jego zdolność do koordynowania animacji i przejść widoków w nim. Używając tylko XML, możesz opisać układ, w którym na przykład FAB znika z drogi przychodzącego Snackbaru lub mieć FAB (lub jakikolwiek inny widok), który jest najwyraźniej dołączony do innego widżetu i porusza się na ekranie z widget.

Oto główny samouczek dotyczący źródeł .

Gk Mohammad Emon
źródło