wake-up-neo.com

Unterschiede zwischen ConstraintLayout und RelativeLayout

Ich bin verwirrt über den Unterschied zwischen ConstraintLayout und RelativeLayout. Könnte mir bitte jemand die genauen Unterschiede erklären? 

168
b2mob

ConstraintLayout soll die Ansichtshierarchie Ihrer Layouts optimieren und reduzieren, indem Sie für jede Ansicht einige Regeln anwenden, um das Verschachteln zu vermeiden. 

Regeln erinnern an RelativeLayout, beispielsweise indem Sie links von einer anderen Ansicht Links setzen. 

app:layout_constraintBottom_toBottomOf="@+id/view1"

Im Gegensatz zu RelativeLayout bietet ConstraintLayout einen bias-Wert, der zum Positionieren einer Ansicht in Bezug auf 0% und 100% horizontalen und vertikalen Versatz relativ zu den Ziehpunkten (mit Kreis markiert) verwendet wird. Diese Prozentsätze (und Bruchteile) ermöglichen eine nahtlose Positionierung der Ansicht über verschiedene Bildschirmdichten und -größen.

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 (lange Pipe mit abgerundeten Ecken, unter dem Kreis-Handle) wird verwendet, um den Inhalt der Ansicht mit einer anderen Ansichtsreferenz auszurichten.

Quadrat-Ziehpunkte (in jeder Ecke der Ansicht) werden zur Größenänderung der Ansicht in dps verwendet.

 enter image description here

Das ist absolut meinungsbasiert und mein Eindruck von ConstraintLayout

116

Gemeldet von @davidpbrConstraintLayout Leistung

Ich habe zwei ähnliche 7-Kind-Layouts erstellt, eines mit jeweils einem übergeordneten ConstraintLayout und RelativeLayout. Basierend auf dem Android Studio-Methodenverfolgungstool scheint es, dass ConstraintLayout mehr Zeit in onMeasure verbringt und in onFinishInflate zusätzliche Arbeit leistet.

Verwendete Bibliothek (support-v4, appcompat-v7…):

com.Android.support.constraint:constraint-layout:1.0.0-alpha1

Geräte/Android-Versionen wiedergegeben auf: Samsung Galaxy S6 (SM-G920A. Sorry, kein Nexus atm). Android 5.0.2

Schneller Methodenvergleich:

1

Beispiel für ein Github-Repo: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

38
Dhaval Jivani

Relative Layout- und Constraint-Layout-äquivalente Eigenschaften

 Relative Layout and Constraint Layout equivalent properties

(1) Relatives Layout: 

Android:layout_centerInParent="true"    

(1) Entsprechendes Constraint-Layout: 

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

Android:layout_centerHorizontal="true"

(2) Entsprechendes Constraint-Layout: 

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"

(3) Relatives Layout: 

Android:layout_centerVertical="true"    

(3) Entsprechendes Constraint-Layout: 

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

(4) Relatives Layout: 

Android:layout_alignParentLeft="true"   

(4) Entsprechendes Constraint-Layout: 

app:layout_constraintLeft_toLeftOf="parent"

(5) Relatives Layout: 

Android:layout_alignParentStart="true"

(5) Entsprechendes Constraint-Layout: 

app:layout_constraintStart_toStartOf="parent"

(6) Relatives Layout: 

Android:layout_alignParentRight="true"

(6) Entsprechendes Constraint-Layout: 

app:layout_constraintRight_toRightOf="parent"

(7) Relatives Layout: 

Android:layout_alignParentEnd="true"    

(7) Entsprechendes Constraint-Layout: 

app:layout_constraintEnd_toEndOf="parent"

(8) Relatives Layout: 

Android:layout_alignParentTop="true"

(8) Entsprechendes Constraint-Layout: 

app:layout_constraintTop_toTopOf="parent"

(9) Relatives Layout: 

Android:layout_alignParentBottom="true" 

(9) Entsprechendes Constraint-Layout: 

app:layout_constraintBottom_toBottomOf="parent"

(10) Relatives Layout: 

Android:layout_alignStart="@id/view"

