[Android Studio] レイアウトの種類

どうも、tatsuです!

今日は、レイアウトの種類について説明します。

※この記事で使用しているAndroid Studioのバージョンは2.3.3です。

レイアウトの種類

Android Studioには様々なレイアウトがあり、主要なものを以下にあげます。

LinearLayout

ウィジェットを縦または横一列に配置するレイアウトです。
使いやすいので良く使うレイアウトの1つだと思います。
orientation属性にverticalを指定すると縦、horizontalを指定すると横に並びます。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.android.tatsu.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="こんにちは"
        android:textSize="20sp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="わたしは"
        android:textSize="20sp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tatsuです!"
        android:textSize="20sp"
        />
</LinearLayout>

↓vertical

↓horizontal

RelativeLayout

ウィジェットを相対位置を使って配置します。
これも良く使うレイアウトの1つだと思います。
基準となるウィジェットを決めて、そのウィジェットから見てどの位置に他のウィジェットを配置するかを決めていきます。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android.tatsu.myapplication.MainActivity">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="こんにちは"
        android:textSize="20sp"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="わたしは"
        android:textSize="20sp"
        android:layout_alignBottom="@+id/text1"
        android:layout_toRightOf="@+id/text1"
        />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tatsuです!"
        android:textSize="20sp"
        android:layout_alignBottom="@+id/text2"
        android:layout_toRightOf="@+id/text2"
        />
</RelativeLayout>

TableLayout

ウィジェットを格子状に配置します。
HTMLを使ったことがある方なら<table>タグと同じようなものを想像してもらえればと思います。
2つ分の横幅の項目を指定したりもできます。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android.tatsu.myapplication.MainActivity">

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1-1"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1-2"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1-3"
            android:textSize="20sp"
            />
    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2-1"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2-2"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2-3"
            android:textSize="20sp"
            />
    </TableRow>

</TableLayout>

GridLayout

ウィジェットを格子状に配置します。
TableLayoutととてもよく似ていますが、こちらは縦方向に2つ分の項目を表示したりできます。
GridLayout自体にandroid:columnCount属性を指定します。指定した数の列ができます。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="3"
    tools:context="com.android.tatsu.myapplication.MainActivity">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1-1"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1-2"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1-3"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2-1"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2-2"
            android:textSize="20sp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2-3"
            android:textSize="20sp"
            />

</GridLayout>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です