最初からのAndroid開発 View(画面部品) No.1 フォント等の文字の設定

この記事は、最初からのAndroid開発という名前ですが、全くの初心者は対象としていません。Java言語を知っていて、Androidの入門書で簡単なアプリを作ったことがあるような人を対象としています。
この記事は、Androidの昔書いた記事のまとめの焼き直しです。

記事共通の話は次のページにまとめています。合わせてご確認ください。

最初からのAndroid開発 共通の話
最初からのAndroid開発まとめこの記事は、最初からのAndroid開発という名前ですが、全くの初心者は対象としていません。Java言語を知っていて、Androidの入門書で簡単なアプリを作ったことがあるような人を対象としています。この記

この記事の完全なソースコードは次のリポジトリのView01にあります。

webarata3/begin_Android
最初からのAndroid開発. Contribute to webarata3/begin_Android development by creating an account on GitHub.

フォントの設定いろいろ

今回のプログラム

MainActivity.java

package com.example.view01;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffff00"
        android:text="色の指定"
        android:textColor="#ff0000" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30sp bold normal"
        android:textSize="30sp"
        android:textStyle="bold"
        android:typeface="normal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30sp italic normal"
        android:textSize="30sp"
        android:textStyle="italic"
        android:typeface="normal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30sp bold+italic normal"
        android:textSize="30sp"
        android:textStyle="bold|italic"
        android:typeface="normal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30sp sans"
        android:textSize="30sp"
        android:typeface="sans" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30sp serif"
        android:textSize="30sp"
        android:typeface="serif" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30sp monospace"
        android:textSize="30sp"
        android:typeface="monospace" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:shadowColor="#f00"
        android:shadowDx="10.0"
        android:shadowDy="10.0"
        android:shadowRadius="1.0"
        android:text="影をつける"
        android:textSize="30sp" />

    <TextView
        style="@style/CodeFont"
        android:text="スタイル CodeFont" />

    <TextView
        style="@style/CodeFont.Blue"
        android:text="スタイル CodeFont.Blue" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="scaleX=2 あいうABC 2.0"
        android:textScaleX="2.0" />

</LinearLayout>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="CodeFont">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#ff0000</item>
        <item name="android:background">#cccccc</item>
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">16sp</item>
    </style>

    <style name="CodeFont.Blue">
        <item name="android:textColor">#0000ff</item>
    </style>
</resources>

実行結果

実行結果は次のようになります。

色を変える

色は、android:textColorで文字色、android:backgroundで背景色を指定できます。色自体の指定はCSSと同じように16進数で表します。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ffff00"
    android:text="色の指定"
    android:textColor="#ff0000" />

フォントの装飾

フォントの装飾は、android:textStyle属性で行います。android:textStyle属性は、太字、斜体を指定できます。指定できる値は次のとおりです。

種類 説明
normal デフォルト。加工していない文字。
bold 太字
italic 斜体

android:textStyle属性は複数(と言っても実質boldとitalicの組み合わせだけですが)を組み合わせて両方の効果を適用することができます。その場合には、「|」で属性値をつなげます。例えば次のようにします。

android:textStyle="bold|italic"

フォントの装飾は最初の例では次のようにしています。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="30sp bold normal"
    android:textSize="30sp"
    android:textStyle="bold"
    android:typeface="normal" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="30sp italic normal"
    android:textSize="30sp"
    android:textStyle="italic"
    android:typeface="normal" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="30sp bold+italic normal"
    android:textSize="30sp"
    android:textStyle="bold|italic"
    android:typeface="normal" />

フォントの種類

フォントの種類は、android:typeface属性で指定します。android:typefaceでは次の値を指定できます。

種類 説明
normal 標準
sans ゴシック
serif 明朝
monospace 等幅フォント

フォントの種類は最初の例では次のようにしています。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="30sp sans"
    android:textSize="30sp"
    android:typeface="sans" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="30sp serif"
    android:textSize="30sp"
    android:typeface="serif" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="30sp monospace"
    android:textSize="30sp"
    android:typeface="monospace" />

影をつける

フォントに影をつけることもでき、それは、android:shadowで始まる属性で指定します。

種類 説明
shadowColor 影の色。
shadowDx 影をX方向にどれだけずらすか。10.0等を指定する。負の値も指定可能。
shadowDy 影をY方向にどれだけずらすか。10.0等を指定する。負の値も指定可能。
shadowRadius 影の半径?実際に動作させると数値を大きくすると影がぼやけた感じになる。

フォントの影は最初の例では次のようにしています。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shadowColor="#f00"
    android:shadowDx="10.0"
    android:shadowDy="10.0"
    android:shadowRadius="1.0"
    android:text="影をつける"
    android:textSize="30sp" />

スタイル

フォント関連の設定は、CSSのスタイルシートのようにスタイルとしてまとめて、複数の要素に適用することができます。スタイルは次のように定義します。

<style name="CodeFont">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#ff0000</item>
    <item name="android:background">#cccccc</item>
    <item name="android:typeface">monospace</item>
    <item name="android:textSize">16sp</item>
</style>

<style name="CodeFont.Blue">
    <item name="android:textColor">#0000ff</item>
</style>

styleタグのname属性は、(多分)大文字で始める必要があります(ドキュメントがみつからなかった)。style要素の小要素に、item要素で適用するスタイルを設定します。name属性に設定する属性、コンテンツ部に適用する値を設定します。

また、スタイルは継承もできます。継承元のスタイルの名前の後に、「.スタイル名」をつけます。上記の例だと、CodeFont.Blueスタイルは、CodeFontスタイルを継承しています。

スタイルは最初の例では次のようにしています。

<TextView
    style="@style/CodeFont"
    android:text="スタイル CodeFont" />

<TextView
    style="@style/CodeFont.Blue"
    android:text="スタイル CodeFont.Blue" />

幅を伸ばす

最後に、フォントの幅を伸ばす例を見ていきます。フォントの幅は、android:textScaleX属性で指定します。android:textScaleXでは数値を指定することができます。

フォントの幅は最初の例では次のようにしています。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:text="scaleX=2 あいうABC 2.0"
    android:textScaleX="2.0" />

コメント