Wie positioniere ich unter der niedrigsten von zwei Ansichten in ConstraintLayout?

Lesezeit: 5 Minuten

Ich habe zwei Header-Ansichten, HeaderViewA und HeaderViewB. Diese Ansichten können eine beliebige Kombination von Sichtbarkeiten haben visible oder gone.

Ich brauche BigView positioniert werden unter das am niedrigsten von beiden HeaderViewA/HeaderViewB.

Geht das ohne einzunisten ConstraintLayout?

Geben Sie hier die Bildbeschreibung ein

  • Ich würde gerne eine andere Antwort hören, aber das ist afaik nicht möglich.

    – F43nd1r

    21. Februar 2017 um 1:31 Uhr

  • Interessant, sieht aber nicht nur über XML möglich aus. Sie möchten keine verschachtelten Ansichten, aber wenn Sie für programmgesteuerte Manipulationen offen sind, können Sie möglicherweise verwenden Beschränkungssatz.

    – Cheticamp

    21. Februar 2017 um 15:17 Uhr

  • Warum ist das Verschachteln eines ConstraintLayout ein Deal-Breaker?

    – Alex Meuer

    28. Juli 2017 um 9:31 Uhr

  • @AlexMeuer Verschachtelte Layouts wirken sich negativ auf die Leistung aus (siehe diesen Bericht Verstehen der Leistungsvorteile von ConstraintLayout). Das ist also das Hauptziel, Ihr Layout so flach wie möglich zu halten, und ConstraintLayout hat alle notwendigen Funktionen dafür.

    – Eugen Brusov

    4. Oktober 2017 um 10:35 Uhr

  • @EugeneBrusov Also habe ich es entdeckt. Ich glaube, mein Kommentar war, bevor die Barrierefähigkeit freigegeben wurde. Hier ist eine etwas andere Sicht auf ein ähnliches Problem.

    – Cheticamp

    5. Oktober 2017 um 16:07 Uhr


Jetzt ist es mit der Barrier-Klasse möglich, die in Constraint-Layout v1.1.0 eingeführt wurde.

Hier ist die Lösung für Ihren speziellen Fall:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.eugene.test10.MainActivity">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#EEEEEE"
        android:text="TEXT_VIEW_1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView2"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#DDDDDD"
        android:text="TEXT_VIEW_2"
        android:visibility="gone"
        app:layout_constraintLeft_toRightOf="@+id/textView1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Barrier
        android:id="@+id/labelBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView1,textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#CCCC00"
        android:text="TEXT_VIEW_3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/labelBarrier" />

</android.support.constraint.ConstraintLayout>

Hier sind Ergebnisse für die Verwendung dieses Layouts:

Ansicht auf Simulator

Sie können diese Schritt-für-Schritt-Anleitung auf Codelab beziehen https://codelabs.developers.google.com/codelabs/constraint-layout/#10.

  • Muss ich in meinem Projekt zuerst etwas tun, um Barriers zu implementieren?

    – Zerato

    15. November 2017 um 13:57 Uhr

  • @Zerato müssen Sie hinzufügen 'com.android.support.constraint:constraint-layout:1.1.0-beta3' Abhängigkeit von der Gradle-Datei Ihres Moduls und fügen Sie auch das Maven-Repository zur Gradle-Datei des Projekts hinzu. Alle Abhängigkeiten finden Sie in diesem GitHub-Projekt github.com/googlecodelabs/constraint-layout

    – Eugen Brusov

    15. November 2017 um 14:56 Uhr

  • Für diejenigen, die über das GUI-Tool auf diese Barrieren zugreifen möchten, kann es nicht mit der Textansicht, Bildansicht usw. durchsucht werden, sondern im Dropdown-Menü mit I-Balken-Symbolen, das Führungslinien enthält.

    – Anders8

    22. Juli 2018 um 19:29 Uhr

  • es ist androidx.constraintlayout.widget.Barrier für androidx

    – Mussa

    4. September 2019 um 19:53 Uhr

  • app:i_love_these=”android_x,constraint_layout” />

    – Siddharth Jaswal

    20. Juni 2020 um 11:04 Uhr

Benutzer-Avatar
Johnny

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/header_view_a"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_orange_light"
        android:gravity="center"
        android:text="HeaderViewA "
        android:layout_marginBottom="@dimen/sixteenDP"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/header_view_b"
        app:layout_constraintEnd_toStartOf="@+id/header_view_b"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/header_view_b"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_green_light"
        android:gravity="center"
        android:text="HeaderViewB"
        android:textAlignment="center"
        android:textSize="30sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintStart_toEndOf="@+id/header_view_a"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.4"/>

    <TextView
        android:id="@+id/big_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center"
        android:text="BigView"
        android:textAlignment="center"
        android:textSize="@dimen/list_item_height"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintVertical_bias="1.0"/>

</android.support.constraint.ConstraintLayout>

Achten Sie auf app:layout_constraintWidth_default="wrap" (mit Breite auf 0dp gesetzt). Wenn gesetzt, hat das Widget die gleiche Größe wie bei der Verwendung von wrap_content, wird aber durch Einschränkungen begrenzt (dh es wird nicht darüber hinaus erweitert) und app:layout_constraintVertical_bias="1.0". Verwenden Sie Bias, um BigView an das Ende seines übergeordneten Elements zu ziehen.

1310920cookie-checkWie positioniere ich unter der niedrigsten von zwei Ansichten in ConstraintLayout?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy