web-dev-qa-db-ja.com

ConstraintLayoutのチェーンを含むビューのグループを整列します

ConstraintLayoutに3つのビューがあり、次のように配置したいと思います。

enter image description here

現在、ビュー[〜＃〜] b [〜＃〜]および[〜＃〜] c [〜 ＃〜]は垂直チェーンを形成し、[〜＃〜] a [〜＃〜]は相対中心になりますチェーンに。しかし、グループ全体を親の中心に配置するにはどうすればよいですか？ビュー[〜＃〜] c [〜＃〜]はGONEである可能性があることに注意してください。

androidandroid-layoutandroid-constraintlayout
15
Euro

これは、レイアウトをネストしない視覚的な答えです。

enter image description here

ステップ

  1. チェーンとパック BとCを垂直に
  2. AとCを水平にチェーンしてパックします
  3. BとCの水平方向の中心を揃えます
  4. センターAを垂直に

XMLレイアウト

<?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=".MainActivity">

    <TextView
        Android:id="@+id/textView"
        Android:layout_width="69dp"
        Android:layout_height="67dp"
        Android:background="#fb0000"
        Android:gravity="center"
        Android:text="A"
        Android:textColor="#000000"
        Android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        Android:id="@+id/textView2"
        Android:layout_width="154dp"
        Android:layout_height="73dp"
        Android:background="#2000ff"
        Android:gravity="center"
        Android:text="B"
        Android:textColor="#ffffff"
        Android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintEnd_toEndOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        Android:id="@+id/textView3"
        Android:layout_width="187dp"
        Android:layout_height="61dp"
        Android:background="#f1a500"
        Android:gravity="center"
        Android:text="C"
        Android:textColor="#000000"
        Android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

</Android.support.constraint.ConstraintLayout>

個人的な意見

Flutter に切り替えます。レイアウトはConstraintLayoutよりもはるかに簡単です。

15
Suragch

グループを中央に配置する最も簡単で理解しやすい方法は、ビューをConstraintLayout内にネストし、それ自体がConstraintLayoutに次のようにネストすることによってグループにすることです。

<Android.support.constraint.ConstraintLayout 
    Android:id="@+id/outerLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <Android.support.constraint.ConstraintLayout
        Android:id="@+id/innerLayout"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        [A, B, and C views here...]

    </Android.support.constraint.ConstraintLayout>
</Android.support.constraint.ConstraintLayout>

外側のレイアウトは、ViewGroupを使用するLinearLayoutなどの別のタイプのgravityにすることができます。

チェーン、バリア、ガイドラインの創造的な使用など、他の解決策も可能ですが、概説された解決策の単純さが私の意見では最も魅力的です。

1
Cheticamp