Unterschiede zwischen ConstraintLayout und RelativeLayout

219

Ich bin verwirrt über den Unterschied zwischen ConstraintLayoutund RelativeLayout. Könnte mir bitte jemand die genauen Unterschiede zwischen ihnen erzählen?

b2mob
quelle
9
ConstraintLayout wurde hauptsächlich für die neuen Programmierer entwickelt, damit sie das Layout einfach mit dem visuellen Editor entwerfen können, anstatt das Layout manuell über XML zu erstellen.
CopsOnRoad
1
@ Jack definitiv hat es auch einen tieferen Zweck für erfahrene Experten
Moses Aprico
@ MosesAprico Sie haben Recht, es hat das. Aber ich denke , gewürzt Experte Devs schon viele andere Möglichkeiten haben (sie bereits wissen wie RealtiveLayout, LinearLayout, GridLayoutusw.) , um die Ansichtshierarchie sie wollen zu bekommen.
CopsOnRoad
5
@CopsOnRoad Eigentlich liegst du falsch. Apple erstellt seit mehr als 5 Jahren Constraint-Layouts. Sie erhalten ein ansprechendes Design für jede Größe und müssen nicht viele komplexe Layouts schreiben. Wenn Sie mit dem Binden mehrerer Ansichten beginnen, benötigen Sie nur drei grundlegende Steuerelemente, um ein vollständig ansprechendes Design zu erstellen.
Nick Turner

Antworten:

145

Ziel ConstraintLayoutist es, die Ansichtshierarchie Ihrer Layouts zu optimieren und zu reduzieren, indem Sie auf jede Ansicht einige Regeln anwenden, um eine Verschachtelung zu vermeiden.

Regeln erinnern Sie RelativeLayoutbeispielsweise daran, wie Sie eine andere Ansicht von links nach links setzen.

app:layout_constraintBottom_toBottomOf="@+id/view1"

Im Gegensatz zu RelativeLayout, ConstraintLayoutbietet biasWert, der einen Blick auf die Position in Bezug auf 0% verwendet wird und 100% horizontal und vertikal versetzt zu den Griffen (mit Kreis markiert). Diese Prozentsätze (und Brüche) bieten eine nahtlose Positionierung der Ansicht über verschiedene Bildschirmdichten und -größen hinweg.

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

Der Grundliniengriff (langes Rohr mit abgerundeten Ecken unterhalb des Kreisgriffs) wird verwendet, um den Inhalt der Ansicht an einer anderen Ansichtsreferenz auszurichten.

Quadratische Ziehpunkte (an jeder Ecke der Ansicht) werden verwendet, um die Größe der Ansicht in dps zu ändern.

Geben Sie hier die Bildbeschreibung ein

Dies ist völlig meinungsbasiert und mein Eindruck von ConstraintLayout

Nikola Despotoski
quelle
9
Mit RelativeLayout können wir immer noch ein flaches Layout erstellen. Deshalb bin ich verwirrt, wo ConstraintLayout darauf achtet, wo RelativeLayout nicht kann.
6
RelativeLayout ist ein Layout mit zwei Durchgängen, das unter Doppelbesteuerung leidet. Es muss mindestens zweimal messen / anordnen. ConstraintLayout erleidet diesen Leistungsverlust nicht.
Christopher Perry
5
@Nichts Ja, wir können mit RelativeLayout immer noch ein flaches Layout erstellen. Zusätzlich zu allen hier genannten können Sie mit ConstraintLayout negative Ränder und Größenunteransichten in einem vordefinierten Verhältnis verwenden . Letzteres ist der robusteste Weg, um das 16: 9-Verhältnis für Ihre ImageView in CardView gemäß dem Materialdesign
beizubehalten
4
Es gibt einige Layouts, die in RelativeLayout nur möglich sind, wenn Sie ein LinearLayout oder ein anderes RelativeLayout verschachteln. Zum Beispiel: Zentrieren eines "Stapels" von 3 Ansichten vertikal relativ zu einer anderen Ansicht
Gak2
@ Gak2 Ich kann in Ihrem Beispiel nichts Unmögliches ohne ein verschachteltes Layout sehen. Vielleicht meinst du mit "Stapel" etwas anderes als ich. Ich benutze einfach "layout_alignEnd", "layout_below", "layout _..." und kann damit jede Art von Stapel erstellen ...
Der unglaubliche
81

Äquivalente Eigenschaften für relatives Layout und Einschränkungslayout

Äquivalente Eigenschaften für relatives Layout und Einschränkungslayout

