Différences entre ConstraintLayout et RelativeLayout

Je suis confus quant à 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 de vue de vos mises en page en appliquant des règles à chaque vue pour éviter leur imbrication.

Les règles vous rappellent RelativeLayout , par exemple en définissant la gauche à gauche d’une autre vue.

 app:layout_constraintBottom_toBottomOf="@+id/view1" 

Contrairement à RelativeLayout , ConstraintLayout offre une valeur de bias utilisée pour positionner une vue en termes de décalage horizontal et vertical de 0% et 100% par rapport aux poignées (marquées d’un cercle). Ces pourcentages (et fractions) offrent un positionnement homogène de la vue sur différentes densités et tailles d’écran.

 app:layout_constraintHorizontal_bias="0.33"  app:layout_constraintVertical_bias="0.53"  

La poignée de la ligne de base (tuyau long avec coins arrondis, en dessous de la poignée circulaire) est utilisée pour aligner le contenu de la vue avec une autre référence de vue.

Les poignées carrées ( situées à chaque coin de la vue) sont utilisées pour redimensionner la vue en dps.

entrer la description de l'image ici

Ceci est totalement basé sur l’opinion et mon impression de ConstraintLayout

Rapporté par @davidpbr ConstraintLayout performance

J’ai réalisé deux mises en page similaires à 7 enfants, chacune avec un parent ConstraintLayout et RelativeLayout. Basé sur l’outil de suivi de méthode d’Android Studio, il semble que 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: disposition des contraintes: 1.0.0-alpha1’

Appareils / versions Android reproduits sur: Samsung Galaxy S6 (SM-G920A. Désolé, pas de Nexus atm). Android 5.0.2

Comparaison rapide des méthodes de traçage:

1

Exemple de repository Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

Voici les différences / avantages:

1) La disposition des contraintes a la double puissance 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 les poids pour l’interface utilisateur dynamic (uniquement possible dans la disposition linéaire).

2) Une utilisation très puissante consiste à regrouper des éléments en formant une chaîne. De cette façon, nous pouvons former un groupe de vues qui, dans son ensemble, peuvent être placées de la manière souhaitée sans append une autre couche de hiérarchie, juste pour former un autre groupe de vues.

3) En plus des poids, nous pouvons appliquer un biais horizontal et vertical qui n’est rien d’autre que le pourcentage de déplacement par rapport au centre. (le biais de 0,5 signifie que l’alignement est central. Toute valeur inférieure ou supérieure signifie le mouvement correspondant dans la direction respective).

4) Une autre caractéristique très importante est qu’elle respecte et fournit les fonctionnalités permettant de gérer les vues GONE afin que les présentations ne soient pas rompues si une vue est définie sur GONE via le code Java. Plus peut être trouvé ici: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

5) Fournit une puissance de contrainte automatique à l’aide de l’outil Blue print et Visual Editor, qui facilite la conception d’une page.

Toutes ces fonctionnalités conduisent à 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 dynamic qui peut s’adapter plus facilement à 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, si vous avez une chaîne et que vous voulez faire disparaître une vue au milieu, cela ne brisera pas la mise en page.

La vraie question à poser est la suivante: existe-t-il une raison d’utiliser une mise en page autre qu’une disposition de contrainte? Je crois que la réponse pourrait être non.

Pour ceux qui insistent sur le fait qu’ils sont destinés à des programmeurs novices ou similaires, ils devraient leur donner une raison d’être inférieurs à toute autre disposition.

Les mises en page des contraintes sont meilleures à tous les égards (elles coûtent environ 150 000 en taille APK). Ils sont plus rapides, ils sont plus faciles, ils sont plus flexibles, ils réagissent mieux aux changements, ils corrigent les problèmes lorsque des éléments disparaissent, ils se conforment mieux à des types d’écran radicalement différents et ils n’utilisent pas beaucoup de boucles nestedes structure d’arbre dessiné pour tout. Vous pouvez placer n’importe où, n’importe où, n’importe où.

Ils étaient un peu vicieux à la mi-2016, où l’éditeur de présentation visuelle n’était tout simplement pas assez bon, mais ils sont au point que si vous avez une mise en page du tout, vous pourriez envisager sérieusement d’utiliser une disposition de contrainte, même quand il fait la même chose qu’un RelativeLayout, ou même un LinearLayout simple. FrameLayouts a toujours son objective. Mais je ne peux pas voir autre chose à ce stade. S’ils ont commencé avec cela, ils n’auraient rien ajouté d’autre.

En plus de @ dhaval-jivani répondre.

J’ai mis à jour le projet github du projet avec la dernière version de la disposition de contrainte v.1.1.0-beta3

