LoginSignup
23
24

More than 5 years have passed since last update.

Androidiアプリ開発をIconFontで幸せに

Last updated at Posted at 2015-12-06

チャオ!

Android開発でアイコンフォントを使うと色々ハッピーになれるよ!
単色しか使えないんだけど、むしろマテリアルデザインとは相性いいよね!

何がうれしいの?

iOS・ウェブと共通で使える

このメリットのために、ワザワザフォント化している説

容量が軽い

  • そもそもpngなどで書きだしたものよりベクター画像の方軽い
  • ldpi,mdpi,hdpi,xhdpi,xxhdpiとかそれぞれのサイズに合った画像を用意するとかもう地獄。
  • サイズ、色違いも1つで済む

大きくしてもガタガタにならない

ベタクーなのでなめから、普通に文字なのでアニメーションとかさせてもいい感じに
sample.png

テキストなので使いやすい

click_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="@color/colorDisabled"/>
    <item android:state_selected="true" android:color="@color/colorSelected"/>
    <item android:state_pressed="true" android:color="@color/colorPressed"/>
    <item android:color="@color/colorNormal"/>
</selector>

みたいにクッリクしたら何色になるかを設定していたら

android:textColor="@drawable/click_color"

とするだけで、色数分画像を作らなくてもOK!

デメリットは?

  • 単色オンリー(文字扱いなのでカラフルものは出来ないですー
  • サイズ合わせにコツがいる。文字サイズ指定でサイズをセットするので、慣れるまで大変

実装方法

1.アイコンフォントを用意

アイコンはicomoonから取るのがオススメ。
ロゴとかもアイコンフォントにしたければ、svgで書きだした画像を食べさせるとフォント化してくれます。
icomoonの使い方とかは このサイトが詳しいかも
icomoonの使い方

2.カスタムフォントの使い方

カスタムフォントのセットのしかたと使い方は下記サイドがいい感じに解説してくれています。
私もTextViewを継承したクラスを作って使うのが正義かなと・・・
[Android]xmlで独自フォントを指定できるTextViewを作る

ただ、こんな便利ライブラリの誘惑も・・
Androidでカスタムフォントを簡単に導入(Caligaphy)

3.こういうのがアレば便利に使えるかも

テキストをセットするときは"\ue900"とか"p"とか何がどのアイコンだったか分からなくなりがちなので、
下記のようにxmlにまとめてres/valuesに置いておくと便利です。

string_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <string name="icon_home" tools:ignore="MissingTranslation">\ue900</string>
    <string name="icon_back" tools:ignore="MissingTranslation">\ue901</string>

</resources>

こんなふうにどのアイコンをセットしているのかわかりやすくなります。

android:text="@string/icon_home"

それではアイコンフォントでハッピーになってもらえればと!

23
24
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
24