(1) Relatives Layout:

android:layout_centerInParent="true"    

(1) Äquivalent zum Einschränkungslayout:

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) Äquivalent zum Einschränkungslayout:

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) Äquivalent zum Einschränkungslayout:

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

(4) Relatives Layout:

android:layout_alignParentLeft="true"   

(4) Äquivalent zum Einschränkungslayout:

app:layout_constraintLeft_toLeftOf="parent"

(5) Relatives Layout:

android:layout_alignParentStart="true"

(5) Äquivalent zum Einschränkungslayout:

app:layout_constraintStart_toStartOf="parent"

(6) Relatives Layout:

android:layout_alignParentRight="true"

(6) Äquivalent zum Einschränkungslayout:

app:layout_constraintRight_toRightOf="parent"

(7) Relatives Layout:

android:layout_alignParentEnd="true"    

(7) Äquivalent zum Einschränkungslayout:

app:layout_constraintEnd_toEndOf="parent"

(8) Relatives Layout:

android:layout_alignParentTop="true"

(8) Äquivalent zum Einschränkungslayout:

app:layout_constraintTop_toTopOf="parent"

(9) Relatives Layout:

android:layout_alignParentBottom="true" 

(9) Äquivalent zum Einschränkungslayout:

app:layout_constraintBottom_toBottomOf="parent"

(10) Relatives Layout:

android:layout_alignStart="@id/view"

(10) Äquivalent zum Einschränkungslayout:

app:layout_constraintStart_toStartOf="@id/view"

(11) Relatives Layout:

android:layout_alignLeft="@id/view" 

(11) Äquivalent zum Einschränkungslayout:

app:layout_constraintLeft_toLeftOf="@id/view"

(12) Relatives Layout:

android:layout_alignEnd="@id/view"  

(12) Äquivalent zum Einschränkungslayout:

app:layout_constraintEnd_toEndOf="@id/view"

(13) Relatives Layout:

android:layout_alignRight="@id/view"

(13) Äquivalent zum Einschränkungslayout:

app:layout_constraintRight_toRightOf="@id/view"

(14) Relatives Layout:

android:layout_alignTop="@id/view"  

(14) Äquivalent zum Einschränkungslayout:

app:layout_constraintTop_toTopOf="@id/view"

(15) Relatives Layout:

android:layout_alignBaseline="@id/view" 

(15) Äquivalent zum Einschränkungslayout:

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16) Relatives Layout:

android:layout_alignBottom="@id/view"

(16) Äquivalent zum Einschränkungslayout:

app:layout_constraintBottom_toBottomOf="@id/view"

(17) Relatives Layout:

android:layout_toStartOf="@id/view"

(17) Äquivalent zum Einschränkungslayout:

app:layout_constraintEnd_toStartOf="@id/view"

(18) Relatives Layout:

android:layout_toLeftOf="@id/view"  

(18) Äquivalent zum Einschränkungslayout:

app:layout_constraintRight_toLeftOf="@id/view"

(19) Relatives Layout:

android:layout_toEndOf="@id/view"

(19) Äquivalent zum Einschränkungslayout:

app:layout_constraintStart_toEndOf="@id/view"

(20) Relatives Layout:

android:layout_toRightOf="@id/view"

(20) Äquivalent zum Einschränkungslayout:

app:layout_constraintLeft_toRightOf="@id/view"

(21) Relatives Layout:

android:layout_above="@id/view" 

(21) Äquivalent zum Einschränkungslayout:

app:layout_constraintBottom_toTopOf="@id/view"

(22) Relatives Layout:

android:layout_below="@id/view" 

(22) Äquivalent zum Einschränkungslayout:

app:layout_constraintTop_toBottomOf="@id/view"

Naimatullah
quelle
2
Können Sie als Text statt als Bild posten? Damit es mir und auch anderen in Zukunft sehr nützlich sein wird.
Neuer Entwickler
2
Jeder, der anfängt, Constraint-Layouts zu lernen, muss dies sehen. Vielen Dank.
Grantespo
1
Dies sind nützliche Informationen, aber lediglich ein Dokumentationsspeicherauszug, der den Unterschied zwischen ihnen nicht erklärt.
YetAnotherRandomUser
1
Nein, ich habe keine Zeit, in Dokumenten nachzuschauen. Dies ist sicherlich nützlich. Und in einfacher Sprache geschrieben. Upvoting.
CodeToLife
46

Berichtet von @davidpbr ConstraintLayout Leistung

