使用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的合適大小。可能會有一些額外的細化（例如，你是否需要設定所有的比率），但這會給你一個開始。

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>