Bir Bakışta temasını uygulama

Glance, renk temasını yönetmek için bir API sunar. Diğer stil özellikleri için: (ör. TextStyle) üst düzey değişkenleri bildirin.

Renk ekle

Glance, kullanıma hazır Malzeme renkleri uygulamasını sağlar. To yerleşik tema, üst düzey composable'ınızı şurada gösterildiği gibi GlanceTheme ile sarmalayın: aşağıdaki örneğe bakın.

Dinamik renkleri destekleyen cihazlarda bu tema renklerini kullanabilirsiniz. Diğer cihazlarda bu özellik Malzeme tasarımına döner. temel tema. Ambalajdaki renklerle stil vermek için GlanceTheme.colors kullanın tıklayın. Temadaki bu değerleri, renk gereken her yerde kullanabilirsiniz.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}
GlanceSnippets.kt

Temayı özelleştirmek için colors öğesini GlanceTheme öğesine aktarabilirsiniz. Bir Bakışta androidx.glance:glance-material birlikte çalışabilirlik kitaplığını sağlar Malzeme 2 ve Malzeme 3 renkleri için androidx.glance:glance-material3 destek.

Örneğin, uygulamanızın mevcut malzeme renklerini ColorProviders Aşağıdaki snippet'te gösterildiği gibi, Bir Bakışta renk şeması oluşturmak için kullanılan API:

// 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

Şemadaki tüm tonları kapsayan GlanceTheme renklerini girin composables, aşağıdaki örnekte gösterildiği gibi:

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

Desteklendiğinde duvar kağıdından dinamik renkler kullanmayı tercih ederseniz uygulamanızın renk şemasını koşullu olarak geçirebilirsiniz GlanceTheme. Bu, aşağıdaki snippet'te gösterilmektedir:

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

Şekil ekleme

Uygulama widget'ınıza özel şekiller veya gölgeler eklemek için Android Drawables API'si.

Örneğin, aşağıdaki snippet'te bir çizimin (şekil) nasıl oluşturulacağı gösterilmektedir:

<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

Bunu, hedef composable'a sağlayın:

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

Önceki
Bir Bakışta ile kullanıcı arayüzü oluşturma
Sonraki
Bir Bakışta birlikte çalışabilirlik