web-dev-qa-db-fra.com

Mise en page ConstraintLayout vs Coordinator?

Que faut-il implémenter: ConstraintLayout ou CoordinatorLayout pour une conception appropriée du matériel dans Android??

androidmaterial-designandroid-constraintlayoutcoordinator-layout
45
Swapnil

Coordinator Coordinator Layout est destiné à être la présentation de niveau supérieur permettant à l’activité de gérer les comportements p. Ex. interactions et animations.

L'objectif principal de ConstraintLayout est de fournir un moyen pratique de créer une mise en page à plat avec plusieurs enfants (RelativeLayout beaucoup plus puissant).

Ainsi, CoordinatorLayout doit gérer le comportement complexe (en particulier les animations) des composants de votre activité, et ConstraintLayout pour le placement correct des composants (en particulier les éléments de liste).

59
Dmitry Sitnikov

CoordinatorLayout

Coordinator Coordinator est un FrameLayout super puissant.

CoordinatorLayout est destiné à deux cas d'utilisation principaux:

  • En tant que décor d’application de niveau supérieur ou chrome layout
  • En tant que conteneur pour une interaction spécifique avec une ou plusieurs vues enfants

Par défaut, si vous ajoutez plusieurs enfants à un FrameLayout, ils se chevaucheront. Un FrameLayout doit être utilisé le plus souvent pour gérer une seule vue enfant. Le principal attrait de CoordinatorLayout est sa capacité à coordonner les animations et les transitions des vues qu’il contient. En spécifiant Behaviors pour les vues enfant d'un CoordinatorLayout, vous pouvez fournir de nombreuses interactions différentes au sein d'un seul parent et ces vues peuvent également interagir les unes avec les autres. Les classes d'affichage peuvent spécifier un comportement par défaut lorsqu'elles sont utilisées en tant qu'enfant d'un CoordinatorLayout à l'aide de l'annotation CoordinatorLayout.DefaultBehavior.

Les comportements peuvent être utilisés pour implémenter une variété d'interactions et de modifications de disposition supplémentaires, allant des tiroirs et panneaux coulissants aux éléments et boutons pouvant être balayés par balayage qui se collent à d'autres éléments lorsqu'ils se déplacent et s'animent.

ConstraintLayout

ConstraintLayout vous permet de créer des présentations larges et complexes avec une hiérarchie de vues à plat (pas de groupes de vues imbriquées). Il ressemble à RelativeLayout en ce sens que toutes les vues sont agencées en fonction des relations entre les vues frères et la présentation parent, mais elles sont plus flexibles que RelativeLayout et plus faciles à utiliser. avec Android Editeur de disposition de Studio.

Il existe actuellement différents types de contraintes que vous pouvez utiliser:

  • Positionnement relatif
  • Marges
  • Positionnement de centrage
  • Positionnement circulaire
  • Comportement de visibilité
  • Contraintes de dimension
  • Chaînes
  • Objets d'aide virtuelle
  • Optimiseur

Que faut-il mettre en œuvre ConstraintLayout ou CoordinatorLayout pour une conception appropriée du matériel dans Android?

Vous devrez peut-être utiliser ConstraintLayout et CoordinatorLayout pour créer des animations d'interface utilisateur et de matériel efficaces.

Un exemple courant qui utilise à la fois CoordinatorLayout et ConstraintLayout est donné ci-dessous pour référence.

  • Utilisez Coordinatorlayout comme décor d'application de niveau supérieur. Il sera généralement utilisé pour mettre en forme AppBarLayout, FloatingActionButton et le corps principal de votre écran, par exemple NestedScrollView. Dans NestedScrollView, utilisez ConstraintLayout pour décrire le reste de la présentation sous forme de hiérarchie à plat.

    <androidx.coordinatorlayout.widget.CoordinatorLayout
 xmlns:Android="http://schemas.Android.com/apk/res/Android"
 xmlns:app="http://schemas.Android.com/apk/res-auto"
 Android:layout_width="match_parent"
 Android:layout_height="match_parent">

      <androidx.core.widget.NestedScrollView
         Android:layout_width="match_parent"
         Android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

          <!-- Your scrolling content -->
          <androidx.constraintlayout.widget.ConstraintLayout
              ...>

              <!-- body of constraint layout -->

              <Button Android:id="@+id/button" ...
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent/>


          </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.core.widget.NestedScrollView>

     <com.google.Android.material.appbar.AppBarLayout
         Android:layout_height="wrap_content"
         Android:layout_width="match_parent">
      <androidx.appcompat.widget.Toolbar
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>
      <com.google.Android.material.tabs.TabLayout
             ...
             app:layout_scrollFlags="scroll|enterAlways"/>
      </com.google.Android.material.appbar.AppBarLayout>
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

Point bonus

Vous pouvez utiliser le puissant MotionLayout qui est une sous-classe de ConstraintLayout pour la création d'animations. Vous pouvez vérifier ceci pour un exemple détaillé pour une animation personnalisée utilisant MotionLayout.

36
Darish

Il semble que vous utilisiez (presque) toujours un CoordinatorLayout et parfois un ConstraintLayout à l'intérieur. Voir les ressources suivantes

  • Le codelab à l'adresse https://codelabs.developers.google.com/codelabs/material-design-style/index.html# utilise uniquement un CoordinatorLayout

  • L'exemple d'application Android-sunflower ("illustrating Android meilleures pratiques de développement") "n'utilise ni l'un ni l'autre pour l'activité de niveau supérieur, mais utilise les deux à l'intérieur de son fragment_plant_detail.xml , le ConstraintLayout étant à l'intérieur du CoordinatorLayout:

    <layout ...>
<data .../>
<Android.support.design.widget.CoordinatorLayout ...>
    <Android.support.design.widget.AppBarLayout ...>
        <Android.support.design.widget.CollapsingToolbarLayout ...>
            <ImageView... />
            <Android.support.v7.widget.Toolbar... />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>
    <Android.support.v4.widget.NestedScrollView ...>
        <Android.support.constraint.ConstraintLayout ...>
            <TextView.../>
            <TextView... />
        </Android.support.constraint.ConstraintLayout>
    </Android.support.v4.widget.NestedScrollView>
    <Android.support.design.widget.FloatingActionButton ... />
</Android.support.design.widget.CoordinatorLayout>
</layout>
12
serv-inc