CoordinatorLayout nedir?


96

Yeni Android destek tasarım kitaplığının demo uygulamasına bir göz attım. Github'da Chris Banes tarafından sağlanmaktadır . Uygulama dikkate alındığında, CoordinatorLayoutyoğun bir şekilde kullanılmaktadır. Aynı zamanda, örneğin, destek tasarım kütüphanesi sınıflarının birçok FloatingActionButton, SnackBar, AppBarLayoutvb davranır farklı zaman kullanılan iç CoordinatorLayout.

Birisi lütfen android'de neyin CoordinatorLayoutve diğerlerinden nasıl farklı olduğu konusunda biraz ışık tutabilir mi ViewGroupveya en azından öğrenmeye doğru doğru yolu sağlayabilir mi CoordinatorLayout?


5
android-developers.blogspot.com/2015/05/… Ayrıca JavaDocs'ta kapsamlı, kafa karıştırıcı da olsa bir açıklaması vardır (şu anda doğrudan bağlanabilir biçimde mevcut değildir, ancak developer.android.com/preview adresinden bir ZIP indirebilirsiniz. /download.html ).
CommonsWare

1
Aslında kullanmanın avantajı nedir CordinatorLayout? Diğerlerine göre ne avantajı var?
eRaisedToX

Yanıtlar:


44

İşte arıyorsun.

belgelerden

Tasarım kitaplığı, Tasarım kitaplığındaki CoordinatorLayoutbirçok bileşenin yararlandığı, alt görünümler arasındaki dokunma olayları üzerinde ek bir kontrol düzeyi sağlayan bir düzen sunar.

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

bu bağlantıda yukarıda belirtilen tüm görüntülemelerin demo videolarını göreceksiniz.

Bu yardımcı olur umarım :)


4
bağlantı bozuk.
Yogesh Seralia

40

Koordinatör Düzeni nedir? Süslü ismin sizi aldatmasına izin vermeyin, bu steroidler üzerinde bir FrameLayout'tan başka bir şey değil

A'nın ne CoordinatorLayoutolduğunu / yaptığını en iyi şekilde anlamak için, öncelikle Koordinasyon için ne anlama geldiğini anlamalı / akılda tutmalısınız.

Google kelimesini ararsanız

Koordinat

Bu ne olsun:

görüntü açıklamasını buraya girin

Bence bu tanımlar, bir Koordinatör Düzeni'nin kendi başına ne yaptığını ve içindeki görüşlerin nasıl davrandığını açıklamaya yardımcı olur.

Bir Koordinatör Düzeni (bir Görünüm Grubu), bir (aa̶ ̶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̶a̶t̶i) düzeninin farklı öğelerini (alt Görünümler) getirir:

Bir Koordinatör Düzeni yardımıyla, çocuk görüşleri, aşağıdaki gibi harika davranışları uygulamak için birlikte uyumlu bir şekilde çalışır.

sürükler, hızlıca kaydırır, sallar veya diğer hareketler.

Bir Koordinatör içindeki görüşler Yerleşim, bu Davranışları belirleyerek birlikte etkili bir şekilde çalışmak için başkalarıyla müzakere eder.

CoordinatorLayout, çekici ve uyumlu düzenler oluşturmaya yardımcı olan Materyal Tasarımın süper harika bir özelliğidir.

Yapmanız gereken tek şey, çocuğunuzun görüşlerini Koordinatör Düzeni içine almaktır.

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

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

Bunun bize verdiği şey, Araç Çubuğunu daraltmak ve FloatingActionButton öğesini gizlemek için kaydırılabilen bir düzendir.

Açık:

görüntü açıklamasını buraya girin

Kapalı:

görüntü açıklamasını buraya girin


2
Göreli veya kısıtlayıcı düzenin de görünümler arasında bir ilişkisi olmaz mıydı? Biri yukarı hareket ederse ilgili görünüm yukarı hareket eder. Koordinatör neden daha iyi?
Snake

1
@Snake 1. CoordinatorLayout, ne ConstraintLayout ne de RelativeLayout'un yapamayacağı bir şey olan başka bir görünüm üzerinde bir görünüm düzenlemeye yardımcı olur. 2. Görünümlerin geçişini canlandırmaya da yardımcı olur. İyi bir örnek, Whatsapp uygulamasındaki "Kişiyi Görüntüle" etkinliğinin / parçasının geçişidir.
Felix Favor Chinemerem

13

Dikkat edilmesi gereken ek bir nokta. OP özellikle sorduğundan beri

Ayrıca, FloatingActionButton, SnackBar, AppBarLayout vb. Gibi destek tasarımı libabry sınıflarının çoğu, CoordinatorLayout içinde kullanıldığında farklı davranır.

Ve sanırım bu yüzden.

CoordinatorLayout süper güçlü bir FrameLayout'tur.

FAB Button, SnackBar FrameLayout kavramı üzerinde çalışır ve CoordinatorLayout'un kendisi FrameLayout işlevselliğine sahip olduğundan, diğer görünümlerin farklı davranmasını sağlayabilir !.


9

