Help us understand the problem. What is going on with this article?

ConstraintLayoutを使いたい - 基本編【Android】

Androidアプリのレイアウト作り

  • LinearLayout
  • RelativeLayout
  • ConstraintLayout

...などなど、
Androidのレイアウトの作り方、いろいろありますよね。

個人的にはConstraintLayoutが好きなのですが、
後から追加されたレイアウトということもあり、昔からAndroid開発をやっている方からすると、
「新しく覚えなくてもLinearLayoutやRelativeLayoutでいいじゃん:thinking:」と思うことがあるようです。

そんな方に向けて、「ConstraintLayoutはいいぞ」を伝えられる記事があったらいいなと思い、
この記事を書きました。

ConstraintLayoutのいいところ

  • レスポンシブな画面を作りやすい
  • ネストの必要がないので処理が早くなる(らしい)

以下の記事が参考になります。
ConstraintLayout がもたらすパフォーマンスのメリットを理解する - Google Developers Japan

使い方の基本

Constraint(制約)を追加する

ConstraintLayoutの基本の考え方です。
View1つの各辺に対し、制約をつけていきます。他のViewとの関係性をつけていくイメージです。

書き方

app:layout_constraint[自分の辺]_to[相手の辺]Of="@+id/相手のid"

[ ]の部分には下の画像の言葉が入ります。
スクリーンショット 2019-12-16 23.26.49.png

Q. なぜLeft=Start、Right=Endなの?
A. LTRモード(Left To Right)だから。

Left,RightでもOKですが、Start,Endにしておくと
端末をRTLモード(アラビア語などの右読み言語)に変更した場合に左右を逆向きにしてくれます。

使用例

このように2つ並んだ状態を作る場合には少なくとも以下の制約をつけます
スクリーンショット 2019-12-16 23.55.12.png

  • View Aに制約をつける場合

    • layout_constraintTop_toTopOf="@+id/ViewB"
    • layout_constraintEnd_toStartOf="@+id/ViewB"
  • View Bに制約をつける場合

    • layout_constraintTop_toTopOf="@+id/ViewA
    • layout_constraintStart_toEndOf="@+id/ViewA

両方のViewに制約をつけても問題はないです。
Topの部分はBottomに変えても同じです。

実際にActivityにボタンを2つ配置してみます。

この画面のxmlは以下のようになっています。

activity_sample.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=".SampleActivity">

    <Button
        android:id="@+id/button_A"
        android:text="ボタンA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button_B" />

    <Button
        android:id="@+id/button_B"
        android:text="ボタンB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@+id/button_A"
        app:layout_constraintStart_toEndOf="@+id/button_A"
        app:layout_constraintEnd_toEndOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>
  • ボタンAの制約
    • Top = 親のTopに合わせる
    • Start = 親のStartに合わせる
    • End = ボタンBのStartに合わせる
  • ボタンBの制約
    • Top = ボタンAのTopに合わせる
    • Start = ボタンAのEndに合わせる
    • End = 親のEndに合わせる

ポイントは大きく分けて3つ。

  1. 画面上部にボタンを配置する制約
  2. ボタンAとボタンBの上部分を合わせる制約
  3. ボタンを横につなげる制約

並んだ方向すべてに制約をつけると、等間隔で並べることができます。
(この場合は「親-ボタンA-ボタンB-親」が全てStart-Endの関係でつながっています。)

並んだViewの間隔を広げたりくっつけたりするときは「Chain」を使います。
が、それはまた別の記事として書こうと思います。

最後に

ConstraintLayoutはパッと見では(文字数多くて?)厄介に見えるかもしれませんが、
一度やってみるとそこまで敷居は高くないです。
むしろxmlがフラットになってきれいになるはず。
これから導入するところが少しでも増えてくれるといいなぁと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした