web-dev-qa-db-fra.com

Comment se positionner sous la plus basse des deux vues dans ConstraintLayout?

J'ai deux vues d'en-tête, HeaderViewA et HeaderViewB. Ces vues peuvent avoir n'importe quelle combinaison de visibilité visible ou gone.

J'ai besoin de BigView pour être positionné sous le plus bas de HeaderViewA/HeaderViewB.

Est-ce possible sans imbriquer dans ConstraintLayout?

enter image description here

androidandroid-layoutandroid-support-libraryandroid-constraintlayout
51
ZakTaccardi

C'est maintenant possible avec la classe Barrier, introduite dans constraint-layout v1.1.0.

Alors, voici la solution pour votre cas particulier:

<?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>

Voici les résultats pour utiliser cette mise en page:

View on simulator

Vous pouvez consulter ce guide étape par étape sur Codelab https://codelabs.developers.google.com/codelabs/constraint-layout/#1 .

72
Eugene Brusov
<?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>

attention pour app:layout_constraintWidth_default="wrap" (avec largeur définie sur 0dp ). Si défini, le widget aura la même taille que si vous utilisiez wrap_content, mais sera limité par des contraintes (c'est-à-dire qu'il ne s'étendra pas au-delà de celles-ci) et app:layout_constraintVertical_bias="1.0". Utilisez le biais pour placer BigView au bas de son parent.

1
Johnny