2023/8/1

【Android Studio】RelativeLayoutの使い方！相対的にビューを配置する

この記事からわかること

Android StudioのRelativeLayoutとは？
WidgetsとLayoutsとは？
ビューを相対的に並べる方法
中心に配置するには？
RelativeLayout.LayoutParamsで指定できる配置属性の種類

index

[open]

RelativeLayoutとは？
相対的に配置する
指定できる配置属性：RelativeLayout.LayoutParams
親に対しての配置属性
兄弟(別View)に対しての配置属性
実際に配置してみる
縦並び/横並びに配置する
制約的に配置する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献：公式リファレンス：RelativeLayout

環境

Android Studio：Flamingo
Kotlin：1.8.20

RelativeLayoutとは？

AndroidのRelativeLayoutとはビューを相対的に並べることができるLayoutsの1種です。AndroidではButtonやTextViewなどのビュー要素を「Widgets」と呼びます。そしてそのWidgetsを配置するためにRelativeLayoutなどの「Layouts」があります。またWidgetsはLayoutsの中にしか配置することはできません。Androidのレイアウトファイルでは必ずルートにLayoutsのいずれかを指定する必要があります。

RelativeLayoutは「リラティブ(レラティブ)レイアウト」と読み、翻訳すると「相対的なレイアウト」といった意味になります。相対的の名前通りあるビューを基準とした配置方法が可能になります。ここでいうあるビューとはWidgets基準でも親となるRelativeLayout基準でも可能ということです。

相対的に配置する

RelativeLayoutを使用してWidgetsを相対的に配置してみます。レイアウトファイルを開き、左上から「RelativeLayout」を検索しRelativeLayoutを画面に追加し、さらにButtonを3つそのまま追加してみます。すると左上に3つ重なってしまいました。これをドラッグ&ドロップで配置しようとしても左上に戻り続けてしまいます。

では以下のように配置してみます。

RelativeLayoutではWidgets1つ1つに対して上下左右の4方向に明示的な数値を指定することで配置されます。そしてここでの数値は別のWidgetsまでとの距離もしくは、親となるRelativeLayoutの枠組みまでの距離になります。例えば真ん中のボタンは左右はRelativeLayoutから232と85の距離に、上は上のButtonBottomの138、下は下のButtonTopの142の距離になるように配置されます。コードを見てみると以下のようになっています。

<RelativeLayout
  android:layout_width="409dp"
  android:layout_height="729dp"
  app:layout_constraintTop_toTopOf="parent"
  tools:layout_editor_absoluteX="16dp">

  <Button
      android:id="@+id/button8"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_alignParentTop="true"
      android:layout_alignParentEnd="true"
      android:layout_marginStart="69dp"
      android:layout_marginTop="36dp"
      android:layout_marginEnd="249dp"
      android:text="Button" />

  <Button
      android:id="@+id/button9"
      android:layout_width="92dp"
      android:layout_height="wrap_content"
      android:layout_above="@+id/button10"
      android:layout_below="@+id/button8"
      android:layout_alignParentStart="true"
      android:layout_alignParentEnd="true"
      android:layout_marginStart="232dp"
      android:layout_marginTop="138dp"
      android:layout_marginEnd="85dp"
      android:layout_marginBottom="142dp"
      android:text="Button" />

  <Button
      android:id="@+id/button10"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentStart="true"
      android:layout_alignParentEnd="true"
      android:layout_alignParentBottom="true"
      android:layout_marginStart="143dp"
      android:layout_marginEnd="175dp"
      android:layout_marginBottom="271dp"
      android:text="Button" />
  </RelativeLayout>

何やらandroid:layout_XXXXXX形式の属性がたくさん付与されています。これがRelativeLayoutで相対的に配置するために重要になってきます。

指定できる配置属性：RelativeLayout.LayoutParams

RelativeLayout.LayoutParamsとはRelativeLayoutにおいて画面上のどこにビューを配置するかを決定するためのパラメータになります。種類がたくさんあるので正確に把握したい場合は公式サイトを参考にしてください。

公式リファレンス：RelativeLayout.LayoutParams

親に対しての配置属性

属性	配置
layout_alignParentTop	親に対して上寄せ
layout_alignParentBottom	親に対して下寄せ
layout_alignParentRight	親に対して右寄せ
layout_alignParentLeft	親に対して左寄せ
layout_centerVertical	親に対して垂直方向中央寄せ
layout_centerHorizontal	親に対して水平方向中央寄せ
layout_centerInParent	親に対して水平垂直方向共に中央寄せ

値にはandroid:layout_centerInParent="true"のようにtrueを渡します。

兄弟(別View)に対しての配置属性

属性名	配置方法
layout_above	指定したViewに対し上側に配置
layout_below	指定したViewに対し下側に配置
layout_toEndOf	指定したViewに対し右側に配置
layout_toStartOf	指定したViewに対し左側に配置
layout_toRightOf	指定したViewに対し右側に配置
layout_toLeftOf	指定したViewに対し左側に配置
layout_alignRight	指定したViewの右端とViewの右端を揃えて配置
layout_alignLeft	指定したViewの左端とViewの左端を揃えて配置
layout_alignBottom	指定したViewの下端とViewの下端を揃えて配置
layout_alignTop	指定したViewの上端とViewの上端を揃えて配置

別Viewに対してはandroid:layout_above="@+id/button"のように合わせたいViewのIDを渡してください。

実際に配置してみる

button2を画面の中心に設置し、その周りに階段状になるようにButtonを配置してみました。

<RelativeLayout
    android:layout_width="409dp"
    android:layout_height="729dp"
    app:layout_constraintStart_toStartOf="parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button2"
        android:layout_toLeftOf="@id/button2"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button2"
        android:layout_toRightOf="@id/button2"
        android:text="Button" />
</RelativeLayout>