かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Xamarin AndroidでRelativeLayoutを見てみよう

過去記事

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