Unterschiede zwischen ConstraintLayout und RelativeLayout

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

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.

Dies ist völlig meinungsbasiert und mein Eindruck von ConstraintLayout

Ä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"

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:

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

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

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.

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.

Offiziell ConstraintLayoutist viel schneller

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

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.

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

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