스타일 및 테마

Compose 방식 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 테마 설정을 사용하는 방법을 알아봅니다.
<ph type="x-smartling-placeholder"></ph> Compose의 디자인 시스템 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

Android의 스타일과 테마를 사용하면 UI 디자인의 세부사항을 구분할 수 있습니다. 웹 디자인의 스타일시트와 유사하게 작동합니다.

스타일은 단일 속성의 모양을 지정하는 속성의 모음입니다. View입니다. 스타일은 속성을 지정할 수 있음 여러 가지를 설정할 수 있습니다.

테마는 앱, 활동 또는 뷰 전체에 적용되는 속성의 모음입니다. 계층 구조로 이루어져 있습니다. 테마를 적용하면 앱의 모든 뷰 또는 활동은 자신이 지원하는 각 테마의 속성을 적용합니다. 또한 테마를 통해 뷰 외 요소(예: 상태 표시줄 및 창 배경)를 사용합니다.

스타일과 테마는 스타일 리소스 파일 res/values/(일반적으로 styles.xml)

그림 1. 동일한 활동에 적용되는 두 가지 테마: Theme.AppCompat (왼쪽) 및 Theme.AppCompat.Light (오른쪽)

테마 대 스타일

테마와 스타일은 유사점이 많지만 용도는 다릅니다. 테마 및 스타일은 동일한 기본 구조, 즉 속성을 리소스를 제공합니다.

스타일은 특정 뷰 유형의 속성을 지정합니다. 예를 들어 한 가지 스타일은 버튼의 속성을 지정할 수 있습니다. 스타일에 지정하는 모든 속성은 삽입해야 합니다. 모든 속성을 스타일로 추출하면 속성을 쉽게 사용하고 관리할 수 있습니다. 여러 위젯에서 사용할 수 있습니다.

테마는 스타일, 레이아웃, 라벨별로 참조할 수 있는 이름이 지정된 리소스의 컬렉션을 정의합니다. 추가할 수 있습니다. 테마는 colorPrimary와 같은 시맨틱 이름을 Android에 할당합니다. 리소스를 배포합니다

스타일 및 테마는 함께 작동하도록 설계되었습니다. 예를 들어 버튼의 한 부분은 colorPrimary이고 다른 부분은 colorSecondary입니다. 이러한 색상의 실제 정의는 테마에서 제공됩니다. 날짜 기기가 야간 모드로 전환되면 앱이 '조명' 모드에서 전환할 수 있습니다. '어두운' 테마 테마, 모든 리소스 이름의 값을 변경합니다. 스타일을 변경할 필요는 없습니다. 스타일은 특정 색상 정의가 아닌 의미론적 이름을 사용합니다.

테마와 스타일이 함께 작동하는 방식에 대한 자세한 내용은 블로그 게시물을 참조하세요. Android 스타일 지정: 테마와 스타일 비교

스타일 만들기 및 적용

새 스타일을 만들려면 프로젝트의 res/values/styles.xml 파일을 엽니다. 대상 다음 단계를 따르세요.

  1. 스타일을 고유하게 식별하는 이름을 사용하여 <style> 요소를 추가합니다.
  2. 정의하려는 각 스타일 속성에 <item> 요소를 추가합니다. 이 각 상품의 name는 있습니다. <item> 요소의 값은 이 속성의 값입니다.

예를 들어 다음 스타일을 정의한다고 가정해 보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

다음과 같이 스타일을 뷰에 적용할 수 있습니다.

<TextView
    style="@style/GreenText"
    ... />

스타일에 지정된 각 속성은 뷰가 이를 허용하는 경우 해당 뷰에 적용됩니다. 뷰 허용되지 않는 속성은 모두 무시합니다.

<ph type="x-smartling-placeholder">

그러나 개별 뷰에 스타일을 적용하는 대신 일반적으로 앱 전체, 활동, 컬렉션에 스타일을 적용할 수 있습니다. 이 가이드의 다른 섹션에 설명된 대로 선택하세요.

스타일 확장 및 맞춤설정

나만의 스타일을 만들 때는 항상 프레임워크 또는 지원의 기존 스타일을 확장하세요. 라이브러리를 추가하여 플랫폼 UI 스타일과의 호환성을 유지할 수 있습니다. 스타일을 확장하려면 parent 속성을 사용하여 확장하려는 스타일을 지정합니다. 그런 다음 상속된 스타일 속성을 사용하고 새 속성을 추가할 수 있습니다.

