Android styling: themes vs styles(번역 및 학습)

Android 스타일링 시스템은 앱의 시각적 디자인을 지정하는 강력한 방법을 제공하지만 오용하기 쉽습니다. 

적절하게 사용하면 테마와 스타일을 더 쉽게 유지 관리하고, 브랜드 이미지 업데이트를 덜 무섭게 만들고, 다크 모드를 지원하기 쉽게 만들 수 있습니다.

테마 != 스타일
테마와 스타일은 모두 동일한 <style> 구문을 사용하지만 매우 다른 용도로 사용됩니다.

key가 속성이고 value이 리소스인 key-value 저장소로 둘 다 생각할 수 있습니다.

 

Style이란?

스타일은 View 속성 값의 모음입니다.

스타일을 Map<view attribute, resource>로 생각할 수 있습니다. 즉, 키는 모든 View 속성, 즉 위젯이 선언하고 레이아웃 파일에서 설정할 수 있는 속성입니다. 스타일은 위젯마다 다른 속성 집합을 지원하므로 단일 유형의 위젯에만 해당됩니다.

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<style name="Widget.Plaid.Button.InlineAction" parent="…">
  <item name="android:gravity">center_horizontal</item>
  <item name="android:textAppearance">@style/TextAppearance.CommentAuthor</item>
  <item name="android:drawablePadding">@dimen/spacing_micro</item>
</style>

보시다시피 스타일의 각 key는 layout에서 설정할 수 있는 것입니다

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<Button …
  android:gravity="center_horizontal"
  android:textAppearance="@style/TextAppearance.CommentAuthor"
  android:drawablePadding="@dimen/spacing_micro"/>

스타일로 추출하면 여러 View에서 쉽게 재사용하고 유지 관리할 수 있습니다.

 

사용하기.

style은 레이아웃의 개별 View에서 사용됩니다.

 

범위
View 적용된 스타일은 해당 View에만 적용되며 자식 뷰에는 적용되지 않습니다.

예를 들어, 세 개의 버튼이 있는 ViewGroup이 있는 경우 부모인 ViewGroup에서 InlineAction 스타일을 설정하면 해당 스타일이 버튼에 적용되지 않습니다. 스타일에서 제공하는 value는 layout File(xml)에서 직접 설정된 값과 결합됩니다(스타일 지정 우선 순위를 사용하여 해결)

 

 

Theme란? 

테마는 스타일, 레이아웃 등으로 참조할 수 있는 명명된 리소스의 모음입니다. 

테마는 Android 리소스에 semantic name을 부여하여 참조할 수 있습니다. 

colorPrimary는 주어진 색상에 대한 semantic name입니다.

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<style name="Theme.Plaid" parent="…">
  <item name="colorPrimary">@color/teal_500</item>
  <item name="colorSecondary">@color/pink_200</item>
  <item name="android:windowBackground">@color/white</item>
</style>

이러한  named resources를 테마 속성라고 하므로 테마는 Map<theme attribute, resource>입니다.

테마 속성은 개별 View Type 특정 속성이 아니라 앱에서 더 광범위하게 적용할 수 있는 값에 대한 semantically named pointers이기 때문에 View 속성과 다릅니다.

 

Theme는 이러한  named resources에 대한 구체적인 값을 제공합니다.

예에서 colorPrimary 속성은 이 테마의 기본 색상이 청록색임을 지정합니다.

resources를  테마  semantic name부여 하여 다양한 테마에 다양한 구체적인 값(예: colorPrimary=orange)을 제공할 수 있습니다.

 

Theme는 앱 전반에 걸쳐 광범위하게 유용한 명명된 리소스의 모음입니다.

 

테마는 인터페이스와 유사합니다. 인터페이스에 대한 프로그래밍을 통해 구현에서 선언을 분리하여 서로 다른 구현을 제공할 수 있습니다.

테마도 비슷한 역할을 합니다. 테마 속성에 대해 레이아웃과 스타일을 작성하여 다양한 테마에서 사용할 수 있으며 다양한 구체적인 리소스를 제공할 수 있습니다.

 

/* Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 */
interface ColorPalette {
  @ColorInt val colorPrimary
  @ColorInt val colorSecondary
}

class MyView(colors: ColorPalette) {
  fab.backgroundTint = colors.colorPrimary
}

/* Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 */
val lightPalette = object : ColorPalette { … }
val darkPalette = object : ColorPalette { … }
val view = MyView(if (isDarkTheme) darkPalette else lightPalette)

사용하기.

