앱 테마 만들기 #0

계산기 앱을 개발하면서 앱 테마를 구현했다. 계산기 앱은 안드로이드 개발을 공부하면서 신기술을 적용하고 테스트하기 위해서 만든 앱이다. 테마를 테스트하기에 계산기 앱이 적당하고 실제로 3가지 테마를 바꿔가며 사용할 수 있다.

두 번째 캡처는 숫자 패드에 숫자 이미지 적용했다. 그리고 버튼의 배경에 Tint 컬러를 적용했다. 세 번째 캡처는 버튼의 배경 이미지를 바꿨고 숫자는 컬러를 흰색으로 바꿨다. 이렇듯 테마에 필요한 다양한 요구사항을 우선 정리해 보면 아래와 같다. 

대상	내용	Json key, 예제
Activity	colorPrimary, colorPrimaryDark, colorAccent 컬러
Activity	상태바 컬러  네비게이션바 컬러	color: "#111111"
View	배경 이미지, 패딩, 타일모드	"background" : "bg.png"  or  "background" : {"normal : "bg.png", "pressed": "pressed.png", padding: "-1 -1 0 1.5", tilemode : true }
	배경 컬러	"background_color": "#111111"
	배경 이미지 틴트 컬러	"background_tintcolor" : ·"#f0f0f0"  or  "background_tintcolor" : { "normal" : "#f0f0f0", "pressed" : "#000000" }
TextView	텍스트 컬러	text_color
	텍스트 이미지	text_image: { "normal": "a.png",  "flag" : 3, "padding": "1.5" } // flag 1: empty text // 2: left drawable // 4: top drawable // 8: right drawable // 16: bottom drawable
	텍스트 틴트 컬러	text_tintcolor
	텍스트 쉐도우 컬러	text_shadow_color
ImageView	이미지	image
	이미지 틴트 컬러	image_tintcolor
FrameLayout	포그라운드 배경 이미지	foreground

크게 drawable과 color를 다룰 수 있다. drawable은 state를 가질 수 있고, 이미지에 따라서 padding을 다르게 넣을 수도 있다. tilemode일 경우는 작은 이미지를 타일 형식으로 반복해서 보여준다. color는 일반 컬러와 state를 가지는 컬러가 있다. TextView의 경우 텍스트 이미지는 텍스트 주위에 넣는 이미지다. 

정의하고 사용하는 방법은 간단하다. 예를 들어 세팅 페이지의 설정 한 개를 다루는 CommonSettingsView에 테마를 적용해 보겠다. 

우선 테마 아이템을 style에 정의한다. JSON에서의 섹션 키 이름과 뷰 그룹 하위의 적용대상 View ID, 테마 JSON키를 정의한다.

    <string name="thk_common_settings_view">common_settings_view</string>
    <string-array name="thk_common_settings_view_names">
        <item>title</item>
        <item>subject</item>
        <item>value</item>
        <item>checkbox</item>
        <item>desc</item>
        <item>arrow</item>
    </string-array>
    <integer-array name="thk_common_settings_view_ids">
        <item>@id/title</item>
        <item>@id/subject_text</item>
        <item>@id/value_text</item>
        <item>@id/checkbox</item>
        <item>@id/description</item>
        <item>@id/arrow_icon</item>
    </integer-array>

JSON 테마 파일을 만든다.

"common_settings_view" : {
	"title" : {
		"text_color" : "#3f3429",
		"text_shadow_color" : "#694639"		
	},
	"subject" : {
		"text_color" : "#9a857c"
	},
	"value" : {
		"text_color" : "#764d3c"
	},
	"checkbox" : {
		"background" : { "normal" : "unchecked.png", "checked" : "checked.png" }
	},
	"desc" : {
	},
	"arrow" : {
		"image_tintcolor" : "#9a857c"
	}
},

테마 아이템 키를 정의한다. JSON 섹션 키, View ID, JSON키를 가지는 enum이라고 생각하면 좋다. 실제로는 클래스 인스턴스다.

public static final ThemeItemKey COMMON_SETTINGS_VIEW = new ThemeItemKey(R.string.thk_common_settings_view, R.array.thk_common_settings_view_names, R.array.thk_common_settings_view_ids, 0);

간단히 적용한다.

ThemeManager.getInstance().applyTheme(this, ThemeUtils.COMMON_SETTINGS_VIEW);