コンピュータクワガタ

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

Androidアプリ入門 No.07 TextViewのフォント関連以外の主な属性

今風に書き直した記事がありますので、合わせて参照ください。
blog.webarata3.link

TextView

TextViewで使えるフォント関連以外の主な属性を紹介します。
特に、autoLinkはおもしろい!
電話かけ放題ではないけど。

その他主な属性

TextViewのその他、主な属性は以下の通り。

属性 説明
autoLink URLやemailなどの文字列を自動でリンクする。
lineSpacingExtra テキストの行間の指定。
lineSpacingMultiplier テキストの行間を比率で指定する。
lines 表示する際の行数を指定する。指定行からはみ出た分は見えない。
scrollHorizontally テキストがビューより広いことを許す。つまりtrueを指定するとビューより長いテキストでも折り返さない。
ellipsize 文字列がはみ出した場合の挙動を設定する。

autoLinkに指定できる属性は以下。all以外は「|」で連結できる。たとえば、「map|phone」とすると住所と電話番号を自動でリンクする。

種類 名前
none 何もしない。デフォルト動作。
web URLを自動でリンクにする。
email eメールを自動でリンクにする。
phone 電話番号を自動でリンクにする。
map 住所を自動でリンクにする。ただし、日本語には対応していない。
all すべてのパターンをリンクにする。

autoLinkは以下の例で確認できる。なお、mapに関してはエミュレータでは動作しなかったが、実機(GALAXY S)では確認できた。

<?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"
    android:background="#fff"
    >
<TextView
    style="@style/common"
    android:text="■web指定: http://www.google.co.jp a@example.net"
    android:autoLink="web"
    />
<TextView
    style="@style/common"
    android:text="■web email指定: http://www.google.co.jp a@example.net"
    android:autoLink="web|email"
    />
<TextView
    style="@style/common"
    android:text="■phone指定: 999-999-999"
    android:autoLink="phone"
    />
<TextView
    style="@style/common"
    android:text="■map指定: 620 Eighth Avenue New York, NY 10018"
    android:autoLink="map"
    />
<TextView
    style="@style/common"
    android:text="■all指定: 620 Eighth Avenue New York, NY 10018"
    android:autoLink="all"
    />
</LinearLayout>

動作結果は以下。

lineSpacingExtraは行ごとに追加のスペースを付加する。また、lineSpacingMultiplierは行間のスペースを比率で指定する。まず、stirngs.xmlを定義する。

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

    <style name="common">
        <item name="android:layout_width">85dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">16sp</item>
    </style>
</resources>

main.xmlを以下のように書く。

<?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"
    android:background="#fff"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <TextView
            style="@style/common"
            android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 指定なし"
            />
        <TextView
            style="@style/common"
            android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 3.0sp"
            android:lineSpacingExtra="3.0sp"
            />
        <TextView
            style="@style/common"
            android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 6.0sp"
            android:lineSpacingExtra="6.0sp"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <TextView
            style="@style/common"
            android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 指定なし"
            />
        <TextView
            style="@style/common"
            android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 1.2"
            android:lineSpacingMultiplier="1.2"
            />
        <TextView
            style="@style/common"
            android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 1.5"
            android:lineSpacingMultiplier="1.5"
            />
    </LinearLayout>
</LinearLayout>

実行結果は以下。折り返した文字列の間にスペースが入っているのがわかる。

linesは以下の例で確認できる。もともと5行のTextViewを4行と2行に制限しどうなるかを確認する。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff"
    >
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 指定なし"
    />
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 4"
    android:lines="4"
    />
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの 2"
    android:lines="2"
    />
</LinearLayout>

動作結果は以下。

scrollHorizontallyの例。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff"
    >
<TextView
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの"
    android:textColor="#000"
    android:textSize="16sp"
    android:scrollHorizontally="true"
    />
</LinearLayout>

実行結果は以下。テキストが折り返さずに途中で切れてしまっているのがわかる。

そのうえで、ellipsizeの例を見る。scrollHorizontallyはすべてtrueのため1行に表示しようとする。その文字列がはみ出した場合の挙動の違いを定義できる。定義できる内容は以下の通り。

種類 説明
none 何もしない。デフォルト動作。
start 先頭に省略記号を挿入。
middle 中間に省略記号を挿入。
end 最後に省略記号を挿入。
marquee 文字のスクロール(確認ができなかった)。

まず、共通部分をstyleとして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="common">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">30sp</item>
    </style>
</resources>

main.xmlは以下の通り。

<?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"
    android:background="#fff"
    >
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの"
    android:scrollHorizontally="true"
    android:ellipsize="none"
    />
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの"
    android:scrollHorizontally="true"
    android:ellipsize="start"
    />
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの"
    android:scrollHorizontally="true"
    android:ellipsize="middle"
    />
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの"
    android:scrollHorizontally="true"
    android:ellipsize="end"
    />
<TextView
    style="@style/common"
    android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの"
    android:scrollHorizontally="true"
    android:ellipsize="marquee"
    />
</LinearLayout>

実行結果は以下。marqueeはスクロールはしなかったが最後の文字がややぼやけている。