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.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" }
다음
스타일 기본사항