Qu'est-ce que CoordinatorLayout?

Je viens de jeter un œil à l'application de démonstration de la nouvelle bibliothèque de conception de support Android. Il est fourni par Chris Banes sur github . À travers l'application, CoordinatorLayoutest largement utilisé. De plus, beaucoup de la conception de soutien des classes de bibliothèques telles que FloatingActionButton, SnackBar, AppBarLayoutetc. comporte différemment lorsqu'ils sont utilisés à l' intérieur CoordinatorLayout.

Quelqu'un peut-il s'il vous plaît éclairer ce qui est CoordinatorLayout et en quoi il est différent des autres ViewGroups dans Android, ou au moins fournir un chemin correct vers l'apprentissage CoordinatorLayout.

Voici ce que vous recherchez.

à partir de documents

la bibliothèque de conception introduit CoordinatorLayoutune disposition qui fournit un niveau supplémentaire de contrôle sur les événements tactiles entre les vues enfants, ce dont de nombreux composants de la bibliothèque de conception tirent parti.

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

dans ce lien, vous verrez les vidéos de démonstration de toutes les vues mentionnées ci-dessus.

J'espère que cela t'aides :)

Qu'est-ce qu'un CoordinatorLayout? Ne vous laissez pas tromper par le nom sophistiqué, ce n'est rien de plus qu'un FrameLayout sur les stéroïdes

Pour mieux comprendre ce qu'un CoordinatorLayout est / fait, vous devez d'abord comprendre / garder à l'esprit ce que signifie Coordonner.

Si vous recherchez le mot sur Google

Coordonner

C'est ce que vous obtenez:

Je pense que ces définitions aident à décrire ce que fait un CoordinatorLayout seul et comment les vues qu'il contient se comportent.

Un CoordinatorLayout (un ViewGroup) apporte les différents éléments (Child Views) d'une (̶a̶ ̶c̶o̶m̶p̶l̶e̶x̶ ̶a̶c̶t̶i̶v̶i̶t̶y̶ ̶o̶r ̶a̶n̶ ̶o̶r̶g̶a̶̶nizz̶ dans une relation harmonieuse ou harmonieuse

Avec l'aide d'un CoordinatorLayout, les vues enfants fonctionnent ensemble de manière harmonieuse pour implémenter des comportements impressionnants tels que

traîne, glisse, jette ou tout autre geste.

Les vues à l'intérieur d'un CoordinatorLayout négocient avec les autres afin de travailler ensemble efficacement en spécifiant ces comportements

Un CoordinatorLayout est une fonctionnalité super cool de Material Design qui aide à créer des mises en page attrayantes et harmonisées.

Tout ce que vous avez à faire est d'encapsuler vos vues enfants dans le 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>

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

Ce que cela nous donne est une mise en page qui peut être défilée pour réduire la barre d'outils et masquer le FloatingActionButton

Ouvert:

Fermé:

Un point supplémentaire à noter. Depuis OP a spécifiquement demandé

De plus, de nombreuses classes de libabry de conception de support comme FloatingActionButton, SnackBar, AppBarLayout, etc. se comportent différemment lorsqu'elles sont utilisées dans CoordinatorLayout.

Et je suppose que c'est à cause de ça.

CoordinatorLayout est un FrameLayout super puissant.

FAB Button, SnackBar fonctionne sur le concept de FrameLayout, et comme CoordinatorLayout lui-même a la fonctionnalité de FrameLayout, il pourrait faire que d'autres vues se comportent différemment !.

CoordinatorLayout est essentiellement la mise en page du cadre avec de nombreuses fonctionnalités qui ressortent du nom, il automatise la coordination entre ses enfants et aide à créer de belles vues. Sa mise en œuvre peut être vue dans l'application Google Play Store Comment la barre d'outils se réduit et change de couleur.

La meilleure chose à propos de CoordinatorLayout est le comportement que nous donnons à ses descendants directs ou indirects. Vous devez avoir vu en faisant défiler toute l'interface utilisateur se mettre en mouvement. Il est fort probable que le comportement opère sa magie.

