Apa itu CoordinatorLayout?


96

Baru saja melihat aplikasi demo pustaka desain dukungan Android baru. Ini disediakan oleh Chris Banes di github . Melalui aplikasi, CoordinatorLayoutdigunakan Heavily. Juga, banyak dari dukungan desain kelas perpustakaan seperti FloatingActionButton, SnackBar, AppBarLayoutdll berperilaku berbeda ketika di dalam bekas CoordinatorLayout.

Adakah yang bisa memberi penjelasan tentang apa itu CoordinatorLayoutdan apa perbedaannya dari yang lain ViewGroupdi android, atau setidaknya memberikan jalur yang benar menuju pembelajaran CoordinatorLayout.


5
android-developers.blogspot.com/2015/05/… Ini juga memiliki deskripsi yang luas, meskipun membingungkan, di JavaDocs (saat ini tidak tersedia dalam bentuk tautan langsung, tetapi Anda dapat mengunduh ZIP dari developer.android.com/preview /download.html ).
CommonsWare

1
Apa sebenarnya keuntungan menggunakan CordinatorLayout?. Keunggulan apa yang dimilikinya atas orang lain?
eRaisedToX

Jawaban:


44

Ini dia yang Anda cari.

dari dokumen

yang diperkenalkan oleh pustaka Desain CoordinatorLayout, sebuah tata letak yang memberikan tingkat kontrol tambahan atas kejadian sentuh di antara tampilan anak, sesuatu yang dimanfaatkan oleh banyak komponen di pustaka Desain.

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

di tautan ini Anda akan melihat video demo dari semua tampilan yang disebutkan di atas.

semoga ini membantu :)


4
link rusak.
Yogesh Seralia

40

Apa itu CoordinatorLayout? Jangan biarkan nama mewah membodohi Anda, itu tidak lebih dari FrameLayout pada steroid

Untuk lebih memahami apa CoordinatorLayoutitu / dilakukan, pertama-tama Anda harus memahami / mengingat apa artinya Koordinasi.

Jika Anda Google kata

Koordinat

Ini yang kau dapat:

masukkan deskripsi gambar di sini

Menurut saya, definisi ini membantu menjelaskan apa yang dilakukan CoordinatorLayout sendiri dan bagaimana tampilan di dalamnya berperilaku.