(10) Entsprechendes Constraint-Layout: 

app:layout_constraintStart_toStartOf="@id/view"

(11) Relatives Layout: 

Android:layout_alignLeft="@id/view" 

(11) Entsprechendes Constraint-Layout: 

app:layout_constraintLeft_toLeftOf="@id/view"

(12) Relatives Layout: 

Android:layout_alignEnd="@id/view"  

(12) Entsprechendes Constraint-Layout: 

app:layout_constraintEnd_toEndOf="@id/view"

(13) Relatives Layout: 

Android:layout_alignRight="@id/view"

(13) Entsprechendes Constraint-Layout: 

app:layout_constraintRight_toRightOf="@id/view"

(14) Relatives Layout: 

Android:layout_alignTop="@id/view"  

(14) Entsprechendes Constraint-Layout: 

app:layout_constraintTop_toTopOf="@id/view"

(15) Relatives Layout: 

Android:layout_alignBaseline="@id/view" 

(15) Entsprechendes Constraint-Layout: 

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16) Relatives Layout: 

Android:layout_alignBottom="@id/view"

(16) Entsprechendes Constraint-Layout: 

app:layout_constraintBottom_toBottomOf="@id/view"

(17) Relatives Layout: 

Android:layout_toStartOf="@id/view"

(17) Entsprechendes Constraint-Layout: 

app:layout_constraintEnd_toStartOf="@id/view"

(18) Relatives Layout: 

Android:layout_toLeftOf="@id/view"  

(18) Entsprechendes Constraint-Layout: 

app:layout_constraintRight_toLeftOf="@id/view"

(19) Relatives Layout: 

Android:layout_toEndOf="@id/view"

(19) Entsprechendes Constraint-Layout: 

app:layout_constraintStart_toEndOf="@id/view"

(20) Relatives Layout: 

Android:layout_toRightOf="@id/view"

(20) Entsprechendes Constraint-Layout: 

app:layout_constraintLeft_toRightOf="@id/view"

(21) Relatives Layout: 

Android:layout_above="@id/view" 

(21) Entsprechendes Constraint-Layout: 

app:layout_constraintBottom_toTopOf="@id/view"

(22) Relatives Layout: 

Android:layout_below="@id/view" 

(22) Entsprechendes Constraint-Layout: 

app:layout_constraintTop_toBottomOf="@id/view"

25
Naimatullah

Nachfolgend die Unterschiede/Vorteile:

1) Constraint Layout verfügt über eine doppelte Potenz sowohl für relatives Layout als auch für lineares Layout: Legen Sie relative Positionen von Ansichten (wie relatives Layout) und Gewichte für dynamische Benutzeroberflächen fest (was nur im linearen Layout möglich war).

2) Eine sehr mächtige Anwendung ist das Gruppieren von Elementen durch Bildung einer Kette. Auf diese Weise können wir eine Gruppe von Ansichten bilden, die als Ganzes in der gewünschten Weise platziert werden kann, ohne dass eine weitere Hierarchieebene hinzugefügt wird, um eine weitere Gruppe von Ansichten zu bilden.

3) Zusätzlich zu den Gewichten können wir eine horizontale und vertikale Neigung anwenden, die nichts anderes ist als der prozentuale Versatz von der Mitte. (Eine Vorspannung von 0,5 bedeutet zentral ausgerichtet. Ein beliebiger Wert bedeutet eine entsprechende Bewegung in die jeweilige Richtung.).

4) Eine weitere sehr wichtige Funktion ist, dass sie die GONE-Ansichten berücksichtigt und die Funktionalität bereitstellt, so dass Layouts nicht beschädigt werden, wenn eine Ansicht durch Java-Code auf GONE gesetzt ist. Weitere Informationen finden Sie hier: https://developer.Android.com/reference/Android/support/constraint/ConstraintLayout.html#VisibilityBehavior

5) Bietet die Möglichkeit der automatischen Einschränkung durch Verwendung von Blue Print und Visual Editor, wodurch das Erstellen einer Seite vereinfacht wird.

