Wie center-mehrere Ansichten zusammen mit ConstraintLayout?

Hintergrund

Google hat angekündigt, ein neues layout namens "ConstraintLayout", die angeblich die ultimative layout, das konnte Sie auf alle ersetzen des layouts während des Aufenthaltes flat (ohne verschachtelte layouts) und haben eine bessere Leistung.

Das problem

Sache ist, ich kaum sehen, alle tutorials für die es, die mir helfen könnte in dieser Angelegenheit, anders als die video vorgestellt auf der Google IO.

Was ich versuche zu tun ist, da ich ein vertikal-zentriert LinearLayout in einem anderen layout - konvertieren Sie beide in einem einzigen ConstraintLayout.

Nachdem alle, dies ist der Zweck dieser neuen layout...

Layout möchte ich mit umgehen sieht wie folgt aus:

Wie center-mehrere Ansichten zusammen mit ConstraintLayout?

Beachten Sie, dass die Ansichten in der Mitte sind nur vertikal zentriert, und dass die 2 textViews sind auf der rechten Seite der Bildansicht, die auch vertikal zentriert.

Das ganze funktioniert auch mit RelativeLayout, die das LinearLayout des 2 TextViews, aber ich wünschte zu wissen, wie zu konvertieren Sie Sie in einem einzigen ConstraintLayout.

Hier ist eine Beispiel-XML von dem, was ich gezeigt habe:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/listPreferredItemHeightSmall">

    <ImageView
        android:id="@+id/appIconImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/appDetailsContainer"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/appIconImageView"
        android:layout_toLeftOf="@+id/overflowView"
        android:layout_toRightOf="@+id/appIconImageView"
        android:layout_toStartOf="@+id/overflowView"
        android:orientation="vertical">

        <TextView
            android:id="@+id/appLabelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>

        <TextView
            android:id="@+id/appDescriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"

        tools:src="@drawable/ic_more_vert_black_24dp"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/isSystemAppImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/overflowView"
        android:layout_alignLeft="@+id/overflowView"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/overflowView"
        android:layout_alignStart="@+id/overflowView"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:srcCompat="@drawable/ic_warning_black_24dp"
        tools:ignore="ContentDescription"
        tools:src="@drawable/ic_warning_black_24dp"/>

</RelativeLayout>

, Was ich versucht habe

Habe ich versucht zu Lesen, einige Artikel und sehen Sie sich einige videos von Google :

Das hat nicht geholfen, also habe ich versucht, es zu benutzen, in der Hoffnung ich werde es herausfinden, wie um ihn selbst zu benutzen.
Aber ich kann nicht herausfinden, wie es zu tun. Ich habe versucht mit der Funktion zum konvertieren von layouts, aber dieses macht ein großes Durcheinander der Ansichten und stellt zusätzliche Margen, die ich nicht haben möchte.

Die Frage

Wie kann ich umwandeln der 2-layouts in einem einzigen ConstraintLayout ?

diese hier: "Arbeitsbereich".co/1hmJDCgg.png?
Ein bisschen, aber der zentrierte Ansichten haben 2 TextViews, eine unter der anderen. Nicht ein. Derzeit befinden Sie sich innerhalb eines LinearLayout, die zentriert ist. Auch das LinearLayout ist zwischen den rechten und linken Ansichten.
haben Sie versucht, die automatische Konvertierung im design-Bereich? "Convert <your_layout> zu ConstraintLayout"?
Ja. und das Ergebnis hat nicht glätten Sie es überhaupt. Sie können sehen, meine versuche hier: code.google.com/p/android/issues/detail?id=212116

InformationsquelleAutor android developer | 2016-05-29

Werfen Sie einen Blick auf meine Antwort hier.

ContraintLayout enthält eine feature - Chains -, der es möglich macht, umzusetzen, was Sie fordern:

Ketten liefern-group-ähnliches Verhalten in einem einzigen Achse (horizontal oder
vertikal).

Einen Satz von widgets werden als eine Kette wenn Sie eine verknüpfte gemeinsam über
eine bi-direktionale Verbindung

Einmal eine Kette erstellt wird, gibt es zwei Möglichkeiten:

Verbreitung der Elemente in den verfügbaren Platz

Eine Kette kann auch "verpackt", in diesem Fall die Elemente sind gruppiert

Als für Ihren Fall, müssen Sie packen Sie Ihre label und description TextViews und zentrieren Sie Sie in übergeordneten vertikal:

(stellen Sie sicher, Sie verwenden eine version von ConstraintLayout unterstützt Ketten)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"/>

    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button\nMkay"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>

Update 25-06-2019 (@Saeid Z):

Nun in constraint-layout 1.1.3 wir müssen app:layout_constraintHorizontal_chainStyle="packed" statt app:layout_constraintVertical_chainPacked="true"

