【Android】アイコンフォント表示 ~ material-design-icons編 ~

今年ももう1ヶ月が経とうとしていますね。早い！毎年同じことを言っている気がします。まだ3週間ですが。。。

申し遅れましたが私、仮面アンドロイダーのホサカと申します。 活動時間は3分です。ええ、夜じゃなくて昼です。それってウルトラマンじゃないの？と思った方、おっしゃる通りです。 ツッコミセンスありありです。

さて、本日はAndroid開発についてご紹介致します。 最近の話題で持ち上がる1つとして、【マテリアルデザイン】があるかと思います。 Android 5.0(Lollipop)より採用されるということで、各Androidアプリが対応していくことになるでしょう。

マテリアルデザインとは

デザインマニフェストの一つです。Googleがこのデザインを採用しました。これを取り入れることにより、各アイテムに奥行きなどが与えられ、立体的に表現されることになります。デザインに一貫性を持たせることや、直感的に使えるようになり、ユーザーにストレスを与えないことが目的です。

また、デザイン知識がないエンジニアにとってもよいことと思います。スタンダードなデザインのガイドラインがGoogleに定義されたことにより、デザイン性の高いものを作れるようになったと思います。

etc.タブの高さ、画面の余白等

アイコンフォントを作成する

マテリアルデザインを取り入れるにあたって、まず紹介したいのがmaterial-design-iconsです。 個人アプリ開発や、デザイナー不足の環境には大変利用価値があると思います。 Googleがマテリアルデザインに対応したアイコンをリリースしてくれています。 ※使用時にはライセンスを記述

まずは、上記リンクからアイコンをダウンロードします。

ダウンロードしたzipファイルを解凍するとこんな中身になっているかと。

index.htmlを開くとアイコン一覧が確認できます。 一覧から使用したいアイコンを見繕います。

しかし、このままではアイコンフォントとして使用できないので、アイコンフォント化する必要があります。 そのため、IcoMoonというサービスを用います。 アイコンのSVGファイルをアップロードすると、アイコンフォント化してくれます。 SVGデータはマテリアルデザインアイコンのフォルダに格納されています。 上記リンクから作成します。 ※各アイコンに設定した文字が表示するときに必要になります。 IcoMoomで作成したものをダウンロードすると【fonts】フォルダの中身がこんなになっています。

アイコンフォント表示には、この【icomoon.ttf】を用います。

Androidアプリへ組み込む

やっとアイコンフォントを表示する準備ができました。 ここからが本題です。 以下ステップに沿ってやってみます。

1.【assets】フォルダに【icomoon.ttf】を格納します。

2.IconFontDrawableクラスを作成します。

public class IconFontDrawable extends TextDrawable {

    public static final int FONT_SIZE = 24;

    private final Resources resources;
    private static Typeface fontIcon;
    public IconFontDrawable(Context context) {
        super(context);
        resources = context.getResources();
        if (fontIcon == null) {
            fontIcon = Typeface.createFromAsset(context.getAssets(), "icomoon.ttf");
        }
        setTypeface(fontIcon);
    }

    public void setIcon(String code) {
        this.setText(code);
    }

    public void setIcon(int resourceId) {
        this.setIcon(resources.getString(resourceId));
    }
}

3.フォントアイコンに設定した文字列を【strings.xml】に定義します。 ※下記の場合は、アイコンに[e601, e602, e603, ....]の様に定義してあります。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="font_icon_clear">&#xe600;</string>
    <string name="font_icon_event_note">&#xe601;</string>
    <string name="font_icon_cancel">&#xe602;</string>
    <string name="font_icon_exit_to_app">&#xe603;</string>
    <string name="font_icon_view_headline">&#xe604;</string>
    <string name="font_icon_help">&#xe605;</string>
    <string name="font_icon_people">&#xe606;</string>
    <string name="font_icon_star_outline">&#xe607;</string>
    <string name="font_icon_star">&#xe608;</string>
    <string name="font_icon_navigate_next">&#xe609;</string>
    <string name="font_icon_navigate_before">&#xe60a;</string>
    <string name="font_icon_settings">&#xe60b;</string>
    <string name="font_icon_explore">&#xe60c;</string>
    <string name="font_icon_search">&#xe60d;</string>
    <string name="font_icon_mail">&#xe60e;</string>
</resources>

4.IconFontDrawableをアイコンフォント使って表示する

@InjectView(R.id.ic_font)  ImageView iconFont;

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

    ButterKnife.inject(this);
    iconFont.setImageDrawable(createIconFont(R.string.font_icon_cancel));
}

private IconFontDrawable createIconFont(int iconId) {
    IconFontDrawable drawable = new IconFontDrawable(getActivity());
    drawable.setIcon(getString(iconId));
    drawable.setTextColor(getResources().getColor(R.color.red));
    drawable.setTextSize(IconFontDrawable.FONT_SIZE);

    return drawable;
}

以上で表示できました。 アイコンフォントを表示するクラスは意外と簡単ですね！ 全然紹介されていなかったので、紹介させていただきました。 参考になれば幸いです。

大幅に活動時間を超過してしまったので、本日はこれにて。

本日のワンポイントコーディング

• enumの使い方

エラーステータス等状態によって、文言を切り分けたいというとき, enumのswitch文とかを書いたりしてしまっていないでしょうか? 下記の様にenumを使って状態毎の文言を取得すると便利ですね。

enum ErrorStatus {
    TEXT_EMPTY(R.string.message_error_text_empty),
    TEXT_OVER(R.string.message_error_text_over);
    
    private int errorTextId;

    private ErrorStatus(int errorTextId){
        this.errorTextId = errorTextId;
    }

    public int getErrorTextId(){
        return errorTextId;
    }
}