Alle diese Funktionen führen zu einer Abflachung der Ansichtshierarchie, was die Leistung verbessert und auch dazu beiträgt, eine ansprechende und dynamische Benutzeroberfläche zu erstellen, die sich leichter an unterschiedliche Bildschirmgröße und -dichte anpassen lässt.

Hier können Sie am schnellsten lernen: https://codelabs.developers.google.com/codelabs/constraint-layout/#0

19
Vishu Gupta

Ein großer Unterschied ist, dass ConstraintLayout Einschränkungen auch dann berücksichtigt, wenn die Ansicht weg ist. Das Layout wird also nicht beschädigt, wenn Sie eine Kette haben und eine Ansicht in der Mitte verschwinden lassen möchten.

12
Herrbert74

Der Zeichnungsprozess für die Android-Ansicht umfasst 3 Phasen. Entsprechende Methoden finden Sie, wenn Sie ViewGroup erweitern.

  • Messen 
  • Layout 
  • Zeichnen

Mit Systrace-Tool Wir können das Maß/Layout berechnen 

Systrace für die Layoutvariante, die RelativeLayout verwendet:

 enter image description here

Systrace für die Layoutvariante, die ConstraintLayout verwendet:

 enter image description here

Leistungsunterschied (mit OnFrameMetricsAvailableListener ermöglicht Ihnen das Erfassen von Frame-by-Frame-Timing-Informationen zum Rendern der Benutzeroberfläche Ihrer App)

ConstraintLayout ist in der Maß-/Layoutphase um etwa 40% besser als RelativeLayout

 enter image description here

Und last but not least ist eine ConstraintLayout eine moderne Methode, um eine verantwortungsbewusste Benutzeroberfläche zu erstellen, die sich ständig weiterentwickelt. Jede Version enthält coole Funktionen, die das Leben einfacher machen. Die neueste ist Constraint Layout 1.1

Bitte lesen Sie mehr: 

https://constraintlayout.com/

https://Android-developers.googleblog.com/2017/08/understanding-performance-vorteile-of.html

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

8
yoAlex5

Die eigentliche Frage ist: Gibt es einen Grund, ein anderes Layout als ein Constraint-Layout zu verwenden? Ich glaube, die Antwort könnte nein sein.

Für diejenigen, die darauf bestehen, dass sie sich an Neulinge oder ähnliches richten, sollten sie einen Grund dafür angeben, dass sie einem anderen Layout unterlegen sind. 

Constraints-Layouts sind in jeder Hinsicht besser (Sie kosten etwa 150.000 APK-Größe). Sie sind schneller, sie sind einfacher, sie sind flexibler, sie reagieren besser auf Änderungen, sie beheben die Probleme, wenn Elemente wegfallen, sie passen sich radikal anderen Bildschirmtypen an und sie verwenden keine Reihe von verschachtelten Schleifen mit dieser langen Länge Baumstruktur für alles gezeichnet. Sie können alles an jedem Ort und an jedem Ort ablegen.

Sie waren Mitte 2016 etwas unübersichtlich, als der visuelle Layout-Editor einfach nicht gut genug war. Sie sind jedoch so weit, dass, wenn Sie überhaupt ein Layout haben, Sie vielleicht ernsthaft überlegen, ein Constraint-Layout zu verwenden wenn es dasselbe wie eine RelativeLayout oder sogar eine einfache LinearLayout tut. FrameLayouts hat eindeutig noch ihren Zweck. Aber ich kann an diesem Punkt nichts anderes bauen. Wenn sie damit angefangen hätten, hätten sie nichts anderes hinzugefügt.

5
Tatarize

Neben @ dhaval-jivani antworten. 

Ich habe das Projekt github auf die neueste Version des Constraint Layouts v.1.1.0-beta3 aktualisiert 

Ich habe die Zeit der onCreate-Methode und die Zeit zwischen einem Start von onCreate und dem Ende der Ausführung der letzten preformDraw-Methode gemessen und verglichen, die im CPU-Monitor sichtbar ist. Alle Tests wurden auf dem Samsung S5 mini mit Android 6.0.1 durchgeführt.

Neustart (erste Bildschirmöffnung nach dem Start der Anwendung) 

