Android에서 아이콘폰트 사용하기

지난 Android BootStrap 포스팅시 이미지리소스대신 아이콘폰트를 이용하는 것에 대해 간단하게 설명한적이있다. 해상도에 따른 여러벌의 이미지대신 아이콘 폰트를 사용해서 리소스관리와 효율적이다라는 유용성을 강조 했다. 아이콘폰트를 이용해 어떻게 안드로이드에서 사용하는지 자세히 알아보자.

아이콘폰트를 이용해서 이미지리소소 대신 사용하는 것은 이미 웹에서 흔한일이다. 정의된 문자를 통해 폰트를 생성하고 이를 웹에서 불러들여 사용한다. 안드로이드에도 이런 웹 기술을 그대로 구현가능하다. 

왜 사용해야 할까?

커스텀폰트를 만드는 것도 쉬운게 아닌데, 이렇게 어렵게 반드시 사용해야 되는 이유가 있을까라는 의문이 들 수 도 있다. 현재 안드로이드는 기기파편화로 인해 다양한 DPI들이 존재한다. 이렇게 봤을때 각각기기에 맞는 이미지를 최적화 하기 위해 각각의 DPI에 맞는 이미지를 가지게 될 것이다. 

예를 들어 아이콘 이미지가 5개가 있다면 hdpi, xhdpi, xxhdpi, xxxhdpi의 이미지를 가져야 한다. 5×4 = 20개의 이미지를 생성/관리 해야 된다. 앱의 용량 면에서도 많은 이미지들은 부담될 수 밖에 없다. 

아이콘 폰트로 대체 하게 된다면 여러벌의 이미지를 생성할 필요가 없으며, 이미지에 비해 용량을 획기적으로 줄일 수 있다. 그리고 색상, 그림자를 추가하거나 효과를 줄 수 있다. 예를들면 아이콘의 normal, pressed 이미지를 각각 가질 필요가 없다. 폰트의 색상을 변경하듯 쉽게 바꿀 수 있기 때문이다.

커스텀 아이콘 폰트 만드는 방법?

이미지 웹으로 인해 아이콘폰트를 무료로 제공하거나, 쉽게 만들 수 있는 온라인 서비스들이 많이 있다. 개인적으로 fontastic이라는 서비스를 추천한다. 무료로 1500여종의 폰트를 무료로 제공하며 쉽게 아이콘폰트제작 또는 나의 폰트 관리가 가능하다.

안드로이드 적용방법

위의 fontastic에서 원하는 폰트를 받으면 다양한 타입의 폰트와 스타일시트 파일을 볼 수 있다. 여기서 style.css에서 어떤 이미지가 어떤 유니코드로 대체 하는지 확을 하고 안드로이드에 사용 할 수 있도록 resource화 해야 한다.

 

  1. icon.ttf파일을 리소스 assets/ 위치에 복사한다. 

  1. css의 아이콘 고유의 유니코드를 대신 사용할 수 있도록 string resource로 대체한다. 

style.css

.icon-list:before {
  content: "a";
}

.icon-music:before {
  content: "b";
}

.icon-rss:before {
  content: "c";
}

안드로이드에서 사용하기 위해 아래와 같이 정의한다.

res/values/icons.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="icon-list">a</string>
    <string name="icon-music">b</string>
    <string name="icon-rss">c</string>
</resources>
  1. github에 공개된 fonticon으로 아이콘을 불러오는 작업을 해보자. 아래처럼 아이콘을 TextView에 불러오는 간단한 코드다. 

FontIconTypefaceHolder.init(getAssets(), "icons.ttf");

TextView txt = (TextView) findViewById(R.id.txt_hello);
txt.setCompoundDrawables(FontIconDrawable.inflate(getResources(), R.xml.ic_music), null, null, null);

int padding = getResources().getDimensionPixelSize(R.dimen.font_padding);
txt.setCompoundDrawablePadding(padding);
txt.setPadding(padding, 0, 0, 0);

실행 하면 아래와 같이 아이콘폰트를 가지고 TextView에 넣을 수 있다. 

이처럼 아이콘폰트를 통해 다양한 디바이스에 대한 아이콘이미지 리소스관리 뿐만 아니라 용량을 줄이는등 좋은 결과를 얻을 수 있을 것으로 판단된다. 위의 예제는 보여주기위한 방법일뿐 실제 적용시 좀 더 관리되고, 쉽게 사용할 수 있도록 만들어서 사용하면 좋을 것이다.  

코드는 아래의 링크를 통해 다운받으면 된다. 

cfile25.uf.2265AC47529883F00EB06E.zip