הטמעת עיצוב 'בקצרה'

‫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 יש את ספריית יכולת הפעולה ההדדית androidx.glance:glance-material ל-Material 2, ואת androidx.glance:glance-material3 לתמיכה בצבעים של Material 3.

לדוגמה, אתם יכולים לספק ל-API של ColorProviders את צבעי ה-Material הקיימים של האפליקציה כדי ליצור ערכת צבעים של 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

הערה: אתם יכולים להשתמש במבנה של תיקיית המשאבים של Android כדי להגדיר צורות שונות או משאבים אחרים לכל סוג של הגדרה (למשל, values-night).