コンピュータクワガタ

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

Androidアプリ入門 No.06 フォント関連属性(再び)

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

TextView

TextViewはEditTextや、Buttonなどの親クラスとなっておりTextViewでは使わないだろう属性も定義されている。まずはEditTextやButtonなどのクラスでも使われる共通の属性の説明をする。

フォント関連属性

ここではフォント関連の指定方法を確認する。まず、フォント関連の主な属性は以下になる。

属性 説明
text 表示する文字の指定。
textSize 表示する文字のサイズ。
textStyle 太字、斜体等の文字のスタイルを設定する。
typeface フォントを指定する。
shadowColor 影の色。
shadowDx 影をX方向にどれだけずらすか。10.0等を指定する。負の値も指定可能。
shadowDy 影をY方向にどれだけずらすか。10.0等を指定する。負の値も指定可能。
shadowRadius 影の半径?実際に動作させると数値を大きくすると影がぼやけた感じになる。
textScaleX テキストの横方向の拡大率を指定。

textStyleでは以下が指定できる。textStyleは「|」で複数指定できる。その際ブランクは付けてはいけない。たとえば、「bold|italic」のように指定する。

種類 説明
normal 標準
bold 太字
italic 斜体

typefaceでは以下が指定できる。

種類 説明
normal 標準。
sans ゴシック体のようなフォント
serif 明朝体のようなフォント
monospace 等幅のフォント

まず、textstyleとtypefaceの例を示す。最初に共通部分を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">28sp</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="#ffffff"
    >
<TextView
    style="@style/common"
    android:text="ABCabc123-normal"
    android:textStyle="normal"
    />
<TextView
    style="@style/common"
    android:text="ABCabc123-bold"
    android:textStyle="bold"
    />
<TextView
    style="@style/common"
    android:text="ABCabc123-italic"
    android:textStyle="italic"
    />
<TextView
    style="@style/common"
    android:text="ABCabc123-italic bold"
    android:textStyle="bold|italic"
    />
<TextView
    style="@style/common"
    android:text="ABCabc123-sans"
    android:typeface="sans"
    />
<TextView
    style="@style/common"
    android:text="ABCabc123-serif"
    android:typeface="serif"
    />
<TextView
    style="@style/common"
    android:text="ABCabc123-monospace"
    android:typeface="monospace"
    />
</LinearLayout>

実行結果は以下のようになる。

次に、影の例を以下に挙げる。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="こんにちはABCabc123"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDx="10.0"
    android:shadowDy="10.0"
    android:shadowRadius="1.0"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDy="10.0"
    android:shadowRadius="1.0"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDx="10.0"
    android:shadowRadius="1.0"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDx="-10.0"
    android:shadowDy="-10.0"
    android:shadowRadius="1.0"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDy="-10.0"
    android:shadowRadius="1.0"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDx="-10.0"
    android:shadowRadius="1.0"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDx="5.0"
    android:shadowDy="5.0"
    android:shadowRadius="5.0"
    />
<TextView
    style="@style/common"
    android:text="こんにちはABCabc123"
    android:shadowColor="#f00"
    android:shadowDx="5.0"
    android:shadowDy="5.0"
    android:shadowRadius="10.0"
    />
</LinearLayout>

実行すると以下のようになる。

最後にtextScaleXの例を示す。同じく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="あいうABC 指定なし"
    />
<TextView
    style="@style/common"
    android:text="あいうABC 1.0"
    android:textScaleX="1.0"
    />
<TextView
    style="@style/common"
    android:text="あいうABC 1.5"
    android:textScaleX="1.5"
    />
<TextView
    style="@style/common"
    android:text="あいうABC 2.0"
    android:textScaleX="2.0"
    />
<TextView
    style="@style/common"
    android:text="あいうABC 5.0"
    android:textScaleX="5.0"
    />
</LinearLayout>

実行結果は以下。