Context가 있는(또는 있는) 구성 요소에 테마를 지정할 수 있습니다.

 

테마의 힘은 실제로 테마를 사용하는 방법에서 나옵니다. 테마 속성을 참조하여 보다 유연한 위젯을 빌드할 수 있습니다.

테마는 나중에 구체적인 값을 지정할 수 있다. 예를 들어 View 계층 구조의 섹션에 배경색을 설정하고 싶을 수 있습니다.

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<ViewGroup …
  android:background="?attr/colorSurface">

구체적인 색상(#ffffff 또는 @color 리소스)을 설정하는 대신 ?attr/themeAttributeName 구문을 사용하여 테마에 위임할 수 있습니다.

이 구문은 다음을 의미합니다. 이 semantic 속성의 값에 대해 테마를 쿼리합니다.

 

간접 참조를 통해 서로 다른 동작을 제공할 수 있습니다(예: 밝은 테마와 어두운 테마에서 다른 배경색 제공)

많은 부분이 동일하고 몇 가지 색상 변경에 대해 여러 레이아웃 또는 스타일을 만들 필요가 없습니다.

테마 내에서 변경되는 요소를 분리합니다.

 

?attr/themeAttributeName 구문을 사용하여 이 semantic 속성의 값에 대한 테마를 쿼리

 

Theme는 Context의 속성으로 접근가능하며 Context이거나 Context가 있는 모든 객체에서 가져올 수 있습니다. Activity, View 또는 ViewGroup.

 

이러한 객체들은 Activity가  ViewGroups를 포함하고ViewGroups이 View 등을 포함하는 Tree형태를 보여줍니다.

트리의 모든 수준에서 테마를 지정하면 상위 노드에서 하위 노드로 계단식으로 연결됩니다.

ViewGroup에 테마를 설정하면 그 안의 모든 View에 적용됩니다(단일 View에만 적용되는 스타일과 대조적으로)

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<ViewGroup …
  android:theme="@style/Theme.App.SomeTheme">
  <! - SomeTheme also applies to all child views. -->
</ViewGroup>

 

단계적인 테마의 적용은 Layout Inflate 동안에 적용된다.

Context가 setTheme 메소드를 제공하고, Theme가 applyStyle 메소드를 제공하는 동안, 이들은 인플레이션 전에 호출되어야 합니다. 새 테마를 설정하는것은  Inflate 후 스타일을 적용하면 기존 View는 업데이트되지 않습니다.

 

Separate Concerns

서로 다른 책임과 Style / Theme 의 상호 작용을 이해하면 스타일링 리소스를 보다 쉽게 ​​관리할 수 있습니다.

 

예를 들어 앱에 파란색 테마가 있지만 일부 Pro 화면은 멋진 보라색으로 표시되고 조정된 색상으로 어두운 테마를 제공하려고 한다고 가정해 보겠습니다.

 

Style만 사용하여 이를 달성하려면 Pro/non-Pro 및 light/dark의 조합에 따라서  4가지 스타일 (Pro.Light, Pro.Dark, NonPro.Light, NonPro.Dark)을 만들어야 합니다.

 

Style은 View 유형(버튼, 스위치 등)에 따라 다르므로 앱의 각 View 유형에 대해 (Widget.Pro.Light, Widget.Pro.Dark, Widget.NonPro.Light, Widget.NonPro.Dark)을 만들어야 합니다.

 

하지만,  Style / Theme 를 사용하는 경우 테마에 따라 변경되는 부분을 테마 속성으로 분리할 수 있으므로 View 유형당 단일 스타일만 정의하면 됩니다

 

 우리는 각각 colorPrimary 테마 속성에 대해 서로 다른 값을 제공하는 4개의 테마를 정의할 수 있습니다.

그러면 이러한 스타일이 참조하고 테마의 올바른 값을 자동으로 반영합니다.

 

방식은 스타일과 테마의 상호 작용을 고려해야 하기 때문에 더 복잡해 보일 수 있지만 테마별로 변경되는 부분을 분리하는 이점이 있습니다.

따라서 앱의 브랜드를 파란색에서 주황색으로 변경하는 경우 스타일링 전체에 분산되지 않고 한 곳에서만 변경하면 됩니다.

또한 스타일의 불필요한 확산을 방지하는 데 도움이 됩니다

 

View Type마다 스타일의 정의는 많으면 안된다.

테마를 활용하지 않으면 styles.xml 파일이 이해하기 힘들고, 유사한 스타일의 다른 변형으로 폭발하기 쉽습니다.

이는 유지 관리의 골칫거리가 됩니다.