Genta Hirauchi

公開日：2020/03/01
更新日：2020/08/03

【Kotlin基礎】RelativeLayoutでViewを相対的に配置する方法を解説

  • KotlinでViewを相対位置で配置する方法が知りたい。
  • RelativeLayoutをコードで動的に実装したい。

Androidでは、テキストやボタンなどのViewを配置するためのレイアウトが数種類用意されております。

本記事では、その中から、Viewを相対位置で配置するRelativeLayoutというレイアウトについて、サンプルコードを交え、わかりやすく解説致します。

目次

RelativeLayoutの実装

Kotlinにて、Viewを相対位置で配置するには、RelativeLayoutというLayoutを使用します。

【公式ドキュメント】 ： RelativeLayout | Android Developers

RelativeLayoutを実装するには、xmlで実装する方法と、コードで動的に実装する方法の、2通りの方法があります。

xmlでRelativeLayoutを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <TextView
       android:id="@+id/text_view"
       android:text="リンゴ"
       android:background="#FAA"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RelativeLayout>

RelativeLayoutを実装するには、<RelativeLayout/>タグを使用します。

RelativeLayoutの開始タグと終了タグの間に、相対位置で配置するViewを実装します。

Point
  • xmlでRelativeLayoutを実装するには、<RelativeLayout/>タグを使用する

コードで動的にRelativeLayoutを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

  • MainActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   // RelativeLayoutの生成
   val relativeLayout = RelativeLayout(this).also {

       // TextViewの生成
       val textView = TextView(this)
       textView.text = "リンゴ"
       textView.setBackgroundColor(Color.parseColor("#FFAAAA"))

       // TextViewをRelativeLayoutに追加
       it.addView(textView)
   }

   // RelativeLayoutをレイアウトとして登録
   setContentView(relativeLayout)
}

RelativeLayout()で、RelativeLayoutのインスタンスを生成しております。

そして、生成したrelativeLayoutのインスタンスに対し、スコープ関数alsoを使用し、TextViewを子Viewとして追加しております。

スコープ関数alsoの詳細については、以下の記事に詳しくまとめておりますので、そちらをご覧ください。

【Kotlin基礎】スコープ関数alsoの実装方法と用途を解説

Kotlinにはスコープ関数という覚えておくと便利な関数があります。スコープ関数にはいくつか種類があるのですが、本記事では、スコープ関数alsoに焦点を当て解説致します。他のスコープ関数(let, run, apply等)につきましては、簡単な解説と、各記事へのリンクがありますので、そちらをご覧頂けたらと思います。

最後に、setContentView()で、RelativeLayoutをレイアウトとして登録しております。

Point
  • コードで動的にRelativeLayoutを実装するには、RelativeLayout()でインスタンスを生成した後、setContentView()でレイアウトとして登録する

RelativeLayoutでViewを相対的に配置する方法

RelativeLayoutとの相対位置でViewを配置する

ここからは、子Viewをどのように相対位置で配置するかを紹介致します。まずは、RelativeLayoutとの相対位置で配置する方法についてです。

以下は、RelativeLayout内に実装した9つのTextViewを、RelativeLayoutとの相対位置で配置したサンプルコードです。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <TextView
       android:id="@+id/text_view_1"
       android:text="左上"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <TextView
       android:id="@+id/text_view_2"
       android:text="上中央"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true" />

   <TextView
       android:id="@+id/text_view_3"
       android:text="右上"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true" />

   <TextView
       android:id="@+id/text_view_4"
       android:text="左中央"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true" />

   <TextView
       android:id="@+id/text_view_5"
       android:text="中央"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true" />

   <TextView
       android:id="@+id/text_view_6"
       android:text="右中央"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_centerVertical="true" />

   <TextView
       android:id="@+id/text_view_7"
       android:text="左下"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true" />

   <TextView
       android:id="@+id/text_view_8"
       android:text="下中央"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_alignParentBottom="true" />

   <TextView
       android:id="@+id/text_view_9"
       android:text="右下"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentBottom="true" />

</RelativeLayout>

以下の属性に、trueを指定することで、親レイアウトとの相対位置で配置することができます。

  • layout_alignParentStart : 左 (デフォルト)
  • layout_alignParentEnd : 右
  • layout_alignParentTop : 上 (デフォルト)
  • layout_alignParentBottom : 下
  • layout_centerHorizontal : 横中央
  • layout_centerVertical : 縦中央
  • layout_centerInParent : 中央

他のViewとの相対位置でView配置する

続いて、他のViewとの相対位置でViewを配置する方法について解説致します。

以下は、RelativeLayoutの中央に配置したボタンに対し6つのTextViewを相対位置で配置したサンプルコードです。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <Button
       android:id="@+id/button"
       android:text="中央ボタン"
       android:textSize="30dp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true" />

   <TextView
       android:id="@+id/text_view_1"
       android:text="上"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_above="@+id/button" />

   <TextView
       android:id="@+id/text_view_2"
       android:text="下"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/button" />

   <TextView
       android:id="@+id/text_view_3"
       android:text="左"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toStartOf="@+id/button" />

   <TextView
       android:id="@+id/text_view_4"
       android:text="右"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toEndOf="@+id/button" />

   <TextView
       android:id="@+id/text_view_5"
       android:text="左揃え"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignStart="@+id/button" />

   <TextView
       android:id="@+id/text_view_6"
       android:text="右揃え"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignEnd="@+id/button" />
</RelativeLayout>

少しわかりにくいので、他の属性と組み合わせてわかりやすくしてみます。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <Button
       android:id="@+id/button"
       android:text="中央ボタン"
       android:textSize="30dp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true" />

   <TextView
       android:id="@+id/text_view_1"
       android:text="上"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_above="@+id/button" />

   <TextView
       android:id="@+id/text_view_2"
       android:text="下"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_below="@+id/button" />

   <TextView
       android:id="@+id/text_view_3"
       android:text="左"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:layout_toStartOf="@+id/button" />

   <TextView
       android:id="@+id/text_view_4"
       android:text="右"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:layout_toEndOf="@+id/button" />

   <TextView
       android:id="@+id/text_view_5"
       android:text="左揃え"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/button"
       android:layout_alignStart="@+id/button" />

   <TextView
       android:id="@+id/text_view_6"
       android:text="右揃え"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/button"
       android:layout_alignEnd="@+id/button" />
</RelativeLayout>

以下の属性に、相対位置の基となるViewのIDを指定することで、ID指定したViewとの相対位置で配置することができます。

  • layout_above : 上
  • layout_below : 下
  • layout_toStartOf : 左
  • layout_toEndOf : 右
  • layout_alignStart : 左揃え
  • layout_alignEnd : 右揃え

まとめ

  • xmlでRelativeLayoutを実装するには、<RelativeLayout/>タグを使用する
  • コードで動的にRelativeLayoutを実装するには、RelativeLayout()でインスタンスを生成した後、setContentView()でレイアウトとして登録する

関連記事