グリッドレイアウトに均等にテキストを配置したボタン

Question

6つのボタンを2 * 3のグリッドレイアウトに配置し、すべてがグリッドレイアウトセルを均等に占有したいと考えています。ボタンのウェイトを1に設定すると、ボタンのいくつかに少し長いテキストを追加するまではすべて問題ありません。あなたは算術平均や標準偏差などのボタンが表示され、他のボタンよりも多くのスペースを占有したよう

<GridLayout 
android:layout_width="match_parent" 
android:layout_height="165dp" 
android:columnCount="3" 
android:rowCount="2"> 

<Button 
    android:id="@+id/arithmeticMeanButton" 
    android:layout_columnWeight="1" 
    android:layout_rowWeight="1" 
    android:text="Arithmetic\nMean" 
    android:textSize="18sp" /> 

<Button 
    android:id="@+id/modeButton" 
    android:layout_columnWeight="1" 
    android:layout_rowWeight="1" 
    android:text="Mode" 
    android:textSize="18sp" /> 

<Button 
    android:id="@+id/rangeButton" 
    android:layout_columnWeight="1" 
    android:layout_rowWeight="1" 
    android:text="Range" 
    android:textSize="18sp" /> 

<Button 
    android:id="@+id/medianButton" 
    android:layout_columnWeight="1" 
    android:layout_rowWeight="1" 
    android:text="Median" 
    android:textSize="18sp" /> 

<Button 
    android:id="@+id/varianceButton" 
    android:layout_columnWeight="1" 
    android:layout_rowWeight="1" 
    android:text="Variance" 
    android:textSize="18sp" /> 

<Button 
    android:id="@+id/standardDeviationButton" 
    android:layout_columnWeight="1" 
    android:layout_rowWeight="1" 
    android:text="Standard\nDeviation" 
    android:textSize="18sp" /> 
</GridLayout> 

：ここに私のXMLコードです。すべてのボタンがレイアウト内に均等に表示されるようにするにはどうすればよいですか？

Answer 1

短い答え

すべての6つのボタンにこれらの属性を追加します。

android:layout_width="0dp" 
android:layout_height="0dp" 

長い量の概念は、親ビュー内の過剰スペースの配分に関し、

に答えます。あなたの例では、テキストの長さが最も長いボタンは、システムが最初に各ボタンにテキストに合わせて十分な幅を与えてから、各ボタンに残りの幅の等しい部分を与えるために広くなります。それぞれのボタンに固有の幅が全くないように設定すると、システムは画面幅の3分の1をそれぞれに与えます。

ただし、GridLayoutでのウェイトのサポートはAPI 21でのみ追加されているため、古いAPIバージョンでアプリケーションを実行する必要がある場合、このソリューションは0サイズのボタンをたくさん提供します。

2x3グリッドが必要な場合は、代わりにConstraintLayoutを使用してレイアウトを実装できます。 33％と67％で2つの垂直方向のガイドラインを作成し、50％で水平方向のガイドラインを1つ作成し、それらのガイドラインと親を基準にボタンを配置します。

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="165dp"> 

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

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

    <android.support.constraint.Guideline 
     android:id="@+id/guidelineRow1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     app:layout_constraintGuide_percent="0.5"/> 

    <Button 
     android:id="@+id/arithmeticMeanButton" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:textSize="18sp" 
     android:text="Arithmetic\nMean" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@id/guidelineColumn1" 
     app:layout_constraintBottom_toTopOf="@id/guidelineRow1"/> 

    <Button 
     android:id="@+id/modeButton" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:textSize="18sp" 
     android:text="Mode" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toRightOf="@id/guidelineColumn1" 
     app:layout_constraintRight_toLeftOf="@id/guidelineColumn2" 
     app:layout_constraintBottom_toTopOf="@id/guidelineRow1"/> 

    <Button 
     android:id="@+id/rangeButton" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:textSize="18sp" 
     android:text="Range" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toRightOf="@id/guidelineColumn2" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toTopOf="@id/guidelineRow1"/> 

    <Button 
     android:id="@+id/medianButton" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:textSize="18sp" 
     android:text="Median" 
     app:layout_constraintTop_toBottomOf="@id/guidelineRow1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@id/guidelineColumn1" 
     app:layout_constraintBottom_toBottomOf="parent"/> 

    <Button 
     android:id="@+id/varianceButton" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:textSize="18sp" 
     android:text="Variance" 
     app:layout_constraintTop_toBottomOf="@id/guidelineRow1" 
     app:layout_constraintLeft_toRightOf="@id/guidelineColumn1" 
     app:layout_constraintRight_toLeftOf="@id/guidelineColumn2" 
     app:layout_constraintBottom_toBottomOf="parent"/> 

    <Button 
     android:id="@+id/standardDeviationButton" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:textSize="18sp" 
     android:text="Standard\nDeviation" 
     app:layout_constraintTop_toBottomOf="@id/guidelineRow1" 
     app:layout_constraintLeft_toRightOf="@id/guidelineColumn2" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent"/> 

</android.support.constraint.ConstraintLayout>