Android styling: common theme attributes(번역 및 학습)

특히 테마 속성을 사용하여 리소스에 대한 간접 지점을 제공하여 리소스를 다양화할 수 있도록 권장했습니다

즉, 레이아웃이나 스타일에서 직접 리소스 참조(또는 더 나쁜 것은 하드코딩된 값 😱)를 작성하는 자신을 발견했다면, 대신 테마 속성을 사용해야 하는지 생각해 보아야 한다. 

 

<ConstraintLayout ...
-  android:foreground="@drawable/some_ripple"
-  android:background="@color/blue" />

+  android:foreground="?attr/selectableItemBackground"
+  android:background="?attr/colorPrimarySurface" />

그러면 어떤 테마 속성을 사용할 수 있습니까?

여러분이 알아야 할 일반적이고 기본적인 사항을 알려줍니다. Material, AppCompat 또는 플랫폼에서 가져온 것입니다.

모든 테마속성을 다루지는 않지만, (아래에 정의된 attr 파일을 찾아볼 것을 권장) 이것들은 자주 항상 사용하는 속성입니다.

Colors

색상의 대부분은 앱 전체에서 사용할 수 있는 색상의 semantic names 을 정의하는 머티리얼 색상 시스템에서 가져옵니다(테마 속성으로 구현되어 있음.)

?attr/colorPrimary  앱의 기본 브랜드 색상입니다.

?attr/colorSecondary 앱의 보조 브랜드 색상으로, 일반적으로 기본 브랜딩 색상을 밝게 보완합니다.

 

* 위 두개의 색은 브랜드를 나타내는 색상이다.

 

?attr/colorOn[Primary, Secondary, Surface etc] 명명된 색상과 대비되는 색상입니다.

 

?attr/color[Primary, Secondary]Variant 주어진 색상의 대체 음영.

 

?attr/colorSurface  카드, 시트 및 메뉴와 같은 구성 요소의 표면에 대한 색상입니다.

 

?android:attr/colorBackground 화면의 배경입니다.

 

?attr/colorPrimarySurface는 밝은 테마의 colorPrimary와 어두운 테마의 colorSurface 간에 전환합니다.

 

?attr/colorError 오류를 표시하기 위한 색상입니다.

 

기타 편리한 색상

?attr/colorControlNormal 정상 상태에서 아이콘/컨트롤에 적용되는 색상입니다.

 

?attr/colorControlActivated 활성화된 상태(예: 체크됨)에서 아이콘/컨트롤에 적용되는 색상입니다.

 

?attr/colorControlHighlight 하이라이트 제어에 적용되는 색상(예: 잔물결, List 선택될 때.).

 

?android:attr/textColorPrimary 가장 눈에 띄는 텍스트 색상

 

?android:attr/textColorSecondary 보조 텍스트 색상

 

Dimens

?attr/listPreferredItemHeight     List Item 의 표준(최소) 높이입니다.

 

?attr/actionBarSize   App Bar의 높이

 

Drawables

?attr/selectableItemBackground   interactive items에 대한 리플/하이라이트(foreground에도 유용함!!)

- 버튼 같은거 눌릴때

?attr/selectableItemBackgroundBorderless 무제한 잔물결.

 

?attr/dividerVertical 시각적 요소 간의 수직 구분선으로 사용할 수 있는 드로어블

 

?attr/dividerHorizontal 시각적 요소 간의 수평 구분선으로 사용할 수 있는 드로어블

TextAppearances

Material  은 앱 전체에서 사용해야 하는 개별 텍스트 스타일 세트인 type Scale 을 정의합니다.

각 스타일은 textAppearance로 설정할 수 있는 테마 속성으로 제공됩니다.

 

다양한 글꼴에 대한 Scale을 생성하는 데 도움이 되는 Material type scale generator 

 

Headline

?attr/textAppearanceHeadline1은 기본적으로 밝은 96sp 텍스트로 

?attr/textAppearanceHeadline2는 기본적으로 밝은 60sp 텍스트로

?attr/textAppearanceHeadline3의 기본값은 일반 48sp 텍스트

?attr/textAppearanceHeadline4는 기본적으로 일반 34sp 텍스트

?attr/textAppearanceHeadline5는 기본적으로 일반 24sp 텍스트

?attr/textAppearanceHeadline6은 기본적으로 중간 20sp 텍스트

 

Subtitle
?attr/textAppearanceSubtitle1은 기본적으로 일반 16sp 텍스트

?attr/textAppearanceSubtitle2의 기본값은 중간 14sp 텍스트

 

Body
?attr/textAppearanceBody1은 기본적으로 일반 16sp 텍스트

?attr/textAppearanceBody2는 기본적으로 일반 14sp 텍스트

 

ETC
?attr/textAppearanceCaption은 기본적으로 일반 12sp 텍스트