Wie hält es die Gruppe zusammen zu Ansichten?
Es verwendet ein neues feature von ConstraintLayout - Ketten. Überprüfen Sie heraus meine andere Antwort mit mehr Infos und links auf
Ich meine, Woher weiß er, welche Ansichten miteinander zu verketten. In LinearLayout, es sind alle Ansichten, die in ihm ist.
Die definition der Kette ist ", Ein Satz von widgets werden als eine Kette wenn Sie eine verknüpfte gemeinsam über eine bi-direktionale Verbindung" - zwei Ansichten im Beispiel sind angewiesen auf andere (die textView wird über die-Taste und die Taste ist unterhalb der textView), so nennt man Sie eine Kette und gruppiert. Bitte Folgen Sie den links und finden Sie mehr info über es.
Aber es gibt mehrere Ansichten, die davon abhängen übereinander. Woher weiß er, das sollte in die Gruppe der Kette ?
Ich weiß nicht, die details der Implementierung. Was ich weiß ist, dass die Ansichten, die sich aufeinander beziehen in Ihre Zwänge machen eine Kette, und Ihr Verhalten ist definiert durch seinen ersten Mitglied.
Dies funktioniert nur, wenn du center das label und droid Bildansicht in der übergeordneten. Sie können Sie vertikal ausgerichtet eine im Vergleich zu den anderen. Siehe @Marcin Antwort statt.
Die Frage war, wie genau, um die Mitte der Blick in den übergeordneten, und nicht ausrichten relativ zueinander. Ich denke, dass down-voting-eine Antwort, die keine Antwort auf Ihre Frage, aber die Antworten, die die OP ' s Frage, ist unangemessen.
Vereinbart wurde, bearbeitete ich leicht die Antwort, um es deutlicher. Sobald ich kann, werde ich entfernen, der downvote
Vielen Dank für all die Erklärungen.
Fedorov Dank. Jetzt in constraint-layout 1.1.3 müssen wir nutzen, app:layout_constraintHorizontal_chainstyle="gepackt" statt app:layout_constraintVertical_chainPacked="true"

InformationsquelleAutor Yury Fedorov

9

Zur Mitte etwas vertikal oder horizontal, legen Sie eine entgegenstehende Einschränkung auf das layout.

Vertikal Zentriert
```
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
```
Horizontal Zentriert
```
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
```
- Sehen Sie sich bitte zunächst how-to-Antwort Diese Frage ist beantwortet, bevor Sie, natürlich, können Sie fügen Sie hier Ihre Antwort ein. Aber Sie Müssen verstehen, einige Punkte, bevor Sie antwortet. Erste, nicht eine Antwort, die zuvor Hinzugefügt, mit dem gleichen code oder einen Vorschlag. Zweitens, werden Sie nicht hinzufügen eine übermäßig komplizierte Antwort, wenn der Benutzer gebeten hat, ganz speziell über das problem und was er braucht, diese zu lösen. Drittens, Sie können einen Kommentar hinzufügen, wenn Sie vorschlagen möchten, etwas über die Antwort oder die Frage.
- Danke, einfach und klar.
- dieses center nur eine einzige Ansicht
InformationsquelleAutor Kevin
5

Set app:layout_constraintVertical_bias="0.5" den Ansichten werden müssen vertikal zentriert, bias-Attribut funktioniert nur, wenn Sie angeben, die Einschränkungen für die Grenzen (z.B. top-und bottom für die vertikale Vorspannung, Links und rechts für die horizontale Neigung)

Beispiel:
```
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>
```
Habe es in mein layout hier: https://github.com/hidroh/tldroid/blob/master/app/src/main/res/layout/activity_main.xml, ziemlich ähnliches layout, obwohl ich position Dinge auf 1/3 der Bildschirmhöhe.
- Ich verstehe es nicht. Ich habe 2 TextViews. Ich könnte mehr haben. Ich will, dass Sie vertikal zentriert zusammen. Was soll ich tun?
- Mein layout hat 2 TextViews. Ich habe nur ein Beispiel geben, wie zu center 1 Ansicht vertikal innerhalb ConstraintLayout. Wenn Sie möchten, einen ganzen Haufen von Ihnen eingestellten bias-Attribut für jeden von Ihnen. In meinem Fall habe ich nur auf 1 gesetzt TextView, und verwenden Sie es als Anker für die anderen.
- Können Sie bitte zeigen, wie es zu tun, für den Fall, den ich hier vorgestellt habe? eine TextView über die andere, während beide, zusammen, sind zentriert ?
- Hat man sich bei der Github-Datei in meine Antwort? Es ist fast identisch, nur ändern Sie den bias-Wert in meinem layout auf 0,5 statt 0,3.
InformationsquelleAutor hidro
5

EDIT: Diese Antwort geschrieben hatte, bevor Ketten zur Verfügung standen. Bitte verwenden Sie Ketten jetzt, siehe oben Antwort: https://stackoverflow.com/a/40102296/1402641

