web-dev-qa-db-fra.com

Qu'est-ce que CoordinatorLayout?

Je viens de jeter un coup d'œil à l'application de démonstration de la nouvelle bibliothèque de conception de support Android. Il est fourni par Chris Banes sur github . Après l'application, CoordinatorLayout est utilisé fortement. En outre, de nombreuses classes de bibliothèques de conception technique, telles que FloatingActionButton, SnackBar, AppBarLayout etc., se comportent différemment lorsqu'elles sont utilisées dans CoordinatorLayout.

Quelqu'un peut-il s'il vous plaît éclaircir quelque chose sur ce qui est CoordinatorLayout et comment il est différent des autres ViewGroups dans Android, ou au moins fournir le chemin correct vers l'apprentissage CoordinatorLayout.

86
jimmy0251

Voici ce que vous recherchez.

de docs

La bibliothèque de conception introduit CoordinatorLayout, une disposition qui permet de contrôler davantage les événements tactiles entre les vues enfant, ce dont profitent de nombreux composants de la bibliothèque de conception.

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 :)

34
Qadir Hussain

Qu'est-ce qu'un coordinateur de mise en page? Ne laissez pas le nom de fantaisie vous tromper, ce n'est rien de plus qu'un FrameLayout sur les stéroïdes

Pour mieux comprendre ce qu'est une CoordinatorLayout, vous devez tout d'abord comprendre/garder à l'esprit ce que signifie "coordonner".

Si vous Google le mot

Coordonner

C'est ce que vous obtenez:

enter image description here

Je pense que ces définitions permettent de décrire ce que fait tout seul CoordinatorLayout et comment se comportent ses points de vue.

Un coordinateurLayout (un groupe de vues) apporte les différents éléments (vues d'enfants) d'un (a̶ ̶c̶o̶m̶p̶lex a̶c̶t̶ivity

Avec l’aide de CoordinatorLayout, les vues d’enfants travaillent ensemble de manière harmonieuse pour mettre en œuvre des comportements impressionnants tels que

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

Vues à l’intérieur d’un coordinateur Layout négocient avec d’autres personnes afin de travailler ensemble efficacement en précisant ces comportements

Un CoordinatorLayout est une fonctionnalité super cool de Material Design qui permet de créer des présentations attrayantes et harmonisées.

Tout ce que vous avez à faire est d’envelopper les vues de votre enfant dans 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>

Cela nous donne une disposition qui peut être déplacée pour réduire la barre d’outils et masquer le bouton FloatingAction

Ouvert:

enter image description here

Fermé:

enter image description here

31
ojonugwa ochalifu

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

En outre, de nombreuses classes de conception de support, telles que FloatingActionButton, SnackBar, AppBarLayout, etc., se comportent différemment lorsqu'elles sont utilisées dans CoordinatorLayout.

Et je suppose que c'est à cause de cela.

CoordinatorLayout est un FrameLayout super puissant.

FAB Button, SnackBar fonctionne sur le concept de FrameLayout, et puisque CoordinatorLayout possède lui-même les fonctionnalités de FrameLayout, il se peut que d'autres affichages se comportent différemment !.

12
capt.swag

CoordinatorLayout est essentiellement la disposition du cadre avec de nombreuses fonctionnalités qui ressort clairement du nom, elle automatise la coordination entre ses enfants et aide à créer de superbes vues. Son implémentation est visible dans Google Play Store App.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 met en mouvement. Il est fort probable que le comportement opère sa magie.

7
Uzair

Pour donner un aperçu rapide de ce qui est utile dans le Documentation Android :

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

Par exemple, si vous souhaitez que votre barre d'outils soit réduite ou masquée. Google a rendu les choses vraiment faciles en introduisant AppBarLayout & CollapsingToolbarLayout, qui fonctionnent tous les deux mieux avec un CoordinatorLayout.

L'autre situation la plus utilisée est celle où vous voulez qu'un FloatingActionButton colle au bas de votre barre d'outils CollapsingTool et déplacez-le avec lui, en le mettant sous un coordinatorLayout et utilisez app:layout_anchor="@id/YourAppBarId" pour le collage (!) Et app:layout_anchorGravity="bottom|end" comme position sera suffisant pour que vous voyiez le travail magique!

En utilisant cette présentation comme contexte, les vues enfant auront une meilleure collaboration et se comporteront de manière intelligente, car elles se connaîtront mutuellement via le contexte CoordinatorLayout. Cela signifie que vos boutons FloatingAction ne seront plus superposés par une barre de snack, etc.

il s’agit là d’un résumé rapide des éléments les plus utiles. Par conséquent, si vous souhaitez gagner plus de temps dans l’animation de votre application, cela vaut la peine de vous plonger un peu plus dans le sujet.

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

5
AmiNadimi

Une chose importante à noter est que CoordinatorLayout n'a aucune compréhension innée du 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 elles 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 présentation à l'aide de 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 disponible maintenant. Assurez-vous donc de mettre à jour le référentiel de support Android dans le gestionnaire de SDK. Vous pouvez ensuite commencer à utiliser la bibliothèque Design avec une seule nouvelle dépendance:

compiler 'com.Android.support:design:22.2.0' Notez que, comme la bibliothèque de conception dépend des bibliothèques de support Support v4 et AppCompat, celles-ci seront automatiquement incluses lorsque vous ajoutez la dépendance de la bibliothèque de design. Nous nous sommes également assurés que ces nouveaux widgets sont utilisables dans le mode Création Android de Studio Layout Editor (recherchez-les sous CustomView), ce qui vous permet de prévisualiser certains de ces nouveaux composants.

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

0
Qaim Raza