Firejune

타이타니움을 이용하여 아이폰 또는 아이패드 애플리케이션을 구축하다 보면 탭바(탭 표시줄)에 표시될 아이콘 사용법에 대하여 의문이 생길 것입니다. 애플은 이러한 목적으로 사용할 수 있는 내장 시스템 아이콘 12개를 제공합니다. 이 시간에는 기본으로 제공되는 내장 시스템 아이콘의 사용법과 사용자가 지정한 이미지 아이콘을 탭바에 적용하는 방법에 대하여 알아봅니다.

아래 코드는 두개의 윈도를 탭으로 전환하는 유저 인터페이스를 간단하게 구성한 것입니다. 이 코드를 기반으로 탭바 아이콘 지정방법에 대하여 설명하도록 하겠습다.

var tabGroup = Ti.UI.createTabGroup();

var win1 = Ti.UI.createWindow({
  title: "Home Page"
});

var tab1 = Ti.UI.createTab({
  icon: "tabbaricons/light_home.png",
  title: "Home",
  window: win1
});

tabGroup.addTab(tab1);

var win2 = Ti.UI.createWindow({
  title: "Bookmarks Page"
});

var tab2 = Ti.UI.createTab({
  icon: Titanium.UI.iPhone.SystemIcon.BOOKMARKS,
  window: win2
});

tabGroup.addTab(tab2);

tabGroup.open();

사용자 지정 탭바 아이콘

위 코드에서 tab1에 정의된 탭은 사용자 지정 아이콘으로 만들어지는 탭바 버튼입니다. “Resources” 폴더에 "tabbaricons"라는 폴더를 만들고 "light_home.png"라는 이름의 이미지 경로를 지정하는 것으로 사용자 지정 아이콘을 사용할 수 있습니다. 여기에 사용할 수 있는 양질의 탭바 아이콘을 무료로 제공하는 사이트들을 몇몇 소개합니다.

• glyphish.com
• app-bits.com
• iconsweets.com
• iconsweets2.com

아이폰 4이상에서 지원하는 레티나 디스플레이(Retina Display)를 위해서는 약간의 달러를 지불하고 @2x 버전을 구입할 수도 있습니다. 이 경우 동일한 위치에 "light_home@2x.png"파일이 위치하는 것 만으로 별도의 추가 작업 없이 서로다른 해상도에 대응할 수 있습니다. 멋지죠?

내장 시스템 탭바 아이콘

그리고 tab2에 정의된 탭은 애플에서 기본으로 제공하는 내장 시스템 아이콘을 이용하여 만들어진 탭바 버튼입니다. 모든 해상도에 대응하는 아이콘을 무료로 사용할 수 있지만 애플이 의도하는 목적으로만 사용할 수 있습니다. 예를 들면 '즐겨찾기' 아이콘을 사용하는 경우 레이블이 시스템에 설정된 언어에 따라 자동으로 기입되기 때문에 개발자기 이를 다른 것으로 대치할 수 없습니다. 때문에 이 경우라면 title속성을 작성하는 것은 무의미 합니다.

애플에서 기본으로 제공하는 12가지 내장 시스템 아이콘은 다음과 같습니다.

Icon	Name	Code
	Bookmarks	Ti.UI.iPhone.SystemIcon.BOOKMARKS
	Contacts	Ti.UI.iPhone.SystemIcon.CONTACTS
	Downloads	Ti.UI.iPhone.SystemIcon.DOWNLOADS
	Favorites	Ti.UI.iPhone.SystemIcon.FAVORITES
	Featured	Ti.UI.iPhone.SystemIcon.FEATURED
	History	Ti.UI.iPhone.SystemIcon.HISTORY
	More	Ti.UI.iPhone.SystemIcon.MORE
	Most Recent	Ti.UI.iPhone.SystemIcon.MOST_RECENT
	Most Viewed	Ti.UI.iPhone.SystemIcon.MOST_VIEWED
	Recents	Ti.UI.iPhone.SystemIcon.RECENTS
	Search	Ti.UI.iPhone.SystemIcon.SEARCH
	Top Rated	Ti.UI.iPhone.SystemIcon.TOP_RATED