LinearLayoutとRelativeLayoutの使い方をまとめてみた
Androidアプリで画面を作成する際、LinearLayoutとRelativeLayoutの使い方をしっかり把握しておかないと、後々苦労することが多いと思いますので、レイアウト構成を自分の知る範囲でまとめてみました。
RelativiLayoutの場合
5 両端固定幅、真ん中は幅いっぱい
6 上記のレイアウトに追従する形で配置
7 上下に両端、真ん中配置のボタンを配置
8 上記レイアウトの空白を埋める配置(ListView等)
9 上記レイアウト中央の両端に、ボタンを配置
10 相互に作用する配置
XML
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_weight="1"> </Button> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_weight="1"> </Button> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_weight="1"> </Button> </LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_weight="1"> </Button> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button"> </Button> </LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:layout_weight="1"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_weight="1"> </Button> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:layout_weight="1"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_weight="1"> </Button> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_weight="1"> </Button> </LinearLayout> </LinearLayout>
<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:orientation="vertical" android:layout_weight="1"> <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/button" android:layout_weight="1"> </Button> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:orientation="vertical" android:layout_weight="1"> <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/button" android:layout_weight="1"> </Button> <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/button" android:layout_weight="1"> </Button> </LinearLayout> </LinearLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btn3" android:layout_toRightOf="@+id/btn1"> </Button> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentRight="true"> </Button> </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btn3" android:layout_toRightOf="@+id/btn1"> </Button> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentRight="true"> </Button> <Button android:id="@+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentLeft="true" android:layout_below="@+id/btn2" android:layout_toLeftOf="@+id/btn2"> </Button> <Button android:id="@+id/btn5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_below="@+id/btn2" android:layout_toLeftOf="@+id/btn6" android:layout_toRightOf="@+id/btn4"> </Button> <Button android:id="@+id/btn6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentRight="true" android:layout_below="@+id/btn2" android:layout_toRightOf="@+id/btn2"> </Button> </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btn3" android:layout_toRightOf="@+id/btn1"> </Button> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentRight="true"> </Button> <Button android:id="@+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_toLeftOf="@+id/btn6" android:layout_toRightOf="@+id/btn4"> </Button> <Button android:id="@+id/btn6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"> </Button> </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btn3" android:layout_toRightOf="@+id/btn1"> </Button> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentRight="true"> </Button> <Button android:id="@+id/btn7" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_below="@+id/btn2" android:layout_above="@+id/btn5"> </Button> <Button android:id="@+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_toLeftOf="@+id/btn6" android:layout_toRightOf="@+id/btn4"> </Button> <Button android:id="@+id/btn6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"> </Button> </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btn3" android:layout_toRightOf="@+id/btn1"> </Button> <Button android:id="@+id/btn3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentRight="true"> </Button> <Button android:id="@+id/btn7" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_below="@+id/btn2" android:layout_above="@+id/btn5" android:layout_toLeftOf="@+id/btn2"> </Button> <Button android:id="@+id/btn8" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_below="@+id/btn2" android:layout_above="@+id/btn5" android:layout_toLeftOf="@+id/btn9" android:layout_toRightOf="@+id/btn7"> </Button> <Button android:id="@+id/btn9" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_below="@+id/btn2" android:layout_above="@+id/btn5" android:layout_toRightOf="@+id/btn2"> </Button> <Button android:id="@+id/btn4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true"> </Button> <Button android:id="@+id/btn5" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_toLeftOf="@+id/btn6" android:layout_toRightOf="@+id/btn4"> </Button> <Button android:id="@+id/btn6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_alignParentRight="true"> </Button> </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/btn1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btn2"> </Button> <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/button" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:layout_above="@+id/btn3"> </Button> <Button android:id="@+id/btn3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_toRightOf="@+id/btn4"> </Button> <Button android:id="@+id/btn4" android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/button" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_below="@+id/btn1"> </Button> <Button android:id="@+id/btn5" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_below="@+id/btn1" android:layout_above="@+id/btn3" android:layout_toRightOf="@+id/btn4" android:layout_toLeftOf="@+id/btn2"> </Button> </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:id="@+id/LayoutLeft" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_toLeftOf="@+id/LayoutRight" android:orientation="vertical"> <Button android:id="@+id/btn1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button"> </Button> <Button android:id="@+id/btn2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button"> </Button> </LinearLayout> <LinearLayout android:id="@+id/LayoutRight" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:layout_above="@+id/LayoutDumy"> <Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/button"> </Button> </LinearLayout> <LinearLayout android:id="@+id/LayoutDumy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/LayoutLeft"> </LinearLayout> </RelativeLayout>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:id="@+id/LayoutLeft" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_toLeftOf="@+id/LayoutDumy2" android:orientation="vertical"> <Button android:id="@+id/btn1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button"> </Button> <Button android:id="@+id/btn2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/button"> </Button> </LinearLayout> <LinearLayout android:id="@+id/LayoutRight" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentRight="true" android:orientation="horizontal" android:layout_toRightOf="@+id/LayoutDumy2" android:layout_above="@+id/LayoutDumy1"> <Button android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_weight="1"> </Button> <Button android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_weight="1"> </Button> <Button android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/button" android:layout_weight="1"> </Button> </LinearLayout> <LinearLayout android:id="@+id/LayoutDumy1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/LayoutLeft"> </LinearLayout> <LinearLayout android:id="@+id/LayoutDumy2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true"> </LinearLayout> </RelativeLayout>