예를 들어 Android 플랫폼의 기본 텍스트 모양을 상속받아 다음과 같습니다.

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

그러나 항상 Android 지원 라이브러리에서 핵심 앱 스타일을 상속해야 합니다. 이 지원 라이브러리는 확인할 수 있습니다 지원 라이브러리 스타일의 이름은 흔히 플랫폼의 스타일과 비슷하며 AppCompat 포함

라이브러리 또는 자체 프로젝트에서 스타일을 상속받으려면 상위 스타일 이름을 선언합니다. 이전 예에 표시된 @android:style/ 부분이 없는 경우 예를 들어 다음 예는 지원 라이브러리에서 텍스트 모양 스타일을 상속합니다.

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

또한 스타일의 parent 속성을 사용하는 대신 점 표기법으로 이름을 사용합니다. 즉, 마침표로 구분하여 스타일 이름을 상속하려는 스타일 이름으로 바꿉니다. 나 일반적으로 다른 라이브러리의 스타일이 아닌 자체의 스타일을 확장할 때만 이렇게 합니다. 예를 들어 다음 스타일은 앞의 예에서 GreenText의 모든 스타일을 상속합니다. 그런 다음 텍스트 크기를 늘립니다.

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

더 많은 체인으로 연결하여 원하는 만큼 이와 같은 스타일을 계속 상속받을 수 있습니다. 이름을 지정할 수 있습니다

<ph type="x-smartling-placeholder">

