Compose의 스타일

Style API는 Jetpack Compose에서 요소와 구성요소를 맞춤설정하거나 '스타일 지정'하는 새로운 패러다임으로, 기존에는 수정자를 통해 이루어졌습니다. 이 기능은 더 깊이 있고 쉬운 맞춤설정을 지원하도록 설계되었습니다.

Styles API는 다양한 폼 팩터에서 유연성을 개선하고, 성능을 향상하며, 맞춤 디자인 시스템을 더 쉽게 만들 수 있도록 지원합니다. 커스텀 구성요소가 필요하지 않더라도 Styles API는 디자인 시스템에 많은 이점을 제공합니다.

중요한 차이점은 스타일이 수정자를 대체하지는 않지만 패딩 및 색상과 같은 스타일 지정 매개변수를 대체한다는 것입니다. 유연성과 성능을 높이려면 매개변수 대신 스타일을 사용하는 것이 좋습니다.

스타일의 이점

  • 상태 기반 스타일 지정 간소화: 이 API는 다양한 상태(예: 마우스 오버, 포커스, 누름)에 따라 변경되는 스타일을 정의하는 더 간결하고 선언적인 방법을 제공하므로 수정자 시스템에 비해 상용구 코드가 크게 줄어듭니다.
  • 애니메이션 상태 전환 개선: Style API를 사용하면 이상적인 성능 특성을 가진 상태 간에 스타일 속성의 기본 제공 애니메이션을 사용할 수 있으므로 현재 animateColorAsState 접근 방식에서 발생하는 재구성을 방지할 수 있습니다.
  • 구성요소 API 간소화: 맞춤설정을 위한 단일 Style 매개변수를 도입하여 구성요소 API가 크게 간소화되고 유연성이 향상되었습니다.
  • 리컴포지션이 줄어들어 수정자보다 성능이 향상됨: 스타일은 Compose의 그리기 및 레이아웃 단계에서 실행되며 컴포지션 단계는 건너뜁니다.
  • 더 표준화된 API 집합: 표준 스타일 속성 집합을 사용하면 모든 구성요소의 스타일을 지정할 수 있습니다.

핵심 개념

개념 설명
Style 표준 모음 스타일 지정 가능 속성 집합을 사용하여 UI 요소의 모양을 정의하는 인터페이스입니다. CSS 스타일과 유사하며 로컬에서 또는 테마를 통해 맞춤설정할 수 있습니다. 스타일은 서로 덮어씁니다. 속성을 두 번 설정하면 (예: background()) 최종 값이 하나만 생성됩니다.
StyleScope 스타일 내 applyStyle() 함수의 수신자 범위입니다. 시각적 속성 (패딩, 배경, 테두리 등)을 정의하고 현재 StyleState에 액세스하는 함수를 제공합니다.
StyleState 스타일 내에서 조건부 스타일을 정의하는 데 사용할 수 있는 상태 (예: isEnabled, isPressed, isChecked, 맞춤 상태)를 제공합니다.

시작하기: 종속 항목 추가

자체 프로젝트에서 API를 사용하려면 최신 알파 버전의 Jetpack Compose Foundation을 사용해야 합니다. settings.gradle.kts 파일에서 사용할 저장소 목록에 스냅샷 Maven 저장소를 추가합니다.

libs.versions.toml 또는 app/build.gradle.kts 파일에서 직접 Compose 버전을 1.12.0-alpha03로 설정합니다.

compose = "1.12.0-alpha03"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }
다음
스타일 기본사항