【備忘録】ConstraintLayoutで要素を縦に比率で表示する方法

#やりたいこと

下の写真のように、Questionを2、A0、A1、A2ボタンを１、NEXTボタンを0.5の比率で表示したい

#必須条件

• 要素の縦の位置関係を設定する

  app:layout_constraintBottom_toTopOf

  要素の下からどの要素の上につながっているか

  app:layout_constraintTop_toBottomOf

  要素の上からどの要素の下につながっているか

- android:layout_heightを0dpにしておく - app:layout_constraintVertical_chainStyle（縦方向に要素を並べる設定）をspread（均等配置）にする - app:layout_constraintVertical_weightに比率を設定する

コードにするとこんな感じ

main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/qText"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="Question"
        android:textSize="32sp"
        android:textStyle="bold"
        android:gravity="center"
        app:layout_constraintBottom_toTopOf="@+id/a0Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintVertical_weight="2" />


    <Button
        android:id="@+id/a0Button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:onClick="checkAnswer"
        android:text="A0"
        app:layout_constraintBottom_toTopOf="@+id/a1Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/qText"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintVertical_weight="1" />


    <Button
        android:id="@+id/a1Button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:onClick="checkAnswer"
        android:text="A1"
        app:layout_constraintBottom_toTopOf="@+id/a2Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/a0Button"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintVertical_weight="1" />

    <Button
        android:id="@+id/a2Button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:onClick="checkAnswer"
        android:text="A2"
        app:layout_constraintBottom_toTopOf="@+id/nextButton"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/a1Button"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintVertical_weight="1" />

    <TextView
        android:id="@+id/scoreText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Score: 0 / 0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/nextButton"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:onClick="goNext"
        android:text="Next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/a2Button"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintVertical_weight="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>

これでやりたいことの写真と同じ画面ができる