Edited at

アイコンフォントをDrawableに変換する薄いライブラリ

More than 3 years have passed since last update.

タイトル通りですが、iconFontをDrawableに変換する薄いライブラリを書きました。

kazy1991/FontDrawable


TL;DR


  • 任意のアイコンフォントをDrawableもしくはBitmapに変換できる。

  • 「文字コード → アイコン」のマッピング機能は提供しない。

  • RatingBarなどのProgressDrawableにも対応。


  • コアの実装(FontDrawable.java)は200行以下なので、実装が簡単に把握出来る。


作った動機

弊社では内製の便利アイコンフォントがあるので、ほとんどのデザインはアイコンフォントで組むことが出来ます。アイコンフォントを使った開発は快適で、


  • デザイナーさんの作業が減らせる。

  • "デザインパーツ待ち"の時間が0になる。

  • 解像度の違いを気にする必要がない。

  • アプリサイズを小さく出来る可能性がある。

など多くのメリットがあります。

一方でこんなやりとりが何回かありました。

デザイナーさん「このメニューのアイコンはxxx(社内製アイコンフォント)のyyyでお願いします。」

僕 「そこDrawableで指定する必要があって、アイコンフォントは(凄い頑張らないと)使えないので、面倒ですが画像用意して頂けますか?」

アイコンフォントからDrawableへの変換は十分な時間があれば対応できる自信はありました。しかしサクッと実装出来るほどDrawableに詳しくなかったので諦めて画像作ってもらうことが多く、ずっとモヤモヤしていました。そして先週にも同様の出来事があったので、カッとなって週末で変換ライブラリを作りました。

(既存の「アイコンフォント → Drawable」の変換ライブラリもありますが、僕の好みに合いませんでした :crying_cat_face: )


使い方

経緯はそこそこにして、FontDrawableの利用手順の紹介をします。


Step 1. JitPackレポジトリを参照先に追加

  repositories {

maven {
url "https://jitpack.io"
}
}


Step 2. FontDrawableを依存に追加

  dependencies {

compile 'com.github.kazy1991:FontDrawable:0.9.1'
}


Step 3. 好きなアイコンフォントを main/assets 以下に入れる


Step 4. 下記のコードは font-awsomeを使ったサンプルです。

public class MainActivity extends AppCompatActivity {

static final String CUSTOM_FONT_PATH = "fontawesome-webfont.ttf";

static final char SPACE_SHUTTLE_CODE = '\uf197';

@ColorInt
static final int MATERIAL_BLUE = 0xff00a8f7;

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

ImageView drawableImageView = (ImageView) findViewById(R.id.drawable_image_view);
FontDrawable spaceShuttle = new FontDrawable.Builder(this, SPACE_SHUTTLE_CODE, CUSTOM_FONT_PATH)
.setSizeDp(100)
.setColor(MATERIAL_BLUE)
.build();
drawableImageView.setImageDrawable(spaceShuttle);

RatingBar ratingBar = (RatingBar) findViewById(R.id.rating_bar);
FontProgressDrawable progressDrawable = new FontProgressDrawable.Builder(this, SPACE_SHUTTLE_CODE, CUSTOM_FONT_PATH)
.setProgressColor(MATERIAL_BLUE)
.setBackGroundColor(Color.LTGRAY)
.setPaddingDp(4)
.build();
ratingBar.setProgressDrawable(progressDrawable);
}
}

CUSTOM_FONT_PATHmain/assetsからの相対パスです。文字コードの調べ方がわからない方がいると思いますが、font-awsomeの場合だと各アイコンのパーマリンクに書いてあります。このお城のアイコンの場合、画像右下のf286という値ですね。

スクリーンショット 2015-12-20 23.39.07.png


サンプルコードのスクリーンショット


ProgressDrawableにも対応

正確にはLayerDrawableですね。ちょうどRatingBarの星をアイコンフォントにして欲しいという要望があったので、ProgressDrawableにも対応しました。(実装読んでもらうとわかると思うのですが、ProgressDrawableをJavaから変更するのは結構大変でした。)


かなり細かい点

特別なパフォーマンスチューニングはしてないですが、性能を求めるなら生成コストの高そうなTypefaceをシングルトンにして使い回し、FontDrawable.Builder(Context context, char fontCode, Typeface typeface)のコンストラクタを使うのが良いと思います。

Paintのプロパティを直接扱いたい場合はFontDrawable.Builder(Context context, char fontCode, CustomFontPaint paint)というコンストラクタがあるので、CustomFontPaintをインスタンス化してゴニョゴニョして下さい。


おわり

FontDrawableをもし気に入ってもらえたら、githubのほうにスターしてくれると嬉しいです :pray:

今後もOSS活動頑張ります。