• 2023/8/1
• 5分

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

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

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

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

親に対しての配置属性

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

兄弟(別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>

縦並び/横並びに配置する

Widgetsを横並びや縦並びにしたい場合はLinearLayoutを使用することで簡単に実装できます。

制約的に配置する

Widgetsを制約的に配置したい場合はConstraintLayoutを使用することで簡単に実装できます。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。