【Android】ConstraintLayoutとspaceでXMLレイアウトを綺麗にするテクニック

SRIAの佐藤（琢）です。
みなさんAndroid開発してますか？
今回はConstraintLayoutのお話です。

ConstraintLayoutを使ってレイアウトを組むと、Viewの改装が少なくなってパフォーマンスが上がるとか、複雑なレイアウトをフラットに表現できるなどのメリットがあると言われています。
いろいろな記事でも紹介されています（ConstraintLayoutを入れ子にするとパフォーマンスが落ちるなどの諸説はありますが…。）

実際に使ってみた感想としては、今まではLinearLayoutなどの並び順を持ったViewに「要素を入れる」方法でレイアウトしていたのに対し、ConstraintLayoutでは「要素をつなげる・乗せる」方法でフラットなXMLの記述ができていると感じています。

spaceタグを使うとXMLの記述をシンプルでかつ短く描けた

ConstraintLayoutでレイアウトを組んでいる時に、要素ごとにマージンやパディングのつけ忘れがないか考えるのが嫌になりました。
もっとレイアウトXMLの記述をシンプルでかつ短く書けるのでは？と思った次第です。
レイアウトXML記述が短くなると内容が確認しやすくなり綺麗なXMLになります。
spaceタグを組み合わせることでViewの役割を明確にし、要素ごとの共通マージンやパディングの記述を無くしていきます。

space

https://developer.android.com/reference/android/widget/Space.html
Android4.0から追加されていたんですね。知らなかった…。

各レイアウトごとに比較していく

下記の画像をテーマごとにXMLに組んで比較していきます。
①LinearLayoutでレイアウトする
②LinearLayoutでレイアウトしたXMLをConstraintLayoutに変える
③ConstraintLayout＋spaceでレイアウトする

各テーマのXMLの内容は違いますが、画面に表示されるViewは同じなので比較が難しいです。
開発者向けオプションの[レイアウト境界を表示]を有効にしてレイアウトの境界線を確認していきます。

①LinearLayoutでレイアウトする

LinearLayoutで組む場合は下記のようにならざるを得ないのではと思います。
LinearLayout:orientation=”vertical”で縦にレイアウトを並べて、
横並びにする箇所はLinearLayout:orientation=”horizontal”を入れ子にします。
さらにその中で縦並びを実現するためにLinearLayout:orientation=”vertical”を入れ子にしてデザインを表現していきます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
    <!--タイトルテキスト-->
    <TextView
        android:id="@+id/titleText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:gravity="center_horizontal"
        android:text="画像タイトル"
        android:textSize="30sp" />
    <!--トップ画像-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="24dp"
        android:orientation="horizontal">
        <!--メニューへの遷移ボタン-->
        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="62dp"
            android:layout_height="62dp"
            android:src="@drawable/ic_launcher_background" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:orientation="vertical">
            <!--メニューのタイトル-->
            <TextView
                android:id="@+id/imageTitleText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="画像アイコンのタイトルです"
                android:textSize="24sp" />
            <!--メニューの説明文-->
            <TextView
                android:id="@+id/imageDetailText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="詳細テキストです"
                android:textSize="24sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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:orientation="vertical">

<TextView

android:id="@+id/titleText"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

android:layout_marginEnd="16dp"

android:gravity="center_horizontal"

android:text="画像タイトル"

android:textSize="30sp" />

<ImageView

android:id="@+id/imageView"

android:layout_width="match_parent"

android:layout_height="200dp"

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

android:layout_marginEnd="16dp"

android:scaleType="centerCrop"

android:src="@drawable/ic_launcher_background" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginStart="16dp"

android:layout_marginTop="24dp"

android:orientation="horizontal">

<ImageButton

android:id="@+id/imageButton"

android:layout_width="62dp"

android:layout_height="62dp"

android:src="@drawable/ic_launcher_background" />

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:orientation="vertical">

<TextView

android:id="@+id/imageTitleText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="画像アイコンのタイトルです"

android:textSize="24sp" />

<TextView

android:id="@+id/imageDetailText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="詳細テキストです"

android:textSize="24sp" />

</LinearLayout>

レイアウト境界のピンクの部分がマージンです。
全要素にマージンが指定されているのがわかります。