Ich habe zwei ähnliche 7-Kinder-Layouts erstellt, jeweils eines mit einem Elternteil ConstraintLayoutund RelativeLayout. Basierend auf dem Android Studio-Tool zur Methodenverfolgung wird anscheinend ConstraintLayoutmehr Zeit in onMeasure verbracht und zusätzliche Arbeiten in ausgeführt onFinishInflate.

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

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

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

Schneller Vergleich der Methodenverfolgung:

1

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

Dhaval Jivani
quelle
aus dem gleichen Problem: Ich werde dies vorerst schließen - Alpha 4/5 brachte eine ziemliche Leistungsverbesserung. Wir werden es wahrscheinlich weiter verbessern können, aber das könnte nach 1.0 warten.
Oleksandr
Können Sie bitte erklären, in welchem ​​Tool Sie diesen großartigen Vergleich erstellt haben?
Nativ
2
@Nativ Monotirs-> CPU-> Zeiterfassungssymbol
Andrey T
18
Führen Sie denselben Code mit Constraint-Layout aus und profilieren Sie ihn: 1.0.1 auf Nexus 5 mit Android 6.0.1, hier Ergebnisse: Relatives Layout - Init 2 ms bei Measure 30 ms + 16 ms = 62 ms bei Layouyt 7 ms = 9 ms insgesamt 54 ms Constraint Layout - init 7ms Constraint Layout Layoutparameter generieren + Ansicht hinzufügen ~ 7 * 2ms = 14ms On Measure 60ms + 52ms ~ 112ms On Layout 8ms total ~ 141ms Erste Initialisierung des relativen Layouts fast dreimal schneller als Constraint.
Andrey T
2
Das Einschränkungslayout wird eingeführt, damit die Hierarchie der verschachtelten Ansichten reduziert werden kann. Weniger Hierarchie bedeutet also weniger Zeit für das Durchlaufen von oben nach unten im Ansichtsbaum. Was bringt es also, eine verschachtelte Ansichtshierarchie zu erstellen, die im Constraint-Layout möglicherweise nicht benötigt wird, und sie mit dem relativen Layout zu vergleichen, in dem Sie mehr Chancen haben, eine verschachtelte Struktur zu erhalten?
Codepeaker
27

Es folgen die Unterschiede / Vorteile:

  1. Das Einschränkungslayout bietet die doppelte Leistung sowohl des relativen Layouts als auch des linearen Layouts: Legen Sie die relativen Positionen von Ansichten (wie das relative Layout) und die Gewichte für die dynamische Benutzeroberfläche fest (was nur im linearen Layout möglich war).

  2. Eine sehr mächtige Verwendung ist das Gruppieren von Elementen durch Bilden einer Kette. Auf diese Weise können wir eine Gruppe von Ansichten bilden, die als Ganzes auf die gewünschte Weise platziert werden können, ohne eine weitere Hierarchieebene hinzuzufügen, um eine weitere Gruppe von Ansichten zu bilden.

  3. Zusätzlich zu den Gewichten können wir eine horizontale und vertikale Vorspannung anwenden, die nichts anderes als der Prozentsatz der Verschiebung von der Mitte ist. (Vorspannung von 0,5 bedeutet zentral ausgerichtet. Jeder Wert kleiner oder mehr bedeutet entsprechende Bewegung in die jeweilige Richtung).

  4. Ein weiteres sehr wichtiges Merkmal ist, dass es die Funktionen zum Behandeln der GONE-Ansichten respektiert und bereitstellt, sodass Layouts nicht unterbrochen werden, wenn eine Ansicht über Java-Code auf GONE gesetzt wird. Weitere Informationen finden Sie hier: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

  5. Bietet die Möglichkeit der automatischen Anwendung von Einschränkungen mithilfe des Blue Print- und Visual Editor-Tools, mit dem das Entwerfen einer Seite vereinfacht wird.

All diese Funktionen führen zu einer Abflachung der Ansichtshierarchie, wodurch die Leistung verbessert wird und eine reaktionsschnelle und dynamische Benutzeroberfläche erstellt wird, die sich leichter an unterschiedliche Bildschirmgrößen und -dichten anpassen lässt.

Hier ist der beste Ort, um schnell zu lernen: https://codelabs.developers.google.com/codelabs/constraint-layout/#0

Vishu Gupta
quelle
6) ConstraintLayout ermöglicht die Größe von Unteransichten in vordefinierten Verhältnissen medium.com/google-developers/… . Dies ist beispielsweise nützlich, wenn Sie Ihre ImageView in 16: 9 behalten möchten.
Eugene Brusov
15

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

