Hatena::ブログ(Diary)

プログラミング雑記 このページをアンテナに追加 Twitter

2011-01-31 LinearLayoutとRelativeLayoutの使い方をまとめてみた

LinearLayoutとRelativeLayoutの使い方をまとめてみた

| 05:01 | LinearLayoutとRelativeLayoutの使い方をまとめてみたを含むブックマーク


Androidアプリで画面を作成する際、LinearLayoutとRelativeLayoutの使い方をしっかり把握しておかないと、後々苦労することが多いと思いますので、レイアウト構成を自分の知る範囲でまとめてみました。


LinearLayoutの場合


1 均等に配置

XML

f:id:Korsakov:20111002152110p:image


2 余った幅全体に配置

XML

f:id:Korsakov:20111002152111p:image


3 真ん中で2等分

XML

f:id:Korsakov:20111002152112p:image


4 上記の縦バージョン

XML

f:id:Korsakov:20111002152113p:image


RelativiLayoutの場合

5 両端固定幅、真ん中は幅いっぱい

XML

f:id:Korsakov:20111002152114p:image


6 上記のレイアウトに追従する形で配置

XML

f:id:Korsakov:20111002152115p:image


7 上下に両端、真ん中配置のボタンを配置

XML

f:id:Korsakov:20111002152116p:image


8 上記レイアウトの空白を埋める配置(ListView等)

XML

f:id:Korsakov:20111002152117p:image


9 上記レイアウト中央の両端に、ボタンを配置

XML

f:id:Korsakov:20111002152118p:image


10 相互に作用する配置

XML

f:id:Korsakov:20111002152119p:image


LinearLayoutとRelativiLayoutを複合

11 ボタンの高さを任意のレイアウトの高さに合わせる

XML

f:id:Korsakov:20111002152120p:image


12 上記レイアウトを真ん中で2等分した配置

XML

f:id:Korsakov:20111002152121p:image


XML

1

<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>


2

<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>


3

<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>


4

<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>


5

<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>


6

<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>


7

<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>


8

<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>


9

<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>


10

<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>


11

<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>


12

<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>


dddddd 2011/07/01 20:12 10番
android:id="@+id/btn4" の属性
android:layout_alignParentLeftt="true" が

Leftt になっていますよ。

KorsakovKorsakov 2011/07/02 00:42 dddさん
ご指摘ありがとうございました。
先ほど修正しました。

あ 2011/10/28 22:56 いつも見させてもらってます。
画像リンク切れてます。

KorsakovKorsakov 2011/10/28 23:36 コメントありがとうございます。
先ほど修正しました。

16824He1016824He10 2012/06/01 16:45 目茶苦茶、目茶苦茶、もう一つ目茶苦茶、感謝です。

nobuonobuo 2012/08/24 08:45 horizontalなlinearlayoutの中にbutto nを3つ均等に並べたいのですが 、weightの値をそれぞれ1に設定 しても、button内のtextの長さに よってbuttonの大きさが変わっ てしまいます。 textの長さに依存せずbuttonの幅 を均等に設定するにはどうした らよいのでしょうか?

hogehoge 2012/08/27 17:11 nobuoさん
layout_widthがwrap_contentになっていませんか?
fill_parentにしてみてください。

nobuonobuo 2012/08/31 15:53 初歩的な質問にも丁寧に答えていただいてありがとうございました。解決しました。

yuyu 2013/05/08 02:39 とても丁寧に説明されていて感動しました。
ただボタンのテキストがすべて「android:text="@string/button"」となっているのでどのボタンがどのIDに対応しているのかわかりにくかったです。
ボタンのテキストをIDと同じにしてみてはいかがでしょうか。

リンク元