今年ももう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"></string> <string name="font_icon_event_note"></string> <string name="font_icon_cancel"></string> <string name="font_icon_exit_to_app"></string> <string name="font_icon_view_headline"></string> <string name="font_icon_help"></string> <string name="font_icon_people"></string> <string name="font_icon_star_outline"></string> <string name="font_icon_star"></string> <string name="font_icon_navigate_next"></string> <string name="font_icon_navigate_before"></string> <string name="font_icon_settings"></string> <string name="font_icon_explore"></string> <string name="font_icon_search"></string> <string name="font_icon_mail"></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; } }
