Style hierarchy & Basic Theme

Android에서는 Android 앱 전체에 걸쳐 여러 방식으로 속성을 설정할 수 있습니다.

 

- 레이아웃에서 직접 속성을 설정

- View에 스타일을 적용하며 레이아웃에 테마를 적용

- 프로그래매틱 방식으로 속성을 설정

 

앱 style 지정 방법을 선택할 때 Android의 스타일 계층 구조에 유의해야 합니다

테마 및 스타일을 최대한 일관되게 사용해야 합니다

 

여러 위치에 동일한 속성을 지정했다면 최종적으로 적용되는 속성은 아래 목록에 따라 결정됩니다.

목록은 가장 높은 우선순위에서 가장 낮은 순서로 정렬되어 있습니다.

1. 텍스트 범위를 통해 문자 또는 단락 수준의 스타일 지정을 TextView 파생 클래스에 적용
2. 프로그래매틱 방식으로 속성 적용
3. 뷰에 직접 개별 속성 적용
4. 뷰에 스타일 적용
5. 기본 스타일 지정
6. 뷰 컬렉션, activity 또는 app 전체에 테마 적용
7. TextView의 TextAppearance 설정과 같이 특정 뷰에 고유한 스타일 지정 적용

*앱 스타일을 지정하려고 하는데 예상한 결과가 표시되지 않는다면 다른 스타일 지정으로 인해 변경사항이 재정의되었을 가능성이 큽니다. 예를 들어 개별 View에 스타일을 적용하면서 앱에 테마도 적용하면 스타일 속성으로 인해 이 View의 일치하는 테마 속성이 재정의됩니다. 그러나 스타일에 의해 재정의되지 않은 테마 속성은 계속 사용됩니다.

 

TextAppearance

스타일의 한 가지 제한사항은 하나의 스타일만 View에 적용할 수 있다는 점입니다.

그러나 다음 예와 같이 TextView에서 스타일과 유사하게 작동하는 TextAppearance 속성을 지정할 수도 있습니다.

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance를 사용하면 텍스트별 스타일을 정의하면서 View의 스타일을 다른 용도로 사용할 수 있습니다. 그러나 View 또는 스타일에서 직접 텍스트 속성을 정의하면 정의된 값이 TextAppearance 값보다 우선 적용됩니다.

 

TextAppearance는 TextView에서 제공하는 스타일 지정 속성의 하위 집합을 지원합니다.

 

포함되지 않는 일반적인 TextView 속성은 lineHeight[Multiplier|Extra], lines, breakStrategy 및 hyphenationFrequency입니다. TextAppearance는 단락 수준이 아닌 문자 수준에서 작동하므로 레이아웃 전체에 영향을 주는 속성은 지원되지 않습니다.

 

Basic Theme custom

Android 스튜디오를 사용하여 프로젝트를 만들 때 프로젝트의 styles.xml 파일에 정의된 대로 기본적으로 머티리얼 디자인 테마가 앱에 적용됩니다.

 

AppTheme 스타일은 지원 라이브러리의 테마를 상속하며 앱 바 및 플로팅 작업 버튼(사용되었을 때)과 같은 주요 UI 요소에서 사용되는 색상 속성의 재정의를 포함하고 있습니다. 따라서 제공된 색상을 업데이트하여 앱의 색상 디자인을 빠르게 맞춤설정할 수 있습니다

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

 

Style 값은 실제로 프로젝트의 res/values/colors.xml 파일에 정의된 대로 다른 color resource의 참조입니다.

따라서 색상을 변경하려면 이 파일을 수정해야 합니다.

 

그러나 이러한 색상 변경을 시작하기 전에 먼저 머티리얼 색상 도구를 사용하여 색상을 미리 봅니다. 이 도구를 사용하면 머티리얼 팔레트에서 색상을 선택하고 앱에서 색상이 어떻게 표시되는지 미리 볼 수 있습니다.

 

색상을 알게 되면 다음과 같이 res/values/colors.xml의 값을 업데이트합니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   color for the app bar and other primary UI elements -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   a darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields -->
    <color name="colorAccent">#FF4081</color>
</resources>

원하는 다른 스타일을 재정의할 수 있습니다. 예를 들어 다음과 같이 Activity 배경 색상을 변경할 수 있습니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

 

테마에 사용할 수 있는 속성 목록은 R.styleable.Theme의 속성 표를 참고하세요.

레이아웃에서 뷰의 스타일을 추가할 때 뷰 클래스 참조의 'XML 속성' 표를 보고 속성을 찾을 수도 있습니다.

예를 들어 모든 뷰는 기본 View 클래스의 XML 속성을 지원합니다.

 

대부분의 속성은 특정 유형의 뷰에 적용되며 일부 속성은 모든 뷰에 적용됩니다. 그러나 R.styleable.Theme에 나열된 일부 테마 속성은 레이아웃의 뷰가 아닌 Activity 창에 적용됩니다.

 

예를 들어 windowBackground는 창 배경을 변경하고 windowEnterTransition은 Activity이 시작될 때 사용할 전환 애니메이션을 정의합니다(자세한 내용은 애니메이션으로 Activity 시작 참고).

 

 Android support 라이브러리는 Theme.AppCompat의 확장된 테마를 맞춤설정하는 데 사용할 수 있는 다른 속성(예: 위에 나오는 colorPrimary 속성)도 제공합니다. 이러한 속성은 라이브러리의 attrs.xml 파일에서 확인할 수 있습니다.

 

* 지원 라이브러리의 속성 이름은 android: 접두사를 사용하지 않습니다.

이 접두사는 Android 프레임워크의 속성에만 사용됩니다.

 

Widget Style Custom

 

프레임워크 및 지원 라이브러리의 모든 위젯에는 기본 스타일이 있습니다.

예를 들어 지원 라이브러리의 테마를 사용하여 앱의 스타일을 지정할 때 Button 인스턴스의 스타일은 Widget.AppCompat.Button 스타일을 사용하여 지정됩니다.

 

버튼에 다른 위젯 스타일을 적용하려면 레이아웃 파일의 style 속성을 통해 다른 위젯 스타일을 적용하면 됩니다.

예를 들어 다음은 라이브러리의 테두리 없는 버튼 스타일을 적용합니다.

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

이 스타일을 모든 버튼에 적용하려면 다음과 같이 테마의 buttonStyle에서 선언하면 됩니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

 위젯 스타일도 확장할 수 있습니다. 그런 다음 레이아웃 또는 테마에 맞춤 위젯 스타일을 적용할 수 있습니다.