<item> 태그로 선언할 수 있는 속성을 찾으려면 'XML 속성' 테이블을 참조하세요. 모든 뷰 지원 기본의 XML 속성 View 클래스와 여러 뷰는 고유한 특수 속성을 추가합니다. 예를 들어 TextView XML 속성 포함 android:inputType 속성(예: EditText 위젯

스타일을 테마로 적용

스타일을 만들 때와 동일한 방식으로 테마를 만들 수 있습니다. 적용 방법에 차이가 있습니다. 뷰에서 style 속성으로 스타일을 적용하는 대신 android:theme 속성 또는 <application> 태그 <activity> 태그AndroidManifest.xml

예를 들어 다음은 Android 지원 라이브러리의 Material Design 'dark'를 적용하는 방법입니다. 테마 설정 앱 전체:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

다음은 하나의 활동에만 '밝은' 테마를 적용하는 방법입니다.

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

앱 또는 활동의 모든 뷰는 표시됩니다. 뷰가 스타일에 선언된 속성 중 일부만 지원하는 경우 지원하지 않는 속성은 무시합니다.

Android 5.0 (API 레벨 21) 및 Android 지원 라이브러리 v22.1부터는 android:theme 속성을 레이아웃 파일의 뷰에 추가합니다. 이렇게 하면 하위 뷰를 설정할 수 있습니다. 이는 특정 하위 뷰에서 테마 색상 팔레트를 변경하는 데 부분에 대해 설명해 드리겠습니다.

이전 예는 다음과 같은 Theme.AppCompat와 같은 테마를 적용하는 방법을 보여줍니다. Android 지원 라이브러리에서 제공합니다. 하지만 일반적으로 배경에 맞도록 테마를 맞춤설정하려고 합니다. 파악할 수 있습니다. 이를 위한 가장 좋은 방법은 지원 라이브러리에서 이러한 스타일을 확장하고 다음 섹션에 설명된 대로 일부 속성을 재정의합니다.

스타일 계층 구조

Android에서는 Android 앱 전체에 속성을 설정하는 다양한 방법을 제공합니다. 예를 들어 레이아웃에서 직접 속성을 설정하고, 뷰에 스타일을 적용하고, 레이아웃에 테마를 적용하고, 프로그래매틱 방식으로 속성을 설정할 수도 있습니다.

앱 스타일 지정 방법을 선택할 때 Android의 스타일 계층 구조에 유의해야 합니다. 일반적으로 최대한 일관되게 유지하는 것이 좋습니다. 에 동일한 속성을 지정하면 다음 목록에 따라 최종적으로 적용되는 속성이 결정됩니다. 목록은 다음과 같습니다. 가장 높은 우선순위에서 가장 낮은 순으로 정렬됩니다.

  1. 텍스트 범위를 사용하여 문자 또는 단락 수준의 스타일 지정을 TextView 파생에 적용 있습니다.
  2. 프로그래매틱 방식으로 속성 적용
  3. 개별 속성을 뷰에 직접 적용
  4. 뷰에 스타일 적용
  5. 기본 스타일 지정
  6. 뷰 컬렉션, 활동 또는 앱 전체에 테마 적용
  7. 특정 보기별 스타일 지정(예: TextAppearance (TextView)

그림 2. span의 스타일 지정은 textAppearance의 스타일 지정을 재정의합니다.

<ph type="x-smartling-placeholder">

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 스타일 지정 속성의 하위 집합을 지원합니다. 제공합니다 전체 속성 목록은 TextAppearance

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

기본 테마 맞춤설정

Android 스튜디오로 프로젝트를 생성하면 다음과 같은 방법으로 머티리얼 디자인 테마가 앱에 적용됩니다. 프로젝트의 styles.xml 파일에 정의된 대로 기본값을 사용합니다. 이 AppTheme 스타일 지원 라이브러리의 테마를 확장하고 사용된 색상 속성에 대한 재정의를 포함합니다. 앱 바, 앱 표시줄 등의 플로팅 작업 버튼을 사용합니다. 여러분은 은 제공된 색상을 업데이트하여 앱의 색상 디자인을 빠르게 맞춤설정할 수 있습니다.

예를 들어 styles.xml 파일은 다음과 유사합니다.

<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>

스타일 값은 실제로 색상 리소스는 프로젝트의 res/values/colors.xml 파일 이 파일에서 색상을 변경합니다. 자세한 내용은 Material Design 색상 개요 를 사용하여 동적 색상 및 추가 맞춤 색상으로 사용자 환경을 개선합니다.

색상을 알게 되면 다음과 같이 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>

그런 다음 원하는 다른 스타일을 재정의할 수 있습니다. 예를 들어 활동 내역을 변경하여 배경색:

<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 적용 대상 레이아웃의 뷰가 아니라 활동 창에 표시되어야 합니다. 예를 들어 windowBackground는 창 배경과 windowEnterTransition는 다음과 같은 경우에 사용할 전환 애니메이션을 정의합니다. 있습니다. 자세한 내용은 시작하기 활동을 수동으로 구현할 수 있습니다.

Android 지원 라이브러리는 테마를 맞춤설정하는 데 사용할 수 있는 다른 속성도 제공합니다. Theme.AppCompat에서 확장됨(예:colorPrimary 이전 예에서 볼 수 있습니다 이러한 주제는 라이브러리의 attrs.xml 파일을 참조하세요.

<ph type="x-smartling-placeholder">

지원 라이브러리에서 확장할 수 있는 다양한 테마도 제공됩니다. 기존 예시에 표시된 것과는 다릅니다 사용 가능한 테마는 라이브러리의 themes.xml 파일을 참조하세요.

버전별 스타일 추가

새 버전의 Android에 사용하려는 테마 속성을 추가할 경우 해당 속성을 테마에 추가할 수 있습니다. 이전 버전과 호환됩니다. 다른 styles.xml 파일만 있으면 됩니다. values 디렉터리에 저장됨 리소스 버전 한정자:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

values/styles.xml 파일의 스타일은 모든 버전에서 사용할 수 있으므로 values-v21/styles.xml의 테마가 이를 상속할 수 있습니다. 즉, GCP의 'base'로 시작하여 스타일 복제 버전별 코드로 확장하여 있습니다.

예를 들어, Android 5.0 (API 수준 21) 이상에서 창 전환을 선언하려면 새 속성을 사용할 수 있습니다. res/values/styles.xml의 기본 테마는 다음과 같습니다. 다음과 같습니다.

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

그런 다음, 다음과 같이 res/values-v21/styles.xml에 버전별 스타일을 추가합니다.

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

이제 매니페스트 파일에서 AppTheme를 적용할 수 있으며 시스템에서 스타일을 선택합니다. 사용할 수 있습니다

다양한 기기에 대체 리소스를 사용하는 방법을 자세히 알아보려면 다음을 참고하세요. 대체 리소스 제공.

위젯 스타일 맞춤설정

프레임워크와 지원 라이브러리의 모든 위젯에는 기본 스타일이 있습니다. 예를 들어 지원 라이브러리의 테마, 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>

또한 다른 스타일 확장과 마찬가지로 위젯 스타일을 확장할 수 있습니다. 그런 다음 레이아웃이나 테마에 맞춤 위젯 스타일을 적용합니다.

추가 리소스

테마와 스타일에 관해 자세히 알아보려면 다음 추가 리소스를 참고하세요.

블로그 게시물