AndroidのConstraintLayout（制約レイアウト）の仕組みと使い方を徹底解説

ConstraintLayout（制約レイアウト）とは？

ConstraintLayoutは、一言でいえばRelativeLayout（相対配置レイアウト）を進化させた高度なレイアウトです。ネストした子ビューの階層を減らすことで、ビューの描画を効率化し、アプリ全体のパフォーマンス向上を目的としています。

ConstraintLayoutで使える主なサイズ設定プロパティは以下の通りです。

Wrap Content（コンテンツに合わせる）

テキストや画像など、中身のデータ量に応じてビューのサイズを自動的に調整します。

Any Size（Match Constraints / 制約に合わせる）

match_parentに非常に近い挙動を持ちますが、厳密には「制約条件に従ってサイズが決まる」方式です。widthまたはheightに0dpを指定することで有効になります。

Fixed Size（固定サイズ）

幅と高さを固定値（例：53dp）として指定できるモードです。デザイン通りの正確なサイズが必要な場合に使用します。

上記の例では、これらのプロパティを持つボタンを表示しています。続いて、コードレベルでどのように記述されるかを見てみましょう。

<Button
    android:layout_width="wrap_content"
    android:layout_height="53dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.391"
    app:layout_constraintStart_toStartOf="@+id/data1"
    app:layout_constraintTop_toTopOf="parent" />

このコードでは、layout_marginTop・Bottom・Start・Endを宣言しています。これらは親ビューや他のビューとの間の標準的な距離（マージン）を指定する属性です。

bias（バイアス）による位置調整

ConstraintLayoutには、horizontal（水平方向）とvertical（垂直方向）の2種類のbiasが用意されています。従来のgravityのように余白を水平・垂直方向へ配分するイメージで、制約範囲の中でビューの位置を細かく微調整できます。

また、エディタ上でビューをクリックすると、そのビューに接続されているすべての制約（階層関係）が可視化されます。「X」アイコンのボタンを押せば、他のビューや親ビューとの接続を簡単に解除できます。

AndroidでのConstraintLayout実装手順

ここからは、実際にAndroidでConstraintLayoutを使うサンプルの手順を紹介します。

ステップ1 − Android Studioで新しいプロジェクトを作成します。[File] → [New Project] を選択し、必要事項を入力して新規プロジェクトを生成してください。

ステップ2 − res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/layout"
    android:gravity="center"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/data"
        android:layout_width="wrap_content"
        android:gravity="center"
        android:textSize="30sp"
        android:text="www.tutorialspoint.com"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/data1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="8dp"
        android:gravity="center"
        android:text="www.tutorialspoint.com"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="53dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.43"
        app:layout_constraintStart_toStartOf="@+id/data1"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

アプリを実行してみよう

それでは、作成したアプリケーションを実行してみましょう。ここでは、実機のAndroid端末がすでにPCに接続されているものとします。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーの実行アイコン をクリックします。デバイス選択画面で自分のスマートフォンを選択すると、端末側にデフォルト画面が表示されます。