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),
        // ...

    )
}

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

예를 들어 다음 스니펫과 같이 앱의 기존 Material 색상을 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
    )
}

다음 예와 같이 모든 컴포저블을 래핑하는 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),
        // ...
    )
}

지원되는 경우 배경화면의 동적 색상을 사용하고 그렇지 않은 경우 앱의 색 구성표를 사용하려면 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),
        // ...
    )
}

도형 추가

앱 위젯에 특수한 도형이나 그림자를 제공하려면 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>

대상 컴포저블에 제공합니다.

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

이전
Glance로 UI 빌드
다음
Glance 상호 운용성