web-dev-qa-db-ja.com

ConstraintLayoutの2つのビューの一番下に配置する方法は？

HeaderViewAとHeaderViewBの2つのヘッダービューがあります。これらのビューは、可視性visibleまたはgoneの任意の組み合わせを持つことができます。

BigViewを配置する必要がありますunderthelowestHeaderViewA/HeaderViewBのいずれか。

ConstraintLayoutにネストせずにこれは可能ですか？

enter image description here

androidandroid-layoutandroid-support-libraryandroid-constraintlayout
51
ZakTaccardi

Constraint-layout v1.1.0で導入されたBarrierクラスで可能になりました。

だからここにあなたの特定のケースのためのソリューションがあります：

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

このレイアウトを使用した結果は次のとおりです。

View on simulator

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>

注意app:layout_constraintWidth_default="wrap"（widthを0dpに設定）。設定されている場合、ウィジェットはwrap_contentを使用する場合と同じサイズになりますが、制約によって制限されます（つまり、それらを超えて展開されません）およびapp:layout_constraintVertical_bias="1.0"。バイアスを使用して、BigViewをその親の一番下に引き出します。

1
Johnny