Relatives Layout

OnCreate: 123ms

Letzte PreformDraw-Zeit - OnCreate-Zeit: 311,3 ms

Constraint-Layout

OnCreate: 120,3 ms

Letzte PreformDraw-Zeit - OnCreate-Zeit: 310ms

Abgesehen davon habe ich den Leistungstest aus diesem article , hier dem Code Überprüft und festgestellt, dass die On-Loop-Anzahl weniger als 100 Constraint-Layoutvarianten während der Ausführung von Aufpumpen, Messen und Layout schneller ist dann Varianten mit relativem Layout. Und bei alten Android-Geräten wie Samsung S3 mit Android 4.3 ist der Unterschied größer.

Zum Schluss stimme ich den Kommentaren aus dem article zu:

Lohnt es sich, alte Ansichten umzuwandeln, um RelativeLayout oder LinearLayout zu aktivieren?

Wie immer: Es kommt darauf an ????

Ich würde nichts umgestalten, es sei denn, Sie haben ein Leistungsproblem mit Ihrer aktuellen Layouthierarchie oder Sie möchten das Layout trotzdem ändern. Obwohl ich es in letzter Zeit nicht gemessen habe, habe ich in den letzten Releases keine Performance-Probleme gefunden. Ich denke, Sie sollten es sicher verwenden können. aber, wie ich schon sagte, wandern Sie nicht einfach aus Gründen der Migration. Tun Sie dies nur, wenn Sie es brauchen und davon profitieren . Für neue Layouts verwende ich jedoch fast immer ConstraintLayout. Es ist viel besser im Vergleich zu dem, was wir zuvor hatten.

4
Andrey T

Offiziell ist ConstraintLayoutviel schneller

In der N-Version von Android bietet die ConstraintLayout-Klasse eine ähnliche Funktionalität wie RelativeLayout, jedoch zu deutlich niedrigeren Kosten. 

3
serv-inc

Die Schlussfolgerung, die ich machen kann, ist

1) Wir können UI-Design ausführen, ohne den XML-Teil zu berühren des Codes, um ehrlich zu sein, fühle ich google hat kopiert, wie UI in iOS-Apps entworfen wird, es wird Sinn machen, wenn Sie es sind vertraut mit der UI-Entwicklung in iOS, aber im relativen Layout ist es schwierig, die Einschränkungen festzulegen, ohne das XML-Design zu berühren.

2) Zweitens hat es flache Ansichtshierarchie, im Gegensatz zu anderen Layouts, bessere Leistung als relatives Layout, das Sie möglicherweise aus anderen Antworten gesehen haben

3) Außer dem relativen Layout gibt es noch weitere Dinge, wie zum Beispiel kreisförmige relative Positionierung, bei der wir eine andere Ansicht relativ zu diesem Blickwinkel in einem bestimmten Radius mit einem bestimmten Winkel positionieren können, was im relativen Layout nicht möglich ist

Ich sage es noch einmal: Das Design der Benutzeroberfläche mit dem Constraint-Layout entspricht dem Design der Benutzeroberfläche in iOS. Wenn Sie also unter iOS arbeiten, werden Sie es in Zukunft einfacher finden, wenn Sie das Constraint-Layout verwenden

3
murali krish

Der einzige Unterschied, den ich festgestellt habe, ist, dass die Abmessungen eines relativen Layouts durch Ziehen und Ablegen automatisch in Bezug auf andere Elemente abgeleitet werden. Wenn Sie also die App ausführen, sehen Sie das, was Sie sehen. Wenn Sie jedoch im Constraint-Layout ein Element in die Entwurfsansicht ziehen und ablegen, werden die Elemente beim Ausführen der App möglicherweise verschoben. Dies kann leicht behoben werden, indem die Einschränkungen manuell festgelegt werden. Eine riskantere Maßnahme besteht darin, mit der rechten Maustaste auf das Element in der Komponentenstruktur zu klicken, das Untermenü für das Layout für Abhängigkeiten auszuwählen und dann auf "Einschränkungen" zu klicken. Hoffe das hilft

0
Wilson