?attr/textAppearanceButton은 모두 중간 대문자 14sp 텍스트

 

?attr/textAppearanceOverline은 기본적으로 일반 대문자 10sp 텍스트

 

Shape

Material은 소형, 중형 및 대형 구성요소에 대한 테마 속성으로 구현되는 Shape 시스템을 사용합니다.

사용자 정의 구성 요소에 모양 모양을 설정하는 경우,  모양을 이해하고 구현하는 배경으로 MaterialShapeDrawable을 사용하는 것이 좋습니다.

 

?attr/shapeAppearanceSmallComponent는 버튼, 칩, 텍스트 필드 등에 사용됩니다. 기본값은 둥근 4dp 모서리입니다.

?attr/shapeAppearanceMediumComponent 카드, 대화 상자, 날짜 선택 도구 등에 사용됩니다. 기본값은 둥근 4dp 모서리입니다.

?attr/shapeAppearanceLargeComponent는 하단 시트 등에 사용됩니다. 기본값은 둥근 0dp 모서리(예: 정사각형!)

 

Button Styles

 구체적으로 보일 수 있지만 Material은

Contained, Text 및 Outlined의 세 가지 유형의 버튼을 정의합니다.

 

MDC는 MaterialButton의 스타일을 설정하는 데 사용할 수 있는 테마 속성을 제공합니다

 

?attr/materialButtonStyle은    기본적으로 Contained(또는 스타일 생략)

 

?attr/borderlessButtonStyle    Text 스타일 버튼

 

 

?attr/materialButtonOutlinesStyle  Outlined 스타일 버튼

 

Floats

?android:attr/disabledAlpha   위젯에 대해 기본적으로 비활성화된 알파입니다.

?android:attr/primaryContentAlpha  foreground 요소에 적용된 알파입니다.

?android:attr/secondaryContentAlpha  보조 요소에 적용된 알파입니다.

 

App vs Android namespace

일부 속성은 ?android:attr/foo 및 기타 ?attr/bar. 

이는 일부가 Android 플랫폼에 의해 정의되어 있기 때문에 (레이아웃: android:id의 View 속성과 마찬가지로) 네임스페이스로 참조하기 위해 Android 부분이 필요하기 때문입니다. 

 

android:이 없는 것들은 애플리케이션으로 컴파일되는 정적 라이브러리(예: AppCompat 또는 MDC)에서 가져오므로 네임스페이스가 필요하지 않습니다(레이아웃에서 app:baz를 사용하는 방법과 유사). 

 

일부 요소는 플랫폼과 라이브러리 모두에서 정의됩니다. 색상기본. 이러한 경우 모든 API 수준에서 사용할 수 있으므로 플랫폼이 아닌 버전을 선호합니다. 이러한 경우 위에 플랫폼이 아닌 버전을 나열했습니다.

 

모든 API 수준에서 사용할 수 있는 비 플랫폼 속성 선호

 

More Resources

• Android platform
• AppCompat

Material Design Components

• Color
• Shape
• Type

GitHub - material-components/material-components-android: Modular and customizable Material Design UI components for Android

 

Do It Yourself

 

때로는 테마별로 바꾸고 싶은 것을 추상화하는 테마 속성이 없습니다.

걱정하지 마세요... 직접 만드세요!  다음은 두 화면에 회의 세션 목록을 표시하는 Google I/O 앱의 예입니다.

 

대체로 비슷하지만 왼쪽 화면은 시간을 헤더 공간을  남겨두어야 하고 오른쪽 화면은 그렇지 않습니다.

테마 속성 뒤에 항목을 정렬할 위치를 추상화하여 이를 구현하여 테마별로 변경하고 두 개의 다른 화면에서 동일한 레이아웃을 사용할 수 있습니다.

 

1. attrs.xml에서 테마 속성 정의

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<attr name="sessionListKeyline" format="dimension" />

2. 다른 테마들에 다른 값을 할당.

<!-- Copyright 2019 Google LLC.	
   SPDX-License-Identifier: Apache-2.0 -->
<style name="Theme.IOSched.Schedule">
  …
  <item name="sessionListKeyline">72dp</item>
</style>

<style name="Theme.IOSched.Speaker">
  …
  <item name="sessionListKeyline">16dp</item>
</style>

3. 두 화면에 사용된 단일 레이아웃에서 테마 속성을 사용합니다(각각 위의 테마 중 하나 사용).

 

Question (mark) everything

사용 가능한 테마 속성을 알면 레이아웃, 스타일 또는 드로어블을 작성할 때 사용할 수 있습니다. 

 

테마 속성을 사용하면 테마(예: 어두운 테마)를 지원하고 보다 유연하고 유지 관리 가능한 코드를 작성하기가 훨씬 쉬워집니다.