Android Constraintlayoutを使って均等に分散した四角い行を作成する

Question

レイアウトを作成するのに苦労しているのは、利用可能なスペースを埋めるように広がる均等に分散した四角形のチェーンです。

私は最終的にレイアウトは次のようになりたい：

考え方は異なるアスペクト比を持つ携帯電話にこの四角形は、余分なスペースを使用するように少し成長することです。

私は、このレイアウト

<?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:id="@+id/activity_main_inference" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="32dp" 
     android:layout_height="0dp" 
     android:text="All" 
     app:layout_constraintDimensionRatio="w,1:1" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/textView2" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="32dp" 
     android:layout_height="0dp" 
     android:text="2" 
     app:layout_constraintDimensionRatio="w,1:1" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintLeft_toRightOf="@+id/textView1" 
     app:layout_constraintRight_toLeftOf="@id/textView4"/> 

    <TextView 
     android:id="@+id/textView4" 
     android:layout_width="32dp" 
     android:layout_height="0dp" 
     android:text="4" 
     app:layout_constraintDimensionRatio="w,1:1" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintLeft_toRightOf="@+id/textView2" 
     app:layout_constraintRight_toRightOf="parent" /> 

</android.support.constraint.ConstraintLayout> 

でこれは、このようになっていることの重みを持つチェーンを作成するために管理：

これはTextviewsの幅が修正されていることを除いて結構ですが32dp。 幅をゼロに設定すると、マッチ制約によって、最初に、すべてのスペースをカバーするために必要な幅が決まり、ビューを正方形にするために高さを幅に設定することが期待されました。

悲しいことに、私のレイアウトは次のようになります。

は私がContraintLayoutで可能達成したいレイアウトのこのアイデアですか？

Answer 1

私はそれを行うにはよりエレガントな方法があると思いますが、私はガイドラインの助けを借りて、この種の設計を作成することができました：

<?xml version="1.0" encoding="utf-8"?> 

<TextView 
    android:id="@+id/textView1" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:gravity="center" 
    android:text="All" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toStartOf="@+id/guideline" 
    app:layout_constraintHorizontal_chainStyle="spread_inside" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 


<android.support.constraint.Guideline 
    android:id="@+id/guideline" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.50" /> 

<TextView 
    android:id="@+id/textView2" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:gravity="center" 
    android:text="1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintHorizontal_chainStyle="spread_inside" 
    app:layout_constraintStart_toStartOf="@+id/guideline" 
    app:layout_constraintTop_toTopOf="parent" /> 

Answer 2

ここには、最初のTextViewの適切なサイズに応じて、探していることを行うための1つの方法があります。追加の洗練があるかもしれませんが（例えば、すべての比率が設定されている必要があります）、これが始まります。

XMLレイアウト

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/activity_main_inference" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="0dp" 
     android:layout_marginStart="16dp" 
     android:layout_marginTop="16dp" 
     android:background="@android:color/darker_gray" 
     android:gravity="center" 
     android:text="All" 
     app:layout_constraintDimensionRatio="w,1:1" 
     app:layout_constraintEnd_toStartOf="@+id/textView2" 
     app:layout_constraintHorizontal_chainStyle="spread" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="16dp" 
     android:layout_marginStart="16dp" 
     android:layout_marginTop="0dp" 
     android:background="@android:color/darker_gray" 
     android:gravity="center" 
     android:text="2" 
     app:layout_constraintBottom_toBottomOf="@id/textView1" 
     app:layout_constraintDimensionRatio="w,1:1" 
     app:layout_constraintEnd_toStartOf="@id/textView4" 
     app:layout_constraintStart_toEndOf="@+id/textView1" 
     app:layout_constraintTop_toTopOf="@+id/textView1" /> 

    <TextView 
     android:id="@+id/textView4" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginEnd="16dp" 
     android:layout_marginStart="0dp" 
     android:background="@android:color/darker_gray" 
     android:gravity="center" 
     android:text="4" 
     app:layout_constraintBottom_toBottomOf="@+id/textView1" 
     app:layout_constraintDimensionRatio="w,1:1" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toEndOf="@+id/textView2" 
     app:layout_constraintTop_toTopOf="@+id/textView2" /> 

</android.support.constraint.ConstraintLayout>