ConstraintLayout：均等に分散された正方形のビュー

Question

ConstraintLayoutを使用して均等に5つの四角形を得るにはどうすればいいですか？フレキシブルサイズは画面の幅によって異なりますか？

Answer 1

PRECENTAGEと

使用ガイドライン、このような何か：

<?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:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline" 
    app:layout_constraintGuide_begin="316dp" 
    android:orientation="horizontal" /> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/guideline2" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline2" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.2" /> 

<Button 
    android:id="@+id/button3" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline2" 
    app:layout_constraintRight_toLeftOf="@+id/guideline3" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline3" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.4" /> 

<Button 
    android:id="@+id/button4" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline3" 
    app:layout_constraintRight_toLeftOf="@+id/guideline4" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.0" 
    app:layout_constraintVertical_bias="0.502" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline4" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.6" /> 

<Button 
    android:id="@+id/button5" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline4" 
    app:layout_constraintRight_toLeftOf="@+id/guideline5" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintHorizontal_bias="0.5" 
    app:layout_constraintVertical_bias="0.503" /> 

<android.support.constraint.Guideline 
    android:layout_width="wrap_content" 
    android:layout_height="0dp" 
    android:id="@+id/guideline5" 
    android:orientation="vertical" 
    app:layout_constraintGuide_percent="0.8" /> 

<Button 
    android:id="@+id/button6" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginTop="8dp" 
    android:text="Button" 
    app:layout_constraintBottom_toTopOf="@+id/guideline" 
    app:layout_constraintLeft_toLeftOf="@+id/guideline5" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 
</android.support.constraint.ConstraintLayout> 

右クリックConstraintLayout上/垂直/ Horisontalガイドラインを追加し、ガイドラインを追加するには... が、それはあなた

お役に立てば幸いです

乾杯

Answer 2

親のすべての側面に接続されているウィジェットのチェーンを作成する必要がありますコンテナ（この親コンテナのディメンションを必要な/必要なものに設定します）。正方形のパターンを確保するには、各ウィジェットにapp:layout_constraintDimensionRatio="1:1"という制約を設定する必要があります。例えば：

<?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:orientation="horizontal" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<FrameLayout 
    android:id="@+id/frame1" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toLeftOf="@+id/frame2" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

<FrameLayout 
    android:id="@+id/frame2" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toRightOf="@+id/frame1" 
    app:layout_constraintRight_toLeftOf="@+id/frame3" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

<FrameLayout 
    android:id="@+id/frame3" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toRightOf="@+id/frame2" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    /> 

</android.support.constraint.ConstraintLayout> 

Answer 3

あなただけの最初のビューにビューに制約を追加する必要があります。上部と下部の両方に。

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

<android.support.v7.widget.CardView 
    android:id="@+id/uno" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorPrimary" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toStartOf="@+id/dos" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    android:layout_margin="8dp"/> 

<android.support.v7.widget.CardView 
    android:id="@+id/dos" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorPrimaryDark" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toStartOf="@+id/tres" 
    app:layout_constraintStart_toEndOf="@+id/uno" 
    app:layout_constraintTop_toTopOf="@id/uno" 
    app:layout_constraintBottom_toBottomOf="@id/uno"/> 

<android.support.v7.widget.CardView 
    android:id="@+id/tres" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:cardBackgroundColor="@color/colorAccent" 
    app:layout_constraintDimensionRatio="1:1" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toEndOf="@+id/dos" 
    app:layout_constraintTop_toTopOf="@id/uno" 
    app:layout_constraintBottom_toBottomOf="@id/uno" />