[강좌] 안드로이드 사용자정의 테마 만들기

이번시간에는 안드로이드를 개발시 기본 테마를 변경하는 강좌를 할것입니다.
안드로이드의 에뮬레이터에서 돌아가는 기본 테마는 정말 딱딱 합니다.

겔럭시s 테마도 에뮬과 테마가 다른건 폰트며 색을 자체적으로 변경한것입니다.
전부는 아니지만 단말기별로 테마와 폰트가 다른이유도 여기 있습니다.

하지만 어플(앱)을 실행해보면 모든 단말기에서 같은 색과 같은모양의 컨트롤들을
볼수 있습니다. 과연 어떻게 해야 모두 동일하게 보이게 할수 있는것일까?
위에서 언급했듯이 기본 테마를 바꾸는 방법입니다.

그렇다면 어플(앱)에서의 테마 변경은 과연 어떻게 하는것인가?
지금부터 기본스킨을 바꾸는 몇가지 방법을 강좌 하도록 하겠습니다.

1.우선 간단한 프로젝트를 생성합니다.
01.jpg

2.필자는 다음과 같이 입력했습니다.
02.jpg

Project name : SkinTest
Build Target : Android 2.2
Package name : kr.co.cena.android.test.skintest
Create Activity : MainActivity (입력하지 않아도 되지만 필자는 이렇게 사용합니다.)
Min SDK : 8

3,4.프로젝트 생성이 완료되면 MainActivity.java 파일을 열고 Ctrl + F11 키를 눌러 
에뮬레이터가 잘 실행되는지 확인합니다.
03.jpg


04.jpg


5. 잘 실행이 되었군요
05.jpg

이제 스킨 테스트를 위해 기본 컨트롤들을 MainActivity 화면에 나열해 보겠습니다.

6. 안드로이드 SDK가 버젼업을 하면서 이클립스 플러그인도 덩달아 업데이트가 되었죠?
기존 안드로이드 플러그인에서 Activity 화면 수정보다 좀더 편리하게 바꼇습니다.
하지만 속성 지정하는 부분은 오히려 필자는 불편을 느끼고 있습니다.
06.jpg

상단 옵션을 선택하는 부분에
화면 인치 종류, 가로 세로 지정, 테마 지정, 버젼 지정 하는 옵션이 나열되어 있습니다.
우선 프로젝트 버젼을 Android 2.2 로 지정했으니 제일 마지막에 있는 버젼을
Android 2.2 로 변경하겠습니다.
07.jpg

7. 보시는거와 같이 컨트롤 모양이 바뀝니다. Android 3.0 에서는 컨트롤 팔레트에서
모양으로 보이던것이 Android 2.2 컨트롤 팔레트가 목록으로 바뀌였군요.
흠…다시 Android 3.0 으로 바꿔보면 다시 되돌아 가지 않습니다…
이클립스 플러그인 버그인지는 잘 모르겠지만 목록이 더 편하니 목록으로 쓰시는게 좋습니다.
08.jpg

8.이제 컨트롤들을 무작위로 화면에 나열하겠습니다.
Button, CheckBox, RadioButton, ToggleButton 을 화면에 나열했습니다.
이컨트롤들을 main.xml 을 손대지 않고 테마를 지정하여 일괄적으로 변경할것입니다.

테마를 지정하기위해서는 기존의 테마를 상속하여 정의한 테마로 바뀌도록 해야합니다.
그러기 위해서는 theme.xml 과 style.xml 파일이 필요합니다.
부가적으로 color.xml 더 필요하지만 나중에 설명하겠습니다.

안드로이드에서 쓸수 있는 리소스 폴더명과 파일명은 다음을 참고 하세요
http://developer.android.com/guide/topics/resources/providing-resources.html

9. res/values/ 폴더에에 theme.xml 파일과 style.xml 파일을 생성합니다.
09.jpg

10.먼저 버튼의 테마를 변경하기 위해 버튼의 배경과 색을 지정하겠습니다.
style.xml 파일을 열어 다음과 같이 입력 저장합니다.


추가 설명 : 
#FF0000 => 빨간색
#7FFF0000 => 빨간색(Alpha 50% 적용)

#을 제외한 문자열이 6자리인 경우 순수 RGB 가 적용되며
#을 제외한 문자열이 8자리인 경우 앞 2자리는 투명도를 지정하는 Alpha값이다. – 00~FF(0~100%)

투명 알파 계산법
30% = 76.5 (30*2.55) > 4C (76을 16진수 변환)
50% = 127 (50*2.55) > 7F (127을 16진수 변환)
60% = 153 (60*2.55) > 99 (153을 16진수 변환)

11. 그다음 만든 버튼 스타일을 기존 버튼 테마에 지정합니다.
theme.xml 파일을 열어 다음과 같이 입력합니다.


name=”myTheme” 명칭은 원하는데로 수정합니다.

12. 그다음 마지막으로 사용자 정의로 만든 테마를 앱에 지정합니다.
AndroidMainfest.xml 파일을 열어 Application 탭으로 이동합니다.
10.jpg

Theme 항목의 Browse 버튼을 클릭하여 myTheme 를 선택합니다.

13. 수고하셨습니다. 버튼의 기본테마를 변경하는 방법은 모두 완료되었습니다.
제대로 되었는지 확인합니다. 아쉽게 layout/main.xml 을 열어서 
Graphical Layout 탭을 클릭하더라도 바뀐 테마를 바로 확인이 불가능합니다.
에뮬에서 실행하여 바뀐 테마를 확인합니다. (Ctrl + F11)
11.jpg

지금까지 기본 버튼의 색상을 변경하는 방법을 배웠습니다.
다음강좌에서는 버튼의 터치 상태에 따라 색상을 바꾸는 강좌를 하겠습니다.
이게 되어야 버턴으로써 기능으로 쓸수 있겠죠?
이번강좌는 테마의 구조만 파악하시면 성공한겁니다. ^^

]]>

도큐멘트 에 올린 글

댓글 남기기