Compose의 스타일

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

스타일 API는 폼 팩터 전반의 유연성을 개선하고, 더 나은 성능을 제공하며, 맞춤 디자인 시스템을 더 쉽게 만들 수 있도록 지원합니다. 맞춤 구성요소가 필요하지 않더라도 스타일 API는 디자인 시스템에 많은 이점을 제공합니다.

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

스타일의 이점

  • 상태 기반 스타일 간소화: API는 다양한 상태(예: 마우스 오버, 포커스, 누름)에 따라 변경되는 스타일을 정의하는 더 간결하고 선언적인 방법을 제공하여 수정자 시스템에 비해 상용구 코드를 크게 줄입니다.
  • 애니메이션 상태 전환 개선: 스타일 API를 사용하면 이상적인 성능 특성을 갖는 상태 간 스타일 속성의 내장 애니메이션이 가능하여 현재 animateColorAsState 접근 방식으로 발생하는 리컴포지션을 방지할 수 있습니다.
  • 구성요소 API 간소화: 맞춤설정을 위한 단일 스타일 매개변수를 도입하여 구성요소 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.11.0-alpha06로 설정합니다.

compose = "1.11.0-alpha06"

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" }