Herrbert74
quelle
Kannst du mir ein Beispiel geben? Nehmen wir an, 3 Tasten sind da. Ich werde die 2. Taste ausblenden und die 3. Taste wird an die 2. Taste mit der ID als btn2 angehängt. Angenommen, ich verstecke die 2. Schaltfläche und wie könnte die 3. Schaltfläche die ID der 2. Schaltfläche finden?
1
Das ist nicht wahr. Wenn Sie die Sichtbarkeit einer Schaltfläche als "UNSICHTBAR" anstelle von "GEGANGEN" festlegen, werden die Einschränkungen nicht aufgehoben. Was mich betrifft, ist der größte Unterschied, wie @Nikola sagte, die Tendenz, die Ihnen hilft, mehr "Responsive" -Ansichten zu erstellen.
Zapotec
@Nothing Nehmen wir an, die Schaltflächen befinden sich untereinander. Selbst wenn Sie tButton 2 ausblenden, befindet es sich immer noch im "View-Vertrag", entweder in Ihrer XML-Datei oder im Code. ConstraintLayout respektiert es und Button 3 befindet sich unter Button 1. In einem RelativeLayout ist Button 2 weg, der Contraint ist damit weg, also befindet sich Button 3 in der Standardposition, also oben links auf dem Bildschirm.
Herrbert74
@zapotec Ich respektiere, dass andere Dinge für dich wichtiger sind, aber für mich ist das ein wirklich cooler Unterschied. Behebt das einzige, was ich in RelativeLayout gehasst habe. Die Verwendung von unsichtbar ist keine Option, da dadurch der Speicherplatz beansprucht wird.
Herrbert74
7

Zusätzlich zu @ dhaval-jivani Antwort.

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

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

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

Relatives Layout

OnCreate: 123 ms

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

Einschränkungslayout

OnCreate: 120,3 ms

Letzte PreformDraw-Zeit - OnCreate-Zeit: 310 ms

Außerdem habe ich den Leistungstest in diesem Artikel überprüft , hier den Code, und festgestellt, dass bei Schleifenzählungen weniger als 100 Constraint-Layout-Varianten während der Ausführung von Aufblasen, Messen und Layout schneller sind als Varianten mit relativem Layout. Und auf alten Android-Geräten wie Samsung S3 mit Android 4.3 ist der Unterschied größer.

Abschließend stimme ich den Kommentaren aus dem Artikel zu :

Lohnt es sich, alte Ansichten von RelativeLayout oder LinearLayout aus umzugestalten?

Wie immer: Es kommt darauf an 🙂

Ich würde nichts umgestalten, es sei denn, Sie haben entweder ein Leistungsproblem mit Ihrer aktuellen Layouthierarchie oder Sie möchten trotzdem wesentliche Änderungen am Layout vornehmen. Obwohl ich es in letzter Zeit nicht gemessen habe, habe ich in den letzten Versionen keine Leistungsprobleme festgestellt. Ich denke, Sie sollten sicher sein, es zu benutzen. Aber - wie gesagt - migrieren Sie nicht nur, um zu migrieren. Tun Sie dies nur, wenn es notwendig ist und davon profitiert. Für neue Layouts verwende ich jedoch fast immer ConstraintLayout. Es ist so viel besser im Vergleich zu dem, was wir vorher hatten.

Andrey T.
quelle
6

Offiziell ConstraintLayoutist viel schneller

In der N-Version von Android bietet die ConstraintLayoutKlasse ähnliche Funktionen RelativeLayout, jedoch zu deutlich geringeren Kosten.

serv-inc
quelle
6

Die eigentliche Frage ist, ob es einen Grund gibt, ein anderes Layout als ein Einschränkungslayout zu verwenden. Ich glaube, die Antwort könnte nein sein.

Für diejenigen, die darauf bestehen, dass sie sich an Programmieranfänger oder dergleichen richten, sollten sie einen Grund dafür liefern, dass sie jedem anderen Layout unterlegen sind.

Constraints-Layouts sind in jeder Hinsicht besser (sie kosten etwa 150.000 in APK-Größe). Sie sind schneller, sie sind einfacher, sie sind flexibler, sie reagieren besser auf Änderungen, sie beheben die Probleme, wenn Elemente verschwinden, sie passen sich besser an radikal unterschiedliche Bildschirmtypen an und sie verwenden nicht so viele verschachtelte Schleifen gezogene Baumstruktur für alles. Sie können alles überall platzieren, in Bezug auf alles, überall.