Ich jetzt glauben, dass Ihre einzige Wahl wäre, um wickeln Sie die zwei text-Ansichten in einem anderen layout - wahrscheinlich linear layout am besten passt dieser situation.

Aber das team hinter constraint-layout, sagte Sie einführen wollen "virtuellen Container", welche dazu dienen, genau diesen use-case: gruppieren Sie zwei oder mehr Ansichten zusammen und legen Sie eine Einschränkung (wie Zentrierung vertikal) auf dem Behälter. Die Idee ist, dass es sich nicht um eine vollständige geschachtelte layout innerhalb der constraint-layout, sondern einfach etwas, dass constraint-layout verwendet, um die position der Kinder - daher ist es eine bessere Leistung als Verschachtelung.

Erwähnen Sie es in Ihre I/O-talk (verbunden mit der genauen Zeit). Also ich denke, bleiben Sie dran.
- Aber das RelativeLayout hat bereits ein LinearLayout innen. Ist das nicht der springende Punkt: glätten Sie alle zu einem einzigen layout? Ist mein Szenario, das Besondere?
- Ja, der Punkt ist, zu reduzieren. Ihr Szenario ist nichts besonderes, nur noch nicht verarbeitet. Es ist gerade auf version alpha2. Virtuelle Gruppen kommen mit Ihren Szenario.
- Wie verwenden Sie "virtuelle Gruppen" ? Gibt es irgendein Beispiel dafür ? Ich glaube nicht, dass ich es sah.
- Virtuelle Gruppen, die noch nicht existiert. Es ist ein Konzept, dass das team hinter ConstraintLayout einführen wollen. Sie beschlossen release Anfang, ohne alle features und ohne die Bearbeitung der Häufig auftretenden Fällen.
- Woher wissen Sie all dies? Ich erinnere mich nicht, davon zu hören in dem Vortrag von Google-IO , und auch nicht in jedem Artikel.
- Tatsächlich habe ich es geschafft, zu finden in der ich/O-talk: -), Aber Sie nannte es "virtuellen Container", also werde ich Bearbeiten meine Antwort und den link posten.
- Seltsam. Ich sah es auch. Wahrscheinlich verpasste dieses Teil, oder dachte, es ist bereits verfügbar. Danke. Da diese noch nicht verfügbar ist, wie es scheint, werde ich nur mehr +1 Ihre post und Kommentare. Sobald man eine funktionierende Lösung für dieses (mit den neuen "virtuellen Gruppen"), ich nehme diese Antwort
InformationsquelleAutor Marcin Koziński
2

Werfen Sie einen Blick in meinem Beispiel (Center-Komponenten in ConstraintLayout)

Jetzt könnte man center "Bild" (einschränken Links-oben-unten), beschränken "label" oben auf "Bild" oben, einschränken "Beschreibung" top "label" unten.
Im Beispiel unten habe ich angepasst haben, die Höhe der Buttons mit zwei textviews auf der rechten Seite (das ist dein Fall). Anderen textviews sind begrenzt wie auf den obigen link.

UPDATE: die Antwort auf Ihren Kommentar unter:

Habe ich installiert Ihr die app und diese ist nur ich kann denken derzeit. Da es ein ViewHolder layout, layout_height kann eingestellt werden, um wrap_content, oder Sie können es zu beheben, wenn Sie möchten. Ich kann Ihnen xml, wenn Sie wollen, ich will nicht mit der Flut die Antwort.

Top TextView Links-Einschränkung beschränkt sich auf die Rechte-Einschränkung der Bildansicht. Auch, top TextView -> top-Einschränkung gezwungen, an der Oberseite des Behälters, so ist Recht. Unten TextView ist begrenzt bis zum unteren Ende des Behälters. TextViews in der Mitte sind gezwungen, an Breite anpassen " top-TextView und bekam keine Verbindung mit Bildansicht.
- Ich fragte über das zentrieren in 2 Ansichten (zusammen). Nicht ein.
- ja ich bin mir bewusst, dass ich angeboten haben, ein workaround. Es optisch gleich aussieht. Problem bleibt natürlich, da beide von uns wollen Mitte mehrere Komponenten gegenseitig eingeschränkt.
- Eigentlich könnte es ein schöner workaround in meinem Fall. Das layout ich benutze, ist für Elemente in RecyclerView (in dieser app: play.google.com/store/apps/details?id=com.lb.app_manager ) . Vielleicht könnte ich die top TextView zu nehmen, die oben (noch mit der Schwerkraft unten), und die unteren TextView zu nehmen, die unten (unter den top TextView). Denken Sie, es kann gleich Aussehen?
- ich aktualisiert meine Antwort mit layout-spezifischen ein in der app. Hoffe, dass es helfen könnte.
- Ich werde es versuchen, wenn ich Zeit habe. Wie ich mitbekommen habe, erst vor kurzem haben Sie einen Fehler behoben, der verhindert, dass das neue layout verwendet werden, die innerhalb RecyclerView.
InformationsquelleAutor bajicdusko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.