②LinearLayoutでレイアウトしたXMLをConstraintLayoutに変える

LinearLayoutを使用しないで、app:layout_constraint○○_to○○Ofの記述で各要素をつなげてデザインを表現していきます。
入れ子がなくなったので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:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--タイトルテキスト-->
    <TextView
        android:id="@+id/titleText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="画像タイトル"
        android:textSize="30sp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:gravity="center_horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--トップ画像-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titleText" />
    <!--メニューへの遷移ボタン-->
    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="62dp"
        android:layout_height="62dp"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="@+id/imageDetailText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageTitleText" />
    <!--メニューのタイトル-->
    <TextView
        android:id="@+id/imageTitleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="画像アイコン"
        android:textSize="24sp"
        app:layout_constraintStart_toEndOf="@+id/imageButton"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
    <!--メニューの説明文-->
    <TextView
        android:id="@+id/imageDetailText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="詳細テキスト"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/imageTitleText"
        app:layout_constraintTop_toBottomOf="@+id/imageTitleText" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?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:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:id="@+id/titleText"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="画像タイトル"

android:textSize="30sp"

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

android:layout_marginEnd="16dp"

android:gravity="center_horizontal"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<ImageView

android:id="@+id/imageView"

android:layout_width="0dp"

android:layout_height="200dp"

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

android:layout_marginEnd="16dp"

android:scaleType="centerCrop"

android:src="@drawable/ic_launcher_background"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/titleText" />

<ImageButton

android:id="@+id/imageButton"

android:layout_width="62dp"

android:layout_height="62dp"

android:layout_marginStart="16dp"

android:src="@drawable/ic_launcher_background"

app:layout_constraintBottom_toBottomOf="@+id/imageDetailText"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="@+id/imageTitleText" />

<TextView

android:id="@+id/imageTitleText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="8dp"

android:layout_marginTop="24dp"

android:text="画像アイコン"

android:textSize="24sp"

app:layout_constraintStart_toEndOf="@+id/imageButton"

app:layout_constraintTop_toBottomOf="@+id/imageView" />

<TextView

android:id="@+id/imageDetailText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="詳細テキスト"

android:textSize="24sp"

app:layout_constraintStart_toStartOf="@+id/imageTitleText"

app:layout_constraintTop_toBottomOf="@+id/imageTitleText" />

</androidx.constraintlayout.widget.ConstraintLayout>

マージンが指定された要素にだけ存在していてガタガタしている印象です。

③ConstraintLayout＋spaceでレイアウトする

spaceタグを追加して余計なマージンを除去していきます。
spaceの役割はView共通の余白として使用します。

大抵のデザインには上下左右に共通の余白ってありますよね。

XMLの記述量は増えますが上下左右のspaceを一度記述するだけで良くなります。
マージンの変わりにlayout_constraintXXで上下左右のspaceに対してレイアウトを繋げます。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--縦の余白-->
    <Space
        android:id="@+id/spaceTop"
        android:layout_width="0dp"
        android:layout_height="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--左の余白-->
    <Space
        android:id="@+id/spaceStart"
        android:layout_width="16dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--右の余白-->
    <Space
        android:id="@+id/spaceEnd"
        android:layout_width="16dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--ボタン右の余白-->
    <Space
        android:id="@+id/spaceButtonEnd"
        android:layout_width="8dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageButton"
        app:layout_constraintStart_toEndOf="@+id/imageButton"
        app:layout_constraintTop_toTopOf="@+id/imageButton" />
    <!--タイトルテキスト-->
    <TextView
        android:id="@+id/titleText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="画像タイトル"
        android:textSize="30sp"
        android:gravity="center_horizontal"
        app:layout_constraintEnd_toStartOf="@+id/spaceEnd"
        app:layout_constraintStart_toEndOf="@+id/spaceStart"
        app:layout_constraintTop_toBottomOf="@+id/spaceTop" />
    <!--トップ画像-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:layout_marginTop="16dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintEnd_toStartOf="@+id/spaceEnd"
        app:layout_constraintStart_toEndOf="@+id/spaceStart"
        app:layout_constraintTop_toBottomOf="@+id/titleText" />
    <!--メニューへの遷移ボタン-->
    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="62dp"
        android:layout_height="62dp"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="@+id/imageDetailText"
        app:layout_constraintStart_toEndOf="@+id/spaceStart"
        app:layout_constraintTop_toTopOf="@+id/imageTitleText" />
    <!--メニューのタイトル-->
    <TextView
        android:id="@+id/imageTitleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="画像アイコン"
        android:textSize="24sp"
        app:layout_constraintStart_toEndOf="@+id/spaceButtonEnd"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
    <!--メニューの説明文-->
    <TextView
        android:id="@+id/imageDetailText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="詳細テキスト"
        android:textSize="24sp"
        app:layout_constraintStart_toEndOf="@+id/spaceButtonEnd"
        app:layout_constraintTop_toBottomOf="@+id/imageTitleText" />