J’ai mesuré et comparé le temps de 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 CPU. Tous les tests ont été effectués sur Samsung S5 mini avec Android 6.0.1 Voici les résultats:

Nouveau départ (première ouverture de l’écran après le lancement de l’application)

Disposition relative

OnCreate: 123ms

Dernier temps préformé – Temps de création: 311.3ms

Disposition de contrainte

OnCreate: 120.3ms

Dernier temps préformé – Temps OnCreate: 310ms

En plus de cela, j’ai vérifié le test de performance de cet article , ici le code et trouvé que la boucle compte moins de 100 variantes de la disposition de contrainte est plus rapide lors de l’exécution du gonflage, mesure et mise en page que des 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 :

Est-ce que cela vaut la peine de réorganiser les anciennes vues pour les activer depuis RelativeLayout ou LinearLayout?

Comme toujours: ça dépend 🙂

Je ne recentrerais rien à moins que vous n’ayez un problème de performance avec votre hiérarchie de mise en page actuelle ou que vous souhaitiez apporter des modifications significatives à la mise en page de toute façon. Bien que je n’aie pas mesuré ces derniers temps, je n’ai trouvé aucun problème de performance dans les dernières versions. Donc, je pense que vous devriez être en sécurité pour l’utiliser. mais – comme je l’ai dit – ne pas simplement migrer pour migrer. Ne le faites que si vous en avez besoin et en bénéficiez. Pour les nouvelles mises en page, cependant, j’utilise presque toujours ConstraintLayout. C’est tellement mieux comparer à ce que nous avions auparavant.

Le processus de dessin de vues Android comprend 3 phases. Vous pouvez trouver les méthodes correspondantes lorsque ViewGroup

  • Mesure
  • Disposition
  • Dessiner

En utilisant l’outil Systrace, nous pouvons calculer la mesure / la disposition

Systrace pour la variante de présentation qui utilise RelativeLayout entrer la description de l'image ici

Systrace pour la variante de présentation qui utilise ConstraintLayout entrer la description de l'image ici

Différence de performances (à l’aide de OnFrameMesortingcsAvailableListener qui vous permet de collecter des informations de synchronisation image par image sur le rendu de l’interface utilisateur de votre application)

ConstraintLayout effectue environ 40% de mieux dans la phase mesure / mise en page que RelativeLayout

entrer la description de l'image ici

Et pour ConstraintLayout est un moyen moderne de créer une interface utilisateur responsable, en constante évolution, et chaque version apporte des fonctionnalités intéressantes qui facilitent la vie. La dernière est Constraint Layout 1.1

S’il vous plaît lire plus:

https://constraintlayout.com/

https://android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html

https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7

Officiellement, ConstraintLayout est beaucoup plus rapide

Dans la version N d’Android, la classe ConstraintLayout fournit des fonctionnalités similaires à RelativeLayout , mais à un coût nettement inférieur.

[ Propriétés équivalentes de la disposition relative et de la contrainte [Propriétés équivalentes de la disposition relative et de la disposition des contraintes]

La conclusion que je peux faire est

1) Nous pouvons faire de la conception d’interface utilisateur sans toucher à la partie xml du code, pour être honnête, je pense que Google a copié la conception de l’interface utilisateur dans les applications iOS. difficile de définir les contraintes sans toucher au design XML .

2) Deuxièmement, la hiérarchie des vues plates est différente de celle des autres dispositions, de même que les performances que vous avez pu voir dans d’autres réponses

3) Il y a aussi des choses en plus de la disposition relative, telle que le positionnement relatif circulaire où on peut positionner une autre vue par rapport à celle-ci à un certain rayon avec un certain angle qui ne peut pas faire dans la disposition relative

Je le répète, la conception de l’interface utilisateur à l’aide de la disposition par contraintes est identique à la conception de l’interface utilisateur dans iOS, donc à l’avenir, si vous travaillez sur iOS, vous trouverez plus facile si vous avez utilisé la disposition par contraintes

La seule différence que j’ai notée est que les choses définies dans une mise en page relative par glisser-déposer ont automatiquement leurs dimensions par rapport aux autres éléments inférés, donc lorsque vous exécutez l’application, ce que vous voyez est ce que vous obtenez. Cependant, dans la disposition des contraintes, même si vous faites glisser un élément dans la vue de conception, lorsque vous l’exécutez, les choses peuvent être décalées. Cela peut facilement être corrigé en définissant manuellement les contraintes ou, avec un mouvement plus risqué, en cliquant avec le bouton droit de la souris sur l’élément dans l’arborescence des composants, en sélectionnant le sous-menu J’espère que cela t’aides