Différences entre ConstraintLayout et RelativeLayout
Je suis confus au sujet de la différence entre ConstraintLayout et RelativeLayout. Quelqu'un pourrait-il s'il vous plaît me dire les différences exactes entre eux?
L’intention de ConstraintLayout est d’optimiser et d’aplatir la hiérarchie des vues en appliquant des règles à chaque vue pour éviter l’imbrication.
Les règles vous rappellent RelativeLayout, par exemple, en plaçant la gauche à gauche d'une autre vue.
app:layout_constraintBottom_toBottomOf="@+id/view1"
Contrairement à RelativeLayout, ConstraintLayout offre la valeur bias utilisée pour positionner une vue en termes de décalage horizontal et vertical de 0% et 100% par rapport aux poignées (indiquées par un cercle). Ces pourcentages (et fractions) offrent un positionnement transparent de la vue sur différentes densités et tailles d'écran.
app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->
Baseline handle (tuyau long avec des coins arrondis, sous la poignée de cercle) est utilisé pour aligner le contenu de la vue avec une autre référence de vue.
Les poignées carrées (à chaque coin de la vue) permettent de redimensionner la vue en dps.
Ceci est totalement basé sur l'opinion et mon impression de ConstraintLayout
Rapporté par @davidpbrConstraintLayout performance
J'ai créé deux présentations similaires à 7 enfants, chacune avec un parent ConstraintLayout et RelativeLayout. D'après l'outil de traçage de méthode d'Android Studio, il apparaît que la ConstraintLayout passe plus de temps dans onMeasure et effectue un travail supplémentaire dans onFinishInflate.
Bibliothèque utilisée (support-v4, appcompat-v7…):
com.Android.support.constraint:constraint-layout:1.0.0-alpha1
Versions des appareils/Android reproduites sur: Samsung Galaxy S6 (SM-G920A. Désolé, pas d’atmosphère Nexus). Android 5.0.2
Comparaison rapide de traçage de méthode:
Exemple de rapport Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf
Propriétés équivalentes de disposition et de disposition de contrainte
(1) Disposition relative:
Android:layout_centerInParent="true"
(1) équivalent de présentation de contrainte:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
(2) Disposition relative:
Android:layout_centerHorizontal="true"
(2) Equivalent de contrainte de présentation:
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
(3) Disposition relative:
Android:layout_centerVertical="true"
(3) équivalent de présentation de contrainte:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
(4) Disposition relative:
Android:layout_alignParentLeft="true"
(4) équivalent de présentation de contrainte:
app:layout_constraintLeft_toLeftOf="parent"
(5) Disposition relative:
Android:layout_alignParentStart="true"
(5) équivalent de présentation de contrainte:
app:layout_constraintStart_toStartOf="parent"
(6) Disposition relative:
Android:layout_alignParentRight="true"
(6) Equivalent de configuration de contrainte:
app:layout_constraintRight_toRightOf="parent"
(7) Disposition relative:
Android:layout_alignParentEnd="true"
(7) Equivalent de configuration de contrainte:
app:layout_constraintEnd_toEndOf="parent"
(8) Disposition relative:
Android:layout_alignParentTop="true"
(8) Equivalent de contrainte de présentation:
app:layout_constraintTop_toTopOf="parent"
(9) Disposition relative:
Android:layout_alignParentBottom="true"
(9) Equivalent de contrainte de présentation:
app:layout_constraintBottom_toBottomOf="parent"
(10) Disposition relative:
Android:layout_alignStart="@id/view"
(10) équivalent de contrainte de présentation:
app:layout_constraintStart_toStartOf="@id/view"
(11) Disposition relative:
Android:layout_alignLeft="@id/view"
(11) Contrainte Disposition équivalente:
app:layout_constraintLeft_toLeftOf="@id/view"
(12) Disposition relative:
Android:layout_alignEnd="@id/view"
(12) Equivalent de contrainte de présentation:
app:layout_constraintEnd_toEndOf="@id/view"
(13) Disposition relative:
Android:layout_alignRight="@id/view"
(13) Equivalent de configuration de contrainte:
app:layout_constraintRight_toRightOf="@id/view"
(14) Disposition relative:
Android:layout_alignTop="@id/view"
(14) Equivalent de configuration de contrainte:
app:layout_constraintTop_toTopOf="@id/view"
(15) Disposition relative:
Android:layout_alignBaseline="@id/view"
(15) Equivalent de configuration de contrainte:
app:layout_constraintBaseline_toBaselineOf="@id/view"
(16) Disposition relative:
Android:layout_alignBottom="@id/view"
(16) Equivalent de configuration de contrainte:
app:layout_constraintBottom_toBottomOf="@id/view"
(17) Disposition relative:
Android:layout_toStartOf="@id/view"
(17) Equivalent de configuration de contrainte:
app:layout_constraintEnd_toStartOf="@id/view"
(18) Disposition relative:
Android:layout_toLeftOf="@id/view"
(18) Equivalent de configuration de contrainte:
app:layout_constraintRight_toLeftOf="@id/view"
(19) Disposition relative:
Android:layout_toEndOf="@id/view"
(19) Equivalent de configuration de contrainte:
app:layout_constraintStart_toEndOf="@id/view"
(20) Disposition relative:
Android:layout_toRightOf="@id/view"
(20) Equivalent de contrainte de présentation:
app:layout_constraintLeft_toRightOf="@id/view"
(21) Disposition relative:
Android:layout_above="@id/view"
(21) Equivalent de configuration de contrainte:
app:layout_constraintBottom_toTopOf="@id/view"
(22) Disposition relative:
Android:layout_below="@id/view"
(22) Equivalent de configuration de contrainte:
app:layout_constraintTop_toBottomOf="@id/view"
Voici les différences/avantages:
1) La disposition des contraintes a le double pouvoir de la disposition relative et de la disposition linéaire: définissez les positions relatives des vues (comme la disposition relative) et définissez également des pondérations pour l'interface utilisateur dynamique (ce qui n'était possible que dans la disposition linéaire).
2) Une utilisation très puissante consiste à grouper des éléments en formant une chaîne. De cette manière, nous pouvons former un groupe de vues qui, dans leur ensemble, peuvent être placées de la manière souhaitée sans ajouter une autre couche de hiérarchie pour former un autre groupe de vues.
3) En plus des poids, nous pouvons appliquer une polarisation horizontale et verticale qui n’est autre que le pourcentage de déplacement à partir du centre. (biais de 0,5 signifie alignés au centre. Toute valeur inférieure ou supérieure signifie un mouvement correspondant dans la direction respective).
4) Une autre caractéristique très importante est qu’elle respecte et fournit la fonctionnalité permettant de gérer les vues GONE afin que les mises en forme ne se cassent pas si une vue est définie sur GONE via le code Java. Plus d'informations peuvent être trouvées ici: https://developer.Android.com/reference/Android/support/constraint/ConstraintLayout.html#VisibilityBehavior
5) Offre une puissance de contrainte automatique s’appliquant à l’aide de Blue Print et de l’outil Visual Editor permettant de concevoir facilement une page.
Toutes ces caractéristiques entraînent un aplatissement de la hiérarchie des vues, ce qui améliore les performances et aide également à créer une interface utilisateur réactive et dynamique, capable de s'adapter plus facilement aux différentes tailles et densités d'écran.
Voici le meilleur endroit pour apprendre rapidement: https://codelabs.developers.google.com/codelabs/constraint-layout/#0
Une grande différence est que ConstraintLayout respecte les contraintes même si la vue a disparu. Donc, cela ne cassera pas la mise en page si vous avez une chaîne et que vous voulez faire en sorte qu'une vue disparaisse au milieu.
Le processus de dessin de la vue Android comprend 3 phases. Vous pouvez trouver les méthodes correspondantes quand étend ViewGroup
- Mesure
- Disposition
- Dessiner
En utilisant outil Systrace nous pouvons calculer une mesure/une mise en page
Systrace pour la variante de présentation qui utilise RelativeLayout:
Systrace pour la variante de présentation qui utilise ConstraintLayout:
Différence de performances (avec OnFrameMetricsAvailableListener qui vous permet de collecter des informations de minutage image par image sur le rendu de l'interface utilisateur de votre application)
ConstraintLayout effectue environ 40% de mieux dans la phase de mesure/mise en page que RelativeLayout
Enfin, une ConstraintLayout est un moyen moderne de créer une interface utilisateur responsable, elle est en constante évolution et chaque version apporte des fonctionnalités intéressantes qui facilitent la vie. Le dernier en date est Constraint Layout 1.1
S'il vous plaît lire plus:
https://Android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html
https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7
La vraie question à se poser est la suivante: y a-t-il une raison d'utiliser une mise en page autre qu'une mise en forme avec contrainte? Je crois que la réponse pourrait être non.
Ceux qui insistent sur le fait qu’ils s’adressent aux programmeurs débutants ou similaires, devraient fournir une raison quelconque pour qu’ils soient inférieurs à toute autre mise en page.
Les dispositions de contraintes sont meilleures à tous égards (elles coûtent 150k en taille APK). Ils sont plus rapides, plus faciles, plus flexibles, ils réagissent mieux aux changements, ils résolvent les problèmes lorsque les éléments disparaissent, ils se conforment mieux à des types d'écran radicalement différents et ils n'utilisent pas un tas de boucles imbriquées aussi longtemps. arborescence dessinée pour tout. Vous pouvez mettre n'importe quoi n'importe où, par rapport à n'importe quoi, n'importe où.
Ils étaient un peu vicieux à la mi-2016, où l'éditeur visuel de mise en page n'était tout simplement pas suffisant, mais au point que si vous avez une mise en page, vous voudrez peut-être sérieusement envisager d'utiliser une mise en page avec contrainte. quand il fait la même chose qu'une RelativeLayout, ou même une simple LinearLayout. FrameLayouts ont toujours leur objectif. Mais je ne vois rien construire d’autre à ce stade. S'ils avaient commencé avec cela, ils n'auraient rien ajouté d'autre.
En plus de la réponse @ dhaval-jivani.
J'ai mis à jour le projet github project avec la dernière version de constraint layout v.1.1.0-beta3
J'ai mesuré et comparé le temps passé par la méthode onCreate et le temps écoulé entre le début de onCreate et la fin de l'exécution de la dernière méthode preformDraw visible dans le moniteur du processeur. Tous les tests ont été réalisés sur Samsung S5 mini avec Android 6.0.1Here résultats:
Nouveau départ (première ouverture d'écran après le lancement de l'application)
Disposition relative
OnCreate: 123ms
Dernière heure preformDraw - heure OnCreate: 311.3ms
Mise en forme des contraintes
OnCreate: 120.3ms
Dernière heure preformDraw - Heure OnCreate: 310 ms
En outre, j'ai vérifié le test de performance de cet article article , ici le code Et constaté que le nombre de boucles sur une boucle est inférieur à 100, la variante de présentation de contrainte est plus rapide lors de l'exécution de gonflage, de mesure et de présentation puis variantes avec mise en page relative. Et sur les anciens appareils Android, comme le Samsung S3 avec Android 4.3, la différence est plus grande.
En conclusion, je suis d’accord avec les commentaires de l’article article :
Vaut-il la peine de refactoriser les anciennes vues pour la passer de RelativeLayout ou LinearLayout?
Comme toujours: ça dépend ????
Je ne refactoriserais rien, sauf si vous rencontrez un problème de performances avec votre hiérarchie de présentation actuelle ou si vous souhaitez néanmoins apporter des modifications importantes à la présentation. Bien que je n’aie pas fait la mesure récemment, je n’ai trouvé aucun problème de performances dans les dernières versions. Donc, je pense que vous devriez être sûr de l'utiliser. mais, comme je l’ai déjà dit, ne migrez pas uniquement pour migrer. Ne le faites que si vous en avez besoin et que vous en bénéficiez. Cependant, pour les nouvelles mises en page, j'utilise presque toujours ConstraintLayout. C’est tellement mieux comparé à ce que nous avions auparavant.
Officiellement, ConstraintLayout est beaucoup plus rapide
Dans la version N d'Android, la classe
ConstraintLayoutfournit des fonctionnalités similaires àRelativeLayout, mais à un coût considérablement inférieur.
La conclusion que je peux faire est
1) Nous pouvons concevoir l'interface utilisateur sans toucher à la partie xml} du code, pour être honnête, je me sens Google a copié la manière dont l'interface utilisateur est conçue dans les applications iOS}, cela aura un sens si vous êtes familier avec le développement d'interface utilisateur dans iOS, mais dans la mise en page relative, il est difficile de définir les contraintes sans toucher au design xml.
2) Deuxièmement, il a hiérarchie des vues à plat contrairement aux autres modèles, tout comme une meilleure performance que le modèle relatif que vous auriez peut-être vu à partir d'autres réponses.
3) Il y a aussi des choses supplémentaires en dehors de la disposition relative, telles que positionnement relatif circulaire où nous pouvons positionner une autre vue par rapport à celle-ci à un certain rayon avec un certain angle qui ne peut pas être fait dans une disposition relative
Je le répète, concevoir une interface utilisateur à l'aide d'une disposition de contrainte est identique à la conception d'une interface utilisateur dans iOS. Ainsi, à l'avenir, si vous travaillez sur iOS, vous le trouverez plus facilement si vous avez utilisé la disposition de contrainte.
La seule différence que j'ai notée est que les éléments définis dans une disposition relative via un glisser-déposer ont automatiquement leurs dimensions par rapport à d'autres éléments, de sorte que lorsque vous exécutez l'application, vous voyez ce que vous obtenez. Cependant, dans la présentation de la contrainte, même si vous faites glisser un élément dans la vue Conception, lorsque vous exécutez l'application, les choses peuvent être déplacées. Cela peut facilement être corrigé en définissant manuellement les contraintes ou, un déplacement plus risqué consiste à cliquer avec le bouton droit de la souris sur l'élément dans l'arborescence des composants, en sélectionnant le sous-menu de présentation de la contrainte, puis en cliquant sur "déduire des contraintes". J'espère que cela t'aides