Sie waren Mitte 2016 etwas verrückt, als der visuelle Layout-Editor einfach nicht gut genug war, aber sie sind so weit fortgeschritten, dass Sie, wenn Sie überhaupt ein Layout haben, ernsthaft darüber nachdenken sollten, sogar ein Einschränkungslayout zu verwenden wenn es das Gleiche tut wie ein RelativeLayoutoder sogar ein einfaches LinearLayout. FrameLayoutseindeutig noch ihren Zweck haben. Aber ich kann derzeit nichts anderes bauen sehen. Wenn sie damit angefangen hätten, hätten sie nichts anderes hinzugefügt.

Tatarisieren
quelle
1
Gibt es einen Beweis dafür, dass es schneller geht?
Rajesh Nasit
1
Ja. Es ist schneller. Das Layout befindet sich in einem einzelnen Löser, anstatt durch einen Baum zu iterieren. Für die meisten Dinge spielt es keine Rolle, da dies beim Aufruf des Layouts erfolgt. Der Ansichtsbaum ist zwar einfach, erstellt jedoch eine Reihe von Ansichten in Ansichten, für die Anrufe erforderlich sind. Während es theoretisch schöner ist, ist es in der Praxis viel einfacher, das Layout in einem Codebit auszuführen, als den gesamten Ansichtsbaum zu durchlaufen. Es würde mit mehr Ansichten beeindruckender werden, aber hier ist ein Benchmark ab Mai: medium.com/@krpiotrek/constraintlayout-performance-c1455c7984d7
Tatarize
Ich stehe vor einer anderen Frage: Soll ich alle vorhandenen Relativelayouts in der App, an der ich arbeite, ersetzen? Wird es die Leistung deutlich verbessern?
Sreekanth Karumanaghat
@SreekanthKarumanaghat es scheint, als würden Sie nie die Zeit zurückerhalten, die erforderlich ist, um diese in der Zeit zu ersetzen, in der Sie wechseln würden. Wir sprechen von 3,5-ms-Zyklen, die in den meisten Fällen auf 3,25 ms abfallen. Wenn es Ihnen eine zusätzliche Funktion gibt oder etwas, das Sie brauchen, dann sicher, aber nur aus Geschwindigkeitsgründen nah. Obwohl wir reden, einen Konvertierungsknopf zu drücken.
Tatarize
5

Die Schlussfolgerung, die ich ziehen kann, ist

1) Wir können UI-Design erstellen, ohne den XML-Teil des Codes zu berühren. Um ehrlich zu sein, hat Google meiner Meinung nach kopiert, wie UI in iOS-Apps gestaltet ist. Es ist sinnvoll, wenn Sie mit der UI-Entwicklung in iOS vertraut sind, aber im relativen Layout Es ist schwierig, die Einschränkungen festzulegen, ohne das XML-Design zu berühren .

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

3) Es gibt auch zusätzliche Dinge außer dem relativen Layout, wie z. B. die kreisförmige relative Positionierung bei der wir eine andere Ansicht relativ zu dieser in einem bestimmten Radius mit einem bestimmten Winkel können, was im relativen Layout nicht möglich ist

Ich sage es noch einmal: Das Entwerfen der Benutzeroberfläche mithilfe des Einschränkungslayouts entspricht dem Entwerfen der Benutzeroberfläche unter iOS. Wenn Sie also in Zukunft mit iOS arbeiten, werden Sie es einfacher finden, wenn Sie das Einschränkungslayout verwendet haben

murali krish
quelle
1

Der einzige Unterschied, den ich festgestellt habe, besteht darin, dass die Abmessungen von Dingen, die in einem relativen Layout per Drag & Drop festgelegt wurden, automatisch im Verhältnis zu anderen Elementen abgeleitet werden. Wenn Sie also die App ausführen, sehen Sie, was Sie sehen. Im Einschränkungslayout können sich die Dinge jedoch verschieben, selbst wenn Sie ein Element in der Entwurfsansicht ziehen und ablegen, während Sie die App ausführen. Dies kann einfach behoben werden, indem die Einschränkungen manuell festgelegt werden. Wenn Sie riskanter vorgehen, klicken Sie mit der rechten Maustaste auf das Element in der Komponentenstruktur, wählen Sie das Untermenü für das Einschränkungslayout aus und klicken Sie dann auf "Einschränkungen ableiten". Hoffe das hilft

Wilson
quelle