Wdrażanie motywu W skrócie

Glance udostępnia interfejs API do zarządzania motywem kolorystycznym. W przypadku innych atrybutów stylu, takich jak TextStyle, zadeklaruj zmienne najwyższego poziomu.

Dodaj kolory

Glance zapewnia gotową implementację kolorów Material Design. Aby użyć wbudowanego motywu, opakuj komponent najwyższego poziomu w GlanceTheme, jak pokazano w przykładzie poniżej.

Na urządzeniach, które obsługują dynamiczne kolory, ten motyw jest generowany na podstawie kolorów platformy określonych przez użytkownika. Na innych urządzeniach zostanie przywrócony podstawowy motyw Material. Użyj GlanceTheme.colors, aby zastosować kolory z motywu opakowanego. Możesz używać tych wartości z motywu wszędzie tam, gdzie potrzebny jest kolor.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

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

    )
}

Aby dostosować motyw, możesz przekazać colors do GlanceTheme. Glance udostępnia bibliotekę interoperacyjności androidx.glance:glance-material dla Material 2 i androidx.glance:glance-material3 dla obsługi kolorów Material 3.

Na przykład podaj istniejące kolory Material Design aplikacji w interfejsie API ColorProviders, aby utworzyć schemat kolorów Glance, jak pokazano w tym fragmencie kodu:

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

Przekaż kolory ze schematu do elementu GlanceTheme, który zawiera wszystkie elementy kompozycyjne, jak w tym przykładzie:

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

Jeśli wolisz używać dynamicznych kolorów z tapety, gdy są obsługiwane, a w przeciwnym razie schematu kolorów aplikacji, możesz warunkowo przekazać schemat kolorów aplikacji w GlanceTheme. Zostało to pokazane w tym fragmencie kodu:

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

Dodawanie kształtów

Aby dodać do widżetu aplikacji specjalne kształty lub cienie, użyj interfejsu Android Drawables API.

Na przykład ten fragment kodu pokazuje, jak utworzyć obiekt rysowalny (kształt):

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

Przekaż go do docelowej funkcji kompozycyjnej:

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

Wstecz
Tworzenie interfejsu użytkownika za pomocą Glance
Dalej
Interoperacyjność w funkcji Glance