Jetpack Compose theming – 컴포넌트 “스타일”

컴포즈는 Android View 스타일 또는 CSS 스타일과 같은 컴포넌트 스타일을 추출하는 명시적인 방법을 제공하지 않는다. 모든 컴포즈 컴포넌트는 Kotlin으로 작성되므로 동일한 목표를 달성하는 다른 방법이 있다. 대신 커스터마이즈 된 컴포넌트들의 자체 라이브러리를 만들고 앱 전체에서 사용하자.

우리는 이미 우리 앱에 아래와 같은 코드 작업들을 해오고 있는 중이다.

@Composable
fun Header(
  text: String,
  modifier: Modifier = Modifier
) {
  Surface(
    color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f),
    contentColor = MaterialTheme.colors.primary,
    modifier = modifier.semantics { heading() }
  ) {
    Text(
      text = text,
      style = MaterialTheme.typography.subtitle2,
      modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp, vertical = 8.dp)
    )
  }
}

Header 컴포저블은 기본적으로 앱 전체에서 사용할 수 있는 스타일이 적용된 Text다.

우리는 모든 컴포넌트가 더 낮은 수준의 컴포넌트(=빌딩블록)로 구성되어 있음을 확인했고, 이러한 동일한 컴포넌트를 사용하여 머티리얼의 컴포넌트를 커스터마이징 할 수 있다. 예를 들어 우리는 Button이 ProvideTextStyle 컴포저블을 사용하여 전달된 콘텐츠의 기본 텍스트 스타일을 설정하는 것을 봤다. 똑같은 메커니즘을 사용하여 자신만의 텍스트 스타일을 설정할 수 있다.

@Composable
fun LoginButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonConstants.defaultButtonColors(
            backgroundColor = MaterialTheme.colors.secondary
        ),
        onClick = onClick,
        modifier = modifier
    ) {
        ProvideTextStyle(...) { // set our own text style
            content()
        }
    }
}

이 예제에서는 표준 Button 클래스를 래핑하여 LoginButton의 “스타일”을 만들고, 다른 backgroundColor 및 텍스트 스타일과 같은 특정 속성을 지정한다.

또한 기본적인 스타일이란 개념 없다. 예를들어 컴포넌트 타입의 기본 외형을 커스터마이징 하는 방법이 있다. 다시 말하자면, 라이브러리 컴포넌트를 감싸고 커스터마이징하는 자신만의 컴포넌트 생성하여 스타일을 만들고자 하는 목적을 이룰 수 있다. 예를 들어 앱 전체에서 모든 버튼의 모양을 커스텀하고 싶지만 다른(버튼이 아닌) 컴포넌트에 영향을 줄 수 있는 small shape 테마를 변경하고 싶지 않다고 가정해 보자. 이를 달성하려면 자신만의 컴포저블을 만들고 도처에서 다음과 같이 사용할 수 있다.

@Composable
fun AcmeButton(
  // 소비자가 변경할 수 있는 버튼 매개변수를 노출한다.
) {
  val acmeButtonShape: Shape = ...
  Button(
    shape = acmeButtonShape,
    // 다른 매개변수들
  )
}

후원하기