Lesson 13: App UI Design
💡 Teach Android Development
구글에서 제공하는 교육자료를 정리하기 위한 포스트입니다.
Android styling
Android styling system
- 앱의 시각적 디자인을 지정하는 데 사용됩니다.
- 앱 전체에서 일관된 모양을 유지하는 데 도움이 됩니다.
- 계층적.(상위 스타일에서 상속하고 특정 속성을 재정의할 수 있음)
Precedence of each method of styling
각 스타일 지정 방법의 우선순위를 요약합니다. 예를 들어 Theme에서 텍스트 크기를 18sp, Style에서 16sp, View에서 직접 14sp로 설정합니다. 속성은 Theme나 Style에서 정의된 것보다 우선되기 때문에 최종적으로 14sp로 표시됩니다.
Themes
- 앱 전반에 걸쳐 광범위하게 유용한 Named 리소스 모음.
- Named 리소스를 테마 속성이라고 합니다.
- 예시
- 테마를 사용하여 앱에서 기본 및 보조 색상 정의.
- 테마를 사용하여
Activity
내 모든 텍스트의 기본 글꼴 설정.
Declare a theme
res/values/themes.xml 파일에서 <style>
태그를 사용해서 테마를 정의합니다.
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
<item name="colorPrimary">@color/orange_500</item>
<item name="colorPrimaryVariant">@color/orange_700</item>
<item name="colorSecondary">@color/pink_200</item>
<item name="colorSecondaryVariant">@color/pink_700</item>
...
</style>
Apply a theme
AndroidManifest.xml에서 사용할 때
<manifest ... >
<application ... >
<activity android:theme="@style/Theme.MyApp" ... >
</activity>
</application>
</manifest>
layout file에서 사용할 때
<ConstraintLayout …
android:theme="@style/Theme.MyApp">
Refer to theme attribute in a layout
특정 리소스 대신 테마 속성을 직접 참조하여 보다 유연한 레이아웃과 스타일을 정의할 수 있습니다.
layout file에서 사용할 때
<LinearLayout …
android:background="?attr/colorSurface">
?attr/themeAttributeName 구문 사용.
?attr/colorPrimary
?attr/colorPrimaryVariant
Styles
테마의 범위를 광범위한 View
및 ViewGroup
집합에 적용하는 것을 살펴봤습니다. 보다 좁은 범위의 View
에서 시각적 속성을 정의하려면 스타일을 사용할 수 있습니다.
- 스타일은 특정 뷰 속성의 모음입니다.
- View의 타입.
- 스타일을 사용하여 글꼴 크기 또는 색상과 같은 재사용 가능한 정보 컬렉션을 만듭니다.
- 앱 전체에서 사용되는 공통 디자인의 작은 집합을 선언하는데 유용합니다.
Declare a style
res/values/styles.xml 파일에 정의합니다.
<style name="DescriptionStyle">
<item name="android:textColor">#00FF00</item>
<item name="android:textSize">16sp</item>
...
</style>
Apply a style
레이아웃 파일 내에서 스타일 속성을 지정하여 View
에 적용합니다.
<TextView
style="@style/DescriptionStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/description_text" />
Refer to theme attribute in a style
스타일 내에서도 테마 속성을 참조할 수 있습니다.
<style name="DescriptionStyle">
<item name="android:textColor">?attr/colorOnSurface</item>
<item name="android:textSize">16sp</item>
...
</style>
View attributes
- View attributes을 사용하여 각 View애 대해 명시적으로 설정.
- 스타일이나 테마를 통해 설정할 수 있는 모든 속성을 사용할 수 있습니다.
- 여백, 패딩 또는 제약 조건과 같은 사용자 지정 또는 일회성 디자인에 사용.
Resources directory
Provide alternative resources
앱에는 각기 다른 장치 구성에 맞게 여러 리소스 집합이 포함될 수 있습니다. 사용자가 앱을 실행하면 Android는 기기와 가장 잘 맞는 리소스를 자동으로 선택하고 로드합니다.
- values-b+es : 장치 locale이 스페인어로 설정된 경우.
- values-night : 다크모드가 켜졌을 경우.
Color resources
앱 전체에서 색상의 이름을 지정하고 표준화하는 방법.
res/values/colors.xml 파일에서 설정.
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
...
</resources>
#AARRGGBB 형식의 16진수 색상으로 지정합니다.
Dimension resources
레이아웃에서 수치 값의 이름을 지정하고 표준화하는 방법.
res/values/dimens.xml 파일에서 설정.
<resources>
<dimen name="top_margin">16dp</dimen>
</resources>
레이아웃에서는 @dimen/<name>
으로, 코드에서는 R.dimen.<name>
으로 참조합니다.
<TextView …
android:layout_marginTop="@dimen/top_margin" />
Typography
Scale-independent pixels (sp)
- density-independent pixels (dp)에 해당하는 텍스트.
- 텍스트 사이즈 sp로 지정(사용자 선호도 고려)
- 사용자는 설정 앱에서 글꼴 및 디스플레이 크기를 조정할 수 있습니다.
Type scale
- 앱과 콘텐츠에 대해 응집력 있는 방식으로 함께 작동하도록 설계된 스타일 세트
- 각각의 목적이 있는 재사용 가능한 텍스트 카테고리를 포함합니다.(예: 헤드라인, 부제목)
TextAppearance
- typeface (android:fontFamily)
- weight (android:textStyle)
- text size (android:textSize)
- capitalization (android:textAllCaps)
- letter spacing (android:letterSpacing)
Examples using TextAppearance
<TextView
...
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline1"
android:text="@string/title" />
<TextView
...
android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
android:text="@string/body_text" />
Customize your own TextAppearance
기존 스타일을 상속하고 필요한 부분을 수정할 수도 있습니다.
<style name="TextAppearance.MyApp.Headline1"
parent="TextAppearance.MaterialComponents.Headline1">
...
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">64sp</item>
<item name="android:letterSpacing">0</item>
...
</style>
Use a custom TextAppearance in a theme
테마에서 새로운 스타일을 사용할 수 있습니다.
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
...
<item name="textAppearanceHeadline1">@style/TextAppearance.MyApp.Headline1</item>
...
</style>
Localization
사용자의 언어와 문화에 따라 대체 리소스를 제공할 수 있는 기능.
Localize your app
- localized된 부분을 앱의 핵심 Kotlin 기능과 분리합니다.
- 예: 사용자에게 보이는 문자열을 string.xml에서 가져옵니다.
- 사용자가 앱을 실행하면 Android 시스템은 기기의 locale에 따라 로드할 리소스를 선택합니다.
- locale별 리소스를 찾을 수 없는 경우 Android는 기본 리소스로 대체합니다.
Support different languages and cultures
- 지원할 locale을 결정합니다.
- res 디렉토리에 locale 별 디렉토리를 생성합니다.
<resource type>-b+<language code>[+<country code>]
- 예: layout-b+en+US, values-b+es
- 해당 디렉토리에 locale 별 리소스를 제공합니다.
Support languages that use RTL scripts
- 사용자는 오른쪽에서 왼쪽(RTL) 스크립트를 사용하는 언어를 선택할 수 있습니다.
- manifest 앱 태그에 android:supportsRtl="true"를 추가합니다.
- 레이아웃 파일에서 왼쪽과 오른쪽을 시작과 끝으로 변경합니다.
- android:paddingLeft -> android:paddingStart
- 문자열을 현지화하고 메시지의 텍스트 형식을 지정합니다.
- -ldrtl(layout-direction-right-to-left) 및 -ldltr(layout-direction-left-to-right) 리소스 디렉토리 한정자를 사용하여 특정 리소스를 제공할 수도 있습니다.
Author And Source
이 문제에 관하여(Lesson 13: App UI Design), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@haanbink/작업중-Lesson-13-App-UI-Design저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)