ConstraintLayoutを使ったタブレットとスマホに対応したレイアウトの書き方

# ConstraintLayoutを使ったタブレットとスマホに対応したレイアウトの書き方

基本的なConstraintLayoutのViewの配置方法としてAndroidにはdpという考え方があります。
dpを使った配置法はどのような端末でも同じ大きさで表示するという考え方です。
これはこれで有用なのですが、
タブレットとスマホ両方に適用できるレイアウトという方針では、タブレットにはスカスカに、スマホにはぎゅうぎゅうに表示されてしまい、いい感じのレイアウトができません。

そこで、レスポンシブUIの設計の為に、
`<androidx.constraintlayout.widget.ConstraintLayout`と
`<androidx.constraintlayout.widget.Guideline`を使った記法を紹介します。

書き方の例

```item.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612874/c0978485-8261-46df-398a-8d78b95807d0.png)

`Guideline`は親の`ConstraintLayout`の縦横を100%として、縦横に比率でガイドを出すことができます。

そして`Guideline`はネストした子`ConstraintLayout`に対しても設定することができます。

```item2.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"
    android:id="@+id/constraint"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

    <androidx.cardview.widget.CardView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/card"
        app:cardCornerRadius="10dp"
        app:layout_constraintDimensionRatio="5:1"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintTop_toTopOf="@id/guidelinePercent10"
        app:layout_constraintStart_toStartOf="@id/guidelinePercent01"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/item_const"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent001"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.08" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent002"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.25" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent101"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.12" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent102"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.80" />

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:background="@color/black"
                app:layout_constraintTop_toTopOf="@id/guidelinePercent101"
                app:layout_constraintBottom_toBottomOf="@id/guidelinePercent102"
                app:layout_constraintStart_toStartOf="@id/guidelinePercent001"
                app:layout_constraintEnd_toEndOf="@id/guidelinePercent002" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>
```

親`ConstraintLayout`に子`ConstraintLayout`をネストさせ、その中に`Guideline`を設定してみた例です。
子`ConstraintLayout`の縦横に対する比率で黒色の`View`を設定できていることがわかると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612874/e5ad3d64-59d2-4d76-a237-e5dabb222e87.png)

また、この例で使用している`app:layout_constraintDimensionRatio`も非常に便利です。
縦の長さを確定するために横の長さの比として使用することができます。

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

補足）この行は`match_constraint`を示していて、`width`は`layout_constraintStart`と`layout_constraintEnd`との間の制約を示しています。

御覧の通り、この記述方法を用いることでレイアウト中からほとんどdpでの大きさ定義を取り去ることができます。