이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Glance 테마 구현

Glance는 색상 테마를 관리하는 API를 제공합니다. TextStyle와 같은 다른 스타일 속성의 경우 최상위 변수를 선언합니다.

색상 추가

Glance는 즉시 Material 색상의 구현을 제공합니다. 기본 제공 테마를 사용하려면 다음 예와 같이 최상위 컴포저블을 GlanceTheme로 래핑합니다.

동적 색상을 지원하는 기기에서 이 테마는 사용자별 플랫폼 색상에서 파생됩니다. 다른 기기에서는 Material 기준 테마로 대체됩니다. GlanceTheme.colors를 사용하여 래핑된 테마의 색상으로 스타일을 지정할 수 있습니다. 색상이 필요한 곳에 테마의 이러한 값을 사용하면 됩니다.

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...

    )
}GlanceSnippets.kt

테마를 맞춤설정하려면 colors를 GlanceTheme에 전달하면 됩니다. Glance는 Material 2용 androidx.glance:glance-material 상호 운용성 라이브러리와 Material 3 색상 지원용 androidx.glance:glance-material3를 제공합니다.

예를 들어 다음 스니펫과 같이 앱의 기존 머티리얼 색상을 ColorProviders API에 제공하여 Glance 색 구성표를 만듭니다.

// Remember, use the Glance imports
// import androidx.glance.material3.ColorProviders

// Example Imports from your own app
// import com.example.myapp.ui.theme.DarkColors
// import com.example.myapp.ui.theme.LightColors

object MyAppWidgetGlanceColorScheme {

    val colors = ColorProviders(
        light = LightColors,
        dark = DarkColors
    )
}GlanceSnippets.kt

다음 예와 같이 모든 컴포저블을 래핑하는 GlanceTheme에 구성표의 색상을 제공합니다.

override suspend fun provideGlance(context: Context, id: GlanceId) {
    // ...

    provideContent {
        GlanceTheme(colors = MyAppWidgetGlanceColorScheme.colors) {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...
    )
}GlanceSnippets.kt

지원되는 경우 배경화면의 동적 색상을 사용하고 그렇지 않은 경우 앱의 색 구성표를 조건부로 사용하려면 GlanceTheme에서 앱의 색 구성표를 조건부로 전달하면 됩니다. 다음 스니펫에 나와 있습니다.

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme(
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S)
                GlanceTheme.colors
            else
                MyAppWidgetGlanceColorScheme.colors
        ) {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {
    // ...
    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...
    )
}GlanceSnippets.kt

도형 추가

앱 위젯에 특별한 모양이나 그림자를 제공하려면 Android Drawables API를 사용하세요.

예를 들어, 다음 스니펫은 드로어블 (도형)을 만드는 방법을 보여줍니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="16dp"/>
    <stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>button_outline.xml

타겟 컴포저블에 제공합니다.

GlanceModifier.background(
    imageProvider = ImageProvider(R.drawable.button_outline)
)GlanceSnippets.kt

Glance로 UI 빌드

Glance 상호 운용성