Androidアプリ開発のRelativeLayoutの使い方【初心者向け】
Androidアプリ開発におけるレイアウトの1つ【RelativeLayout（相対レイアウト）】の使い方について初心者向けに解説した記事。基準となるパーツを決め、それとの相対的な関係で位置を決めていくというレイアウトです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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_alignParentBottoｍ ： レイアウトの下端に配置する
- 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では初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
