[UI] 스타일과 테마 - 1

Styles and Themes

 

스타일은 하나의 View의 외관을 정의하는 속성들의 모음이다. 

스타일은 폰트 컬러, 폰트 사이즈, 백그라운드 컬러 등과 같은 속성을 정의할 수 있다.

 

테마는 앱 전체 , 액티비티, 뷰 계층에 적용되는 속성들의 모음이다- 하나의 뷰에서만 적용되는 것이 아니다.

테마를 적용하게 되면 , 앱의 모든 view, 액티비티가 테마에서 제공하는 속성들을 사용한다.

테마는 status bar나 window background 같은 view가 아닌 엘리먼트까지 스타일을 적용할 수 있다.

 

스타일과 테마는 모두 style 리소스 파일에 정의한다. 

스타일 리소스는 파일 안의 <resource>태그의 자식 태그인 <style>태그의 name속성으로 참조하기 때문에 

res/values폴더 하위에 어디에서 만들든 상관없다. 보통 파일 이름은 styles.xml을 사용한다.

---

style 리소스 정의하는 파일의 위치,  style 리소스 선언

 

안드로이드 스튜디오가 업데이트 되면서 styles.xml 대신 themes.xml로 파일이름이 변경되었다고 한다.

 

테마,스타일에 사용될 파일은 res/values폴더 하위면 어디든지 가능하다. 

파일 내부에 <style>태그의 name속성이 resource Id로 사용되기 때문에,  style 리소스를 정의하기 위해 만든 xml파일의 이름은 임의로 정해도 상관없다.

StylesTest.xml로 이름을 임의로 정했다. 현재는 values바로 하위에 만들었는데 테마와 스타일 관련이니 themes 폴더 안에 만들어주는게 좋을 듯 하다.

 

StylesTest.xml 생성

 

하나의 View에 적용시킬 스타일을 간단히 만들어 봤다.

<style>태그의 루트는 꼭 <resources>태그여야한다.  (style resource이기 때문)

 

<style>태그

1. name 속성(필수)

알아보기 쉬운 이름 설정

후에 레이아웃.xml , AndroidManifest.xml 에서 이 이름을 사용할 수 있다.

 

2. parent 속성 - 상속받을 스타일

parent를 정의하면 parent 스타일에 선언된 속성값 현재 스타일에도 포함된다.

item에서 parent내부에 정의된 속성을 다시 정의하면 그 속성에 자신의 값이 사용된다.

 

<item>태그

1. name 속성(필수) - 안드로이드에 존재하는 속성중 하나

layout과 관련된 view속성 (스타일)

layout이외 앱, 스테이터스바 색 등과 관련된 속성 (테마)   

내부에는 item태그에 관련된 속성의 속성 값을 정함

  

이렇게 정의된 스타일 리소스는 <style>태그에 정의한 name값을 통해

레이아웃 파일 내부에서 @style/MyFirstStyle , @style/MySecondStyle로 사용될 수 있다.

TextView에 스타일을 적용하였을 때

적용한 스타일 내부에 선언한 속성중 TextView가 받아들일수 없는 속성이 있는 경우 속성은 무시된다.

 

텍스트뷰에 style리소스로 5개의 속성이 존재하는 스타일을 적용하였다. TextView에 적용한 style에 들어있는 5가지 속성을 TextView에서 한번 더 정의하면 적용된 style 속성 값들은 무시되고 TextView에 선언한 속성- 속성값이 사용된다.

 

실제로 스타일 리소스의 조상들을 봐보면 매우 복잡한 구조로 되어있다. 위의 예제같은 경우 문제가 없었지만 

정의한 속성이 여러 스타일의 속성들 조합 뭐 이런식이면 제대로 동작하지 않을 경우도 있다.

 

그렇기 때문에 기존에 존재하는 적절한 스타일을 상속해야 한다.

---

Style Scope

위의 테스트는 View에 style= @style/스타일 리소스이름을 대입하여 View에 존재하는 각 속성의 값이 style에 정의된 값으로 자동 적용되게 하였다. 

 

style= @style/스타일이름 으로  스타일을 적용하면 속성이 적용된 View의 자식 뷰들에게는 스타일이 적용되지 않는다.

스타일이 적용된 LinearLayout의 자식인 TextView들의 android:layout_marginTop에는 영향이 없다.

---

Theme

layout에서 사용될수있는 뷰들과 관련된 속성인 android:textSize , android: onClick등등 을 제외한

window나 상태바등등에 사용되는 속성들을 테마 속성으로 분류하는 것 같다.

 

테마 속성과 스타일 속성?(뷰와 관련된) 을 포함하고 있는 style을 테마라고 부르는 것 같다.

스타일과 테마 모두 style 리소스로 정의되기 때문에

style의 이름을 Theme를 포함해서 정하는 것 같다.

 

colorPrimary, colorSecondary등등은 테마 속성이다. 프로젝트가 만들어지면서 조상의 것을 사용하지 않고 새로 재정의되어있는데 조상 스타일들을 따라가 보면( parent="조상 테마" <- 조상 테마 컨트롤 +클릭 )

이 스타일 리소스(테마) 에 colorPrimary값이 재정의되어 있다. 조상을 또 따라가 보면 뭐 또 있을지 모르겠다. 

이런식으로 몇 백개의 ? 속성들이 잘 정의되어있어 앱이 문제없이 잘 돌아가며 Theme하나만 바꿔주면 앱의 느낌이 한번에 바뀌는 것이다.

 

프로젝트를 생성하고 기본으로 매니패스트에 <application>에 설정된 테마 Theme.ThemeAndStyle

1. <application>태그의 android: theme

어플리케이션 내의 모든 액티비티에 사용될 default 테마가 설정된다.

각각의 액티비티들은 <activity>태그의 android:theme 속성을 오버라이딩하여 자신 액티비티의 default 테마를 변경할 수 있다.

 

2. <activity>태그의 android:theme

설정되지 않으면 <application>태그의 theme속성을 상속받는다. 

<application>태그의 theme속성도 정의되어있지 않으면 default system theme가 사용된다.

---

View의 android:theme 속성

위의 예제에서 style=@style/스타일이름 으로 적용하면 해당 뷰, 뷰그룹만 스타일이 적용되었다.(마진 탑 테스트)

 

android:theme=@style/스타일이름 으로 적용하면 해당 뷰, 뷰그룹의 자식들 모두 스타일이 적용된다.

뷰의 경우 자식들을 포함할 수 없기 때문에 뷰그룹에서 실제로 의미가 있겠다.

https://hckim999.tistory.com/32

---

https://medium.com/androiddevelopers/android-styling-themes-vs-styles-ebe05f917578

Android styling: themes vs styles

https://medium.com/androiddevelopers/android-styling-common-theme-attributes-8f7c50c9eaba

https://hckim999.tistory.com/32

[번역] 안드로이드 스타일 적용하기 : 테마와 스타일

https://medium.com/androiddevelopers/whats-your-text-s-appearance-f3a1729192d

What’s your text’s appearance?