CoordinatorLayout , esasen adından da anlaşılacağı üzere birçok yeteneğe sahip çerçeve düzenidir, çocukları arasındaki koordinasyonu otomatikleştirir ve güzel görüntüler oluşturmaya yardımcı olur. Uygulaması Google Play Store Uygulamasında görülebilir.Araç çubuğunun nasıl daraldığı ve renk değiştirdiği.

CoordinatorLayout ile ilgili en iyi şey , onun doğrudan veya dolaylı soyundan gelenlere verdiğimiz davranıştır. Tüm kullanıcı arayüzünün hareket ettiğini kaydırırken görmüş olmalısınız. Davranış büyük ihtimalle sihrini çalıştırıyor.


7

Android Belgelerinde nelerin yararlı olduğuna dair hızlı bir anlık görüntü vermek için :

Görünümlerinizin ilişkisel davranışını basitçe kontrol etmek için CoordinatorLayout'u kullanın,

Örneğin, Araç Çubuğunuzun daralmasını veya gizlenmesini istiyorsanız. Google, her ikisi de bir CoordinatorLayout altında en iyi şekilde çalışan AppBarLayout ve CollapsingToolbarLayout'u sunarak bunu gerçekten kolaylaştırdı.

Diğer en çok kullanılan durum, FloatingActionButton'un CollapsingToolbar'ınızın altına yapışmasını ve onunla birlikte hareket etmesini istediğiniz zamandır, onları bir koordinatör Düzeni altına yerleştirip app:layout_anchor="@id/YourAppBarId"yapıştırıcı için kullanın (!) Ve app:layout_anchorGravity="bottom|end"konum olarak görmeniz için yeterli olacaktır. sihirli iş!

Bu düzeni bir bağlam olarak kullanarak, alt görünümler daha iyi bir işbirliğine sahip olacak ve CoordinatorLayout bağlamı aracılığıyla birbirlerinden haberdar olacakları için akıllıca davranacaklar, bu da FloatingAction Düğmelerinizin artık bir snackBar vb. İle çakışmayacağı anlamına gelir.

bunlar, en yararlı parçaların yalnızca kısa bir özetiydi, bu nedenle, uygulamanızı canlandırırken daha fazla zaman kazanmak istiyorsanız, konuya biraz daha derinlemesine dalmaya değer.

bkz tarihinde Kaydırma görünüm etkinlik şablonunu


1

Unutulmaması gereken önemli bir nokta, CoordinatorLayout'un FloatingActionButton veya AppBarLayout çalışması hakkında doğuştan gelen bir anlayışa sahip olmamasıdır - yalnızca Coordinator şeklinde ek bir API sağlar. yanı sıra birbirleri arasındaki bağımlılıkları bildirmek ve onDependentViewChanged () aracılığıyla geri aramaları almak.

Görünümler, CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) ek açıklamasını kullanarak varsayılan bir Davranış bildirebilir veya bunu uygulama: layout_behavior = "com.example.app.YourView $ Davranış" özniteliğiyle düzen dosyalarınızda ayarlayabilir. Bu çerçeve, herhangi bir görünümün CoordinatorLayout ile entegre olmasını mümkün kılar.

Şu an müsait! Tasarım kitaplığı şu anda mevcuttur, bu nedenle SDK Yöneticisi'nde Android Destek Deposunu güncellediğinizden emin olun. Ardından, Tasarım kitaplığını tek bir yeni bağımlılıkla kullanmaya başlayabilirsiniz:

derleyin 'com.android.support:design:22.2.0' Tasarım kitaplığı Destek v4 ve AppCompat Destek Kitaplıklarına bağlı olduğundan, Tasarım kitaplığı bağımlılığını eklediğinizde bunların otomatik olarak dahil edileceğini unutmayın. Ayrıca, bu yeni widget'ların Android Studio Layout Editor'ün Tasarım görünümünde (bunları CustomView altında bulun) kullanılabilir olmasını sağladık ve bu yeni bileşenlerden bazılarını önizlemek için size daha kolay bir yol sağladık.

Tasarım kitaplığı, AppCompat ve tüm Android Destek Kitaplığı, her şeyi sıfırdan oluşturmadan modern, harika görünümlü bir Android uygulaması oluşturmak için gereken yapı taşlarını sağlamada önemli araçlardır.


0

CoordinatorLayoutBir süper güçlü olduğunu FrameLayout.

Varsayılan olarak, a'ya birden çok alt öğe eklerseniz FrameLayout, bunlar birbiriyle örtüşür. A FrameLayout, en sık olarak tek bir çocuk görüşünü tutmak için kullanılmalıdır. Ana cazibesi, içindeki görünümlerin animasyonlarını ve geçişleriniCoordinatorLayout koordine etme yeteneğidir . Yalnızca XML kullanarak, bir FAB'nin gelen bir Snackbar'ın yolundan çıktığı bir düzeni tanımlayabilirsiniz, örneğin, bir FAB'ye (veya başka bir Görünüme) sahip olduğu ve görünüşte başka bir widget'a eklenmiş ve ekranda Araç.

İşte ana kaynak öğreticisi .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.