Pour donner un aperçu rapide de ce qui est utile dans la documentation Android :

Utilisez CoordinatorLayout pour contrôler simplement le comportement relationnel de vos vues,

Par exemple, si vous souhaitez que votre barre d'outils se réduit ou se masque. Google a rendu la tâche très simple en introduisant AppBarLayout et CollapsingToolbarLayout, qui fonctionnent tous les deux mieux sous un CoordinatorLayout.

L'autre situation la plus utilisée est celle où vous voulez qu'un FloatingActionButton colle au bas de votre CollapsingToolbar et se déplace avec lui, en le plaçant sous un coordinatorLayout et en l'utilisant app:layout_anchor="@id/YourAppBarId"pour la colle (!) Etapp:layout_anchorGravity="bottom|end" comme position vous suffira pour voir le travail magique!

En utilisant cette mise en page comme contexte, les vues enfants auront une meilleure collaboration et se comporteront de manière intelligente car elles seront conscientes les unes des autres via le contexte CoordinatorLayout, cela signifie que vos boutons FloatingAction ne seront plus chevauchés par un snackBar, etc.

il ne s'agissait que d'un bref résumé des parties les plus utiles, donc si vous souhaitez gagner plus de temps dans l'animation de votre application, cela vaudra la peine de plonger un peu plus dans le sujet.

voir le modèle d'activité de la vue Google Scrolling

Il est important de noter que CoordinatorLayout n'a aucune compréhension innée d'un travail FloatingActionButton ou AppBarLayout - il fournit simplement une API supplémentaire sous la forme d'un Coordinator.Behavior, qui permet aux vues enfants de mieux contrôler les événements tactiles et les gestes ainsi que déclarer des dépendances entre eux et recevoir des rappels via onDependentViewChanged ().

Les vues peuvent déclarer un comportement par défaut à l'aide de l'annotation CoordinatorLayout.DefaultBehavior (YourView.Behavior.class) ou le définir dans vos fichiers de mise en page avec l'attribut app: layout_behavior = "com.example.app.YourView $ Behavior". Ce cadre permet à n'importe quelle vue de s'intégrer à CoordinatorLayout.

Disponible dès maintenant! La bibliothèque de conception est maintenant disponible, alors assurez-vous de mettre à jour le référentiel de support Android dans le gestionnaire de SDK. Vous pouvez ensuite commencer à utiliser la bibliothèque de conception avec une seule nouvelle dépendance:

compilez 'com.android.support:design:22.2.0' Notez que comme la bibliothèque de conception dépend des bibliothèques de support v4 et AppCompat, celles-ci seront automatiquement incluses lorsque vous ajouterez la dépendance de bibliothèque de conception. Nous avons également veillé à ce que ces nouveaux widgets soient utilisables dans la vue Conception de l'éditeur de mise en page Android Studio (trouvez-les sous CustomView), ce qui vous permet de prévisualiser plus facilement certains de ces nouveaux composants.

La bibliothèque de conception, AppCompat et toute la bibliothèque de support Android sont des outils importants pour fournir les éléments de base nécessaires pour créer une application Android moderne et élégante sans tout construire à partir de zéro.

Le CoordinatorLayoutest un super-puissant FrameLayout.

Par défaut, si vous ajoutez plusieurs enfants à a FrameLayout, ils se chevaucheraient. A FrameLayoutdoit être utilisé le plus souvent pour contenir une seule vue enfant. Le principal attrait du CoordinatorLayoutest sa capacité à coordonner les animations et les transitions des vues qu'il contient. En utilisant uniquement XML, vous pouvez décrire une mise en page où un FAB se déplace hors de la voie d'un Snackbar entrant, par exemple, ou avoir un FAB (ou toute autre vue vraiment) qui est apparemment attaché à un autre widget et se déplace à l'écran avec le widget.

Voici le tutoriel de la source principale .