[안드로이드] 스타일과 테마 적용하기

반응형



이제 안드로이드의 스타일과 테마 적용하기 입니다.

모바일 플랫폼 특성상 작은 화면에 많은것들을 보여주기가 힘들고, 심플하면서도 깔끔하고, 가독성도 유지되는 좋은 디자인이 선호됩니다.

읽기전에 손가락 한번 클릭~ >_<

고마워요 ~ Chu ~ ♥



사용자 인터페이스에서 빼 놓을 수 없는 부분이 바로 스타일과 테마 겠죠..?



스타일과 테마 적용

스타일과 테마는 각종 UI 에 대한 같은 디자인을 쓸 때 유용하게 작용합니다.

▶ 스타일
스타일은 레이아웃 XML 에 있는 하나의 엘리먼트 단위로 적용 할 수 있는 속성들의 집합입니다. 예를들면 텍스트 컬러와 크기를 지정하는 스타일을 만들어 놓고, 특정 뷰 엘리먼트에 적용할 수 있지요.

▶ 테마
테마는 어플리케이션 내의 모든 액티비티 또는 하나의 액티비티 단위로 적용할 수 있는 속성들의 집합입니다. 예를들어 메뉴에 텍스트크기와 색상을 지정하는 테마를 만들어 놓고, 액티비티에 적용 할 수 있지요.


스타일과 테마 만들기

1. 스타일과 테마를 사용하기 위해선 우선 프로젝트의 'res/values' 디렉토리에 'styles.xml' 이라고 하는 XML 파일을 생성하고 <resources> 루트 노드를 추가합니다.

2. <style> 엘리먼트를 추가하여 고유한 name 속성과 선택사항인 parent 속성을 지정합니다. name 은 이 스타일의 이름이고, parent 는 스타일 리소스가 상속받은 것을 뜻합니다.

3. <style> 엘리먼트 내부에 <item> 엘리먼트를 정의하는데, 각각의 <item> 은 name 속성을 가지고 스타일을 속성을 구분하며, 엘리먼트에 그 값을 정의합니다.


스타일 만들기



<item> 의 name 속성에는 문자열, 16진수 색상값, 다른 리소스의 참조 등을 지정할 수 있습니다. <style> 엘리먼트의 parent 속성은 어떤 리소스로부터 스타일이 상속받는 역할을 합니다.
스타일은 어떠한 유형의 리소스도 상속할 수 있는데요, 일반적으로는 항상 표준 안드로이드의 스타일 리소스를 상속받은 뒤, 변경할 부분만 바꾸어주는 방식을 사용합니다.


이제 EditText 는 XML 에서 정의한 스타일에 따라 적용이 될 것 입니다 ㅎ

테마 만들기

테마도 XML 의 <style> 엘리먼트로 선언하고 ' 스타일 ' 과 같은 방법으로 설정하지만, 다른점이 있다면 매니페스트 파일 내의 <application> 과 <activity> 엘리먼트를 통해 추가를 해야합니다.

테마는 개별 뷰에는 적용할 수 없습니다.

우선 테마를 선언해야 겠죠?


리소스 참조를 위한 '@' 와 '?' 가 있습니다. @는 이전에 미리 정의된 리소스를 참조한다는 의미이며, ?는 현재 로드된 테마에서의 리소스 값을 참조한다는 뜻입니다.

이것은 name 값에 의해 특정 <item> 을 참조하면서 수행되어 집니다. 예를들면 panelTextColor 는 panelForegroundColor 값을 사용한다는 의미가 됩니다. 이러한 방식은 XML 리소스에서만 사용할 수 있습니다.


매니페스트에 테마 추가하기

어플리케이션의 모든 액티비티에 테마를 설정하려면 <application> 태그에 android:theme 속성을 추가합니다.
<application android:theme=”@style/CustomTheme”>


만약 어느 하나의 액티비티에는 테마를 적용하고 싶다면 매니페스트의 <activiy> 태그에 테마 속성을 추가합니다. 또한 안드로이드에서 기본으로 제공되는 테마를 사용할 수도 있는데요, 예를들어 다이얼로그 박스처럼 디자인하기 원한다면 Dialog 테마를 사용할 수 있겠죠.
<activity android:theme=”@android:style/Theme.Dialog”>


그리고 어떠한 테마를 조금만 수정하여 사용하고 싶다면 커스텀 테마의 parent 속성에 해당 테마를 지정하여 상속을 받아야합니다.
<style name=”CustomDialogTheme” parent=”@android:style/Theme.Dialog”>
그 다음으로, 변경하고 싶은 상속받은 테마 각각의 item 에 값을 새로 정의하고, 매니페스트에선 커스텀 테마를 사용하면 되겠죠.


어플리케이션에 테마 추가

테마는 프로그램적으로 불러올 수도 있습니다. 이때, setTheme() 메소드를 사용하는데요, 이것은 컨텍스트 내에서 뷰를 인스턴스화 하기 전에 테마 설정이 되야 한다는 조건이 있습니다.
무슨 말인고 하니, setContentView() 나 inflate() 를 호출하기 전에 설정되야 한다는 뜻입니다



하지만 대부분의 경우 화면에 테마적용을 하는 일은 XML 에서 하는 것이 유리하며 , 또 권고사항 입니다.



다음 포스팅엔 커스텀 컴포넌트를 만들어 봐요~ㅎ

관련글



반응형

댓글

Designed by JB FACTORY