RelativeLayoutクラスを使用する

RelativeLayoutクラスとは

RelativeLayoutクラスは、基準となるViewを元に、他のViewを相対的にレイアウトするクラスです。
たとえば、基準となるView①を画面に中央に配置し、View②はView①の左に、View③はView①下に表示する。といった感じです。

基準とするViewは、以下の2種類の方法で決めることができます。
①親のViewを基準とする
②指定したViewを基準とする

少々複雑そうに聞こえますが、実際はいたってシンプルです。
このRelativeLayout。
おそらく言葉で理解するよりも、実際に使ってみたほうが理解しやすいです。

また、RelativeLayoutと同じ概念は、CSS(スタイルシート)のRelativeと同じなので、
CSSのご経験がある方は、イメージしやすいと思います。

それでは、2種類の方法について順番に見ていくことにしましょう。

RelativeLayoutで、親のViewを基準にレイアウトする

画面に、全部で9つのボタンを相対配置で表示してみます。

レイアウトxmlの内容は以下の通りです。
9つのButtonを配置し、それぞれの表示位置を定義していきます。

このレイアウトで画面を表示すると、以下のように表示されます。
RelativeLayout_001

属性の一覧は以下の通りです。

属性内容
layout_alignParentTop親レイアウトの上側に配置
layout_alignParentBottom親レイアウトの下側に配置
layout_alignParentLeft親レイアウトの左側に配置
layout_alignParentRight親レイアウトの右側に配置
layout_centerInParent親レイアウトの中央に配置

また、サンプルにもありますが、左右属性と上下属性などを組み合わせることで、
左上、右上、などに表示させたりすることが可能になります。

RelativeLayoutで、任意のViewを基準にレイアウトする

それでは、次に、任意のViewを基準にレイアウトしてみましょう。

中央にボタンを基準に、周囲にボタンを配置してみます。

このレイアウトで画面を表示すると、以下のように表示されます。

RelativeLayout_002

属性の一覧は以下の通りです。

属性内容
layout_above指定したView の上側に配置
layout_below指定したView の下側に配置
layout_toLeftOf指定したView の左側に配置
layout_toRightOf指定したView の右側に配置
layout_alignTop指定View の上側を基準位置に設定
layout_alignBottom指定View の下側を基準位置に設定
layout_alignLeft指定View の左側を基準位置に設定
layout_alignRight指定View の右側を基準位置に設定

シェアする

  • このエントリーをはてなブックマークに追加

フォローする