KoordinatorLayout (ViewGroup) membawa elemen berbeda (Tampilan anak) dari (̶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̶iz̶a̶t̶i̶oniza̶t̶i̶o relationshipni at̶i̶ ke hubungan yang harmonis

Dengan bantuan CoordinatorLayout, tampilan anak bekerja bersama secara harmonis untuk menerapkan perilaku mengagumkan seperti

seret, gesek, lempar, atau isyarat lainnya.

Tampilan di dalam CoordinatorLayout bernegosiasi dengan orang lain untuk bekerja sama secara efektif dengan menetapkan Perilaku ini

CoordinatorLayout adalah fitur Desain Material yang sangat keren yang membantu menciptakan tata letak yang menarik dan selaras.

Yang harus Anda lakukan adalah menggabungkan tampilan anak Anda di dalam 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>

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

Ini memberi kita tata letak yang dapat digulir untuk menciutkan Toolbar dan menyembunyikan FloatingActionButton

Buka:

masukkan deskripsi gambar di sini

Tutup:

masukkan deskripsi gambar di sini


2
Bukankah tata letak relatif atau batasan juga memiliki hubungan antar tampilan? Jika salah satu bergerak ke atas maka tampilan terkait akan naik. Mengapa koordinator lebih baik?
Ular

1
@Snake 1. CoordinatorLayout membantu dalam mengatur tampilan di atas tampilan lain, sesuatu yang tidak dapat dilakukan oleh ConstraintLayout atau RelativeLayout. 2. Ini juga membantu untuk menghidupkan transisi tampilan. Contoh yang bagus adalah transisi dari aktivitas / fragmen "Lihat Kontak" di aplikasi Whatsapp.
Felix Favor Chinemerem

13

Hal tambahan yang perlu diperhatikan. Sejak OP ditanya secara khusus

Selain itu, banyak kelas libabry desain dukungan seperti FloatingActionButton, SnackBar, AppBarLayout, dll. Berperilaku berbeda saat digunakan di dalam CoordinatorLayout.

Dan saya rasa itu karena ini.

CoordinatorLayout adalah FrameLayout bertenaga super.

Tombol FAB, SnackBar bekerja pada konsep FrameLayout, dan karena CoordinatorLayout sendiri memiliki fungsionalitas FrameLayout, ini mungkin membuat tampilan lain berperilaku berbeda !.


9

CoordinatorLayout pada dasarnya adalah tata letak bingkai dengan banyak kemampuan yang jelas dari namanya, ini mengotomatiskan koordinasi di antara anak-anaknya dan membantu membangun pemandangan yang indah. Implementasinya dapat dilihat di Google Play Store App. Bagaimana toolbar runtuh dan berubah warna.

Hal terbaik tentang CoordinatorLayout adalah perilaku yang kita berikan kepada turunan langsung atau tidak langsungnya. Anda pasti telah melihat saat menggulir semua UI menjadi bergerak. Sangat mungkin perilaku itu berhasil.


7

Untuk memberikan gambaran singkat tentang apa yang berguna dalam Dokumentasi Android :

Gunakan CoordinatorLayout untuk mengontrol perilaku relasional tampilan Anda,

Misalnya jika Anda ingin ToolBar Anda runtuh atau sembunyikan. Google membuatnya sangat mudah dengan memperkenalkan AppBarLayout & CollapsingToolbarLayout, yang keduanya bekerja paling baik di bawah CoordinatorLayout.

Situasi lain yang paling sering digunakan adalah ketika Anda ingin FloatingActionButton menempel di bagian bawah CollapsingToolbar Anda dan bergerak dengannya, meletakkannya di bawah coordinatorLayout dan digunakan app:layout_anchor="@id/YourAppBarId"untuk lem (!) Dan app:layout_anchorGravity="bottom|end"sebagai posisi akan cukup bagi Anda untuk melihat pekerjaan ajaib!

Dengan menggunakan tata letak ini sebagai konteks, tampilan anak akan memiliki kolaborasi yang lebih baik dan berperilaku dengan cara yang cerdas karena mereka akan saling mengenal melalui konteks CoordinatorLayout, ini berarti Tombol FloatingAction Anda tidak akan lagi tumpang tindih dengan snackBar dll.

ini hanyalah ringkasan singkat dari bagian yang paling berguna, jadi jika Anda ingin menghemat lebih banyak waktu dalam menganimasikan aplikasi Anda, akan sangat bermanfaat jika Anda mempelajari subjeknya lebih dalam.

lihat template aktivitas tampilan Google Scrolling


1

Satu hal yang penting untuk diperhatikan adalah bahwa CoordinatorLayout tidak memiliki pemahaman bawaan tentang pekerjaan FloatingActionButton atau AppBarLayout - ini hanya menyediakan API tambahan dalam bentuk Coordinator.Behavior, yang memungkinkan tampilan anak untuk mengontrol peristiwa dan isyarat sentuh dengan lebih baik serta mendeklarasikan dependensi antara satu sama lain dan menerima callback melalui onDependentViewChanged ().

Tampilan dapat mendeklarasikan Behavior default dengan menggunakan anotasi CoordinatorLayout.DefaultBehavior (YourView.Behavior.class), atau menyetelnya dalam file layout Anda dengan atribut app: layout_behavior = "com.example.app.YourView $ Behavior". Kerangka kerja ini memungkinkan tampilan apa pun untuk berintegrasi dengan CoordinatorLayout.

Tersedia sekarang! Library Design sudah tersedia sekarang, jadi pastikan untuk mengupdate Android Support Repository di SDK Manager. Anda kemudian bisa mulai menggunakan pustaka Desain dengan satu dependensi baru:

compile 'com.android.support:design:22.2.0' Perhatikan bahwa karena pustaka Desain bergantung pada Dukungan v4 dan Pustaka Dukungan AppCompat, itu akan disertakan secara otomatis saat Anda menambahkan ketergantungan pustaka Desain. Kami juga berhati-hati agar widget baru ini dapat digunakan dalam tampilan Desain Editor Tata Letak Android Studio (temukan di CustomView), memberi Anda cara yang lebih mudah untuk melihat pratinjau beberapa komponen baru ini.

Pustaka Desain, AppCompat, dan semua Pustaka Dukungan Android adalah alat penting dalam menyediakan blok penyusun yang diperlukan untuk membuat aplikasi Android yang modern dan tampak hebat tanpa membangun semuanya dari awal.


0

Ini CoordinatorLayoutadalah super bertenaga FrameLayout.

Secara default, jika Anda menambahkan beberapa anak ke sebuah FrameLayout, mereka akan tumpang tindih satu sama lain. A FrameLayoutharus digunakan paling sering untuk menampung satu tampilan anak. Daya tarik utama dari aplikasi CoordinatorLayoutini adalah kemampuannya untuk mengoordinasikan animasi dan transisi tampilan di dalamnya. Hanya dengan menggunakan XML, Anda dapat mendeskripsikan tata letak di mana FAB keluar dari Snackbar yang masuk, misalnya, atau memiliki FAB (atau Tampilan lain sebenarnya) yang tampaknya terpasang ke widget lain dan bergerak di layar dengan widget.

Berikut adalah tutorial sumber utama .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.