</androidx.constraintlayout.widget.ConstraintLayout>

<?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:layout_width="match_parent"

android:layout_height="match_parent">

<Space

android:id="@+id/spaceTop"

android:layout_width="0dp"

android:layout_height="16dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Space

android:id="@+id/spaceStart"

android:layout_width="16dp"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Space

android:id="@+id/spaceEnd"

android:layout_width="16dp"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Space

android:id="@+id/spaceButtonEnd"

android:layout_width="8dp"

android:layout_height="0dp"

app:layout_constraintBottom_toBottomOf="@+id/imageButton"

app:layout_constraintStart_toEndOf="@+id/imageButton"

app:layout_constraintTop_toTopOf="@+id/imageButton" />

<TextView

android:id="@+id/titleText"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="画像タイトル"

android:textSize="30sp"

android:gravity="center_horizontal"

app:layout_constraintEnd_toStartOf="@+id/spaceEnd"

app:layout_constraintStart_toEndOf="@+id/spaceStart"

app:layout_constraintTop_toBottomOf="@+id/spaceTop" />

<ImageView

android:id="@+id/imageView"

android:layout_width="0dp"

android:layout_height="200dp"

android:layout_marginTop="16dp"

android:scaleType="centerCrop"

android:src="@drawable/ic_launcher_background"

app:layout_constraintEnd_toStartOf="@+id/spaceEnd"

app:layout_constraintStart_toEndOf="@+id/spaceStart"

app:layout_constraintTop_toBottomOf="@+id/titleText" />

<ImageButton

android:id="@+id/imageButton"

android:layout_width="62dp"

android:layout_height="62dp"

android:src="@drawable/ic_launcher_background"

app:layout_constraintBottom_toBottomOf="@+id/imageDetailText"

app:layout_constraintStart_toEndOf="@+id/spaceStart"

app:layout_constraintTop_toTopOf="@+id/imageTitleText" />

<TextView

android:id="@+id/imageTitleText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="24dp"

android:text="画像アイコン"

android:textSize="24sp"

app:layout_constraintStart_toEndOf="@+id/spaceButtonEnd"

app:layout_constraintTop_toBottomOf="@+id/imageView" />

<TextView

android:id="@+id/imageDetailText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="詳細テキスト"

android:textSize="24sp"

app:layout_constraintStart_toEndOf="@+id/spaceButtonEnd"

app:layout_constraintTop_toBottomOf="@+id/imageTitleText" />

</androidx.constraintlayout.widget.ConstraintLayout>

上記の実装をすることで、縦横の余白の幅を変更したい時は各spaceのwidth・heightの値を変えるだけで良くなります。
そもそもマージンを書かなくて良くなるので、つけ忘れを心配する必要もありません。

今回はViewの数が少ないので冗長ですが、Viewの数が増えるほど効果があると考えています。
別にspaceを使わなくても、マージンの値をdimenで定義していれば一括で値の変更もできますが、
Viewの役割を一度考えてみることが、レイアウトXMLの記述をシンプルに書けることに繋がるのではないかと思います。

spaceタグを使うとXMLの記述をシンプルでかつ短く描けた

space

各レイアウトごとに比較していく

①LinearLayoutでレイアウトする

②LinearLayoutでレイアウトしたXMLをConstraintLayoutに変える

③ConstraintLayout＋spaceでレイアウトする

❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ

チャットボット導入サービス

WEBシステム開発・スマホアプリ開発はSRIAへ