読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Xamarin AndroidでRelativeLayoutを見てみよう

Xamarin Android

過去記事

RelativeLayout

他のコントロールや親のパネルから見て相対的にどういう位置に表示するかといった指定方法で並べるレイアウトになります。親からの相対位置の指定方法は以下のものがあります。

  • layout_alignParentLeft:親の左側
  • layout_alignParentRight:親の右側
  • layout_alignParentTop:親の上側
  • layout_alignParentBottom:親の下側
  • layout_centerInParent:親の中央

以下のようなaxmlを記述すると

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/MyButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Top|Left"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="Bottom|Right"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" />
</RelativeLayout>

以下のように表示されます。

f:id:okazuki:20160821193737p:plain

他の要素から相対的に位置を設定するには以下の属性を指定します。属性の値は相対的に配置したい元になるコントロールのID(@id/XXXX)になります。

  • layout_toLeftOf:左に配置する
  • layout_toRightOf:右に配置する
  • layout_above:上に配置する
  • layout_below:下に配置する
  • layout_alignLeft:左端に位置を合わせる
  • layout_alignRight:右端に位置を合わせる
  • layout_alignTop:上端に位置を合わせる
  • layout_alignBottom:下端に位置を合わせる

全組み合わせは試しませんが、以下のようなaxmlで

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/MyButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="Right|above"
        android:layout_toRightOf="@id/MyButton"
        android:layout_above="@id/MyButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="Left|below"
        android:layout_toLeftOf="@id/MyButton"
        android:layout_below="@id/MyButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:text="alignLeft|below"
        android:layout_alignLeft="@id/MyButton"
        android:layout_below="@id/MyButton" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button4"
        android:text="alignRight|above"
        android:layout_alignRight="@id/MyButton"
        android:layout_above="@id/MyButton" />
</RelativeLayout>

以下のように表示されます。

f:id:okazuki:20160821193844p:plain