使用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>