Androidアプリ開発のRelativeLayoutの使い方【初心者向け】

Androidアプリ開発におけるレイアウトの1つ【RelativeLayout(相対レイアウト)】の使い方について初心者向けに解説した記事。基準となるパーツを決め、それとの相対的な関係で位置を決めていくというレイアウトです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。

今回はそのなかの1つである、RelativeLayout(リラティブレイアウト・相対レイアウト)を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター!!Androidアプリでボタンの並びを相対的に並べたいんですけど、何かいい方法ってないですか〜?

田島悠介

それならRelativeLayoutを使うとできるよ。パーツの位置を相対的に設置できるんだ。

大石ゆかり

RelativeLayout、ですか?

 

RelativeLayoutとは

RelativeLayoutとは、基準となるパーツを決め、それとの相対的な関係で位置を決めていくというレイアウトです。

 

 

RelativeLayoutを配置する

画面を最初から作成する場合は、xmlタブを開いてデフォルトで記述されているコードをすべて削除しておきましょう。

RelativeLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のRelativeLayoutを、プレビュー画面までドラッグしましょう。

 

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

RelativeLayoutにパーツを配置する

RelativeLayout上にパーツを配置してみましょう。

一番最初に配置したパーツはレイアウトの基準として配置されています。

 

次に配置したパーツは、一つ前に配置したパーツを基準に配置されます。また、基準にしているパーツは矢印で確認できます。

 

パーツを移動させると、そのパーツを基準としている他のパーツも同じように移動します。

 

 

RelativeLayoutのコードを確認する

最後に、RelativeLayoutで、下の画像のようにボタンを3つ配置した画面を作成しコードを確認してみましょう。

 

xmlタブでコードを確認すると、このようになっています。

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_alignParentTop=”true”
android:layout_marginLeft=”59dp”
android:layout_marginTop=”56dp”
android:text=”Button” />
<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/button1″
android:layout_below=”@+id/button1″
android:layout_marginTop=”80dp”
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_marginLeft=”43dp”
android:layout_marginTop=”68dp”
android:layout_toRightOf=”@+id/button2″
android:text=”Button” />
</RelativeLayout>

グラフィカルレイアウトでうまく微調整ができない場合は、コードを使って微調整をするようにしましょう。各コードを編集する際は、下記の内容を参考にしてください。

 

レイアウトを基準に配置したい場合は、下記の属性を「true」にする

  • android:layout_alignParentTop : レイアウトの上端に配置する
  • android:layout_alignParentBottom : レイアウトの下端に配置する
  • android:layout_alignParentLeft : レイアウトの左端に配置する
  • android:layout_alignParentRight : レイアウトの右端に配置する
  • android:layout_centerHorizontal : レイアウトの水平方向の中央に配置する
  • android:layout_centerVertical : レイアウトの垂直方向の中央に配置する
  • android:layout_centerInParent : レイアウトの中央に配置する

 

パーツを基準に配置をしている場合は、下記の属性に基準としているパーツIDを指定する

  • layout_below : 指定したパーツの下に配置
  • layout_alignLeft : 指定したパーツの左に配置
  • ayout_toRightOf : 指定したパーツの右に配置

 

基準としたパーツやレイアウトからの距離を指定する場合は、下記の属性に距離を指定する

  • layout_marginTop : 上の距離
  • layout_marginBottom : 下の距離
  • layout_marginLeft : 左側の距離
  • layout_marginRight : 右側の距離

(指定がない場合は、基準のパーツの位置と揃えて配置します)

 

今回の記事は以上です。

さらに他のレイアウトを試したい場合はTableLayoutの使い方も合わせてご覧ください。

 

大石ゆかり

RelativeLayoutはとても使う場面が多そうなレイアウトですね〜♪

田島悠介

そうだね。絶対的な位置関係だと一つパーツをずらした時に他のパーツも動かさないといけないから、使うととても便利だね。

大石ゆかり

はい!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。