コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

Androidアプリ入門 No.35 LinearLayoutのpadding

LinearLayout

padding

LinearLayoutの最後にpadding関連の属性を解説する。paddingはCSSのpaddingと同様で、ウィジェットの上下左右に間隔をあける。paddingは以下の属性で指定できる。

属性 説明
padding 上下左右に指定された間隔分広げる。
paddingTop 上に指定された間隔分、ウィジェットを広げる。
paddingBottom 下に指定された間隔分、ウィジェットを広げる。
paddingLeft 左に指定された間隔分、ウィジェットを広げる。
paddingRight 右に指定された間隔分、ウィジェットを広げる。

まず、同じスタイルを利用するのでstrings.xmlを以下のように編集する。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">ActivityTest</string>

    <style name="CodeFont">
        <item name="android:text">あいうえお</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">#fff</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">26sp</item>        
    </style>
</resources>

次に、main.xmlを以下のようにする。それぞれ、padding指定なしのTextViewと並べて比較している。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:baselineAligned="false"
        >
        <TextView style="@style/CodeFont"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:baselineAligned="false"
        >
        <TextView
            style="@style/CodeFont"
            android:paddingLeft="15sp"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:baselineAligned="false"
        android:gravity="right"
        >
        <TextView style="@style/CodeFont"/>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:baselineAligned="false"
        android:gravity="right"
        >
        <TextView
            style="@style/CodeFont"
            android:paddingRight="15sp"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#f00"
        android:baselineAligned="false"
        android:gravity="top"
        >
        <TextView style="@style/CodeFont"/>
        <TextView
            style="@style/CodeFont"
            android:paddingTop="15sp"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:baselineAligned="false"
        android:gravity="bottom"
        >
        <TextView style="@style/CodeFont"/>
        <TextView
            style="@style/CodeFont"
            android:paddingBottom="15sp"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:baselineAligned="false"
        >
        <TextView style="@style/CodeFont"/>
        <TextView
            style="@style/CodeFont"
            android:padding="15sp"
            />
    </LinearLayout>
</LinearLayout>

実行結果は以下。背景色も含めてpaddingされているのがわかる。