コンテンツにスキップ

XMLでのLayout

RelativeLayout

Androidで使用できるLayoutとしては、下記が存在します。

  • LinearLayout
  • RelativeLayout
  • FrameLayout
  • TabletLayout
  • TableRow

Buttonを追加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/textView1"
        />

</RelativeLayout>

Viewの大きさは、

1
2
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

で指定できる。

値 意味
wrap_content コンテンツサイズに合わせる
match_parent 親のサイズに合わせる

画面いっぱいに表示する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/textView1"
        />

</RelativeLayout>

サイズ指定する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        />

    <Button
        android:id="@+id/button1"
        android:layout_width="100px"
        android:layout_height="200px"
        android:layout_toRightOf="@+id/textView1"
        />

</RelativeLayout>

ボタンの横にボタンを配置する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        />

    <Button
        android:id="@+id/button1"
        android:layout_width="100px"
        android:layout_height="200px"
        android:layout_toRightOf="@+id/textView1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button1"
        />
</RelativeLayout>

ボタンの下にボタンを配置する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        />

    <Button
        android:id="@+id/button1"
        android:layout_width="100px"
        android:layout_height="200px"
        android:layout_toRightOf="@+id/textView1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_alignLeft="@+id/button2"
        />
</RelativeLayout>

親に合わせて設置

左の上寄せ

1
2
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"

右の上寄せ

1
2
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"

左の下寄せ

1
2
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"

右の下寄せ

1
2
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"