Jetpack Compose의 테마는 여러 개의 하위 수준 구성과 관련 API로 이루어져 있습니다. 이러한 요소는 MaterialTheme
의 소스 코드에서 확인할 수 있으며 맞춤 디자인 시스템에 적용할 수도 있습니다.
테마 시스템 클래스
일반적으로 테마는 공통된 시각적 개념과 동작 개념을 그룹화하는 여러 개의 시스템으로 구성됩니다. 이러한 시스템은 테마 설정 값이 있는 클래스를 사용하여 모델링할 수 있습니다.
예를 들어 MaterialTheme
에는 Colors
(색상 시스템), Typography
(서체 시스템), Shapes
(도형 시스템) 등이 포함됩니다.
@Immutable data class ColorSystem( val color: Color, val gradient: List<Color> /* ... */ ) @Immutable data class TypographySystem( val fontFamily: FontFamily, val textStyle: TextStyle ) /* ... */ @Immutable data class CustomSystem( val value1: Int, val value2: String /* ... */ ) /* ... */
테마 시스템 컴포지션 로컬
테마 시스템 클래스는 컴포지션 트리에 CompositionLocal
인스턴스 형태로 암시적으로 제공됩니다. 그러면 구성 가능한 함수에서 테마 설정 값을 정적으로 참조할 수 있습니다.
CompositionLocal
에 관한 자세한 내용은 CompositionLocal을 사용한 로컬 범위 지정 데이터 가이드를 참고하세요.
val LocalColorSystem = staticCompositionLocalOf { ColorSystem( color = Color.Unspecified, gradient = emptyList() ) } val LocalTypographySystem = staticCompositionLocalOf { TypographySystem( fontFamily = FontFamily.Default, textStyle = TextStyle.Default ) } val LocalCustomSystem = staticCompositionLocalOf { CustomSystem( value1 = 0, value2 = "" ) } /* ... */
테마 함수
테마 함수는 진입점이자 기본 API입니다. 이 함수는 로직에 필요한 경우 실제 값을 사용하여 테마 시스템 CompositionLocal
(CompositionLocalProvider
를 통해 컴포지션 트리에 제공됨)의 인스턴스를 구성합니다.
content
매개변수를 사용하면 중첩된 컴포저블이 계층 구조를 기준으로 테마 설정 값에 액세스할 수 있습니다.
@Composable fun Theme( /* ... */ content: @Composable () -> Unit ) { val colorSystem = ColorSystem( color = Color(0xFF3DDC84), gradient = listOf(Color.White, Color(0xFFD7EFFF)) ) val typographySystem = TypographySystem( fontFamily = FontFamily.Monospace, textStyle = TextStyle(fontSize = 18.sp) ) val customSystem = CustomSystem( value1 = 1000, value2 = "Custom system" ) /* ... */ CompositionLocalProvider( LocalColorSystem provides colorSystem, LocalTypographySystem provides typographySystem, LocalCustomSystem provides customSystem, /* ... */ content = content ) }
테마 객체
테마 시스템으로의 액세스는 편의성 속성이 있는 객체를 통해 이루어집니다. 일관성을 위해 객체 이름은 테마 함수와 동일하게 지정되는 경향이 있습니다. 편의성 속성은 현재 컴포지션 로컬을 가져오기만 합니다.
// Use with eg. Theme.colorSystem.color object Theme { val colorSystem: ColorSystem @Composable get() = LocalColorSystem.current val typographySystem: TypographySystem @Composable get() = LocalTypographySystem.current val customSystem: CustomSystem @Composable get() = LocalCustomSystem.current /* ... */ }
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- CompositionLocal을 사용한 로컬 범위 지정 데이터
- Compose의 맞춤 디자인 시스템
- Compose의 Material Design 2