דף זה תורגם על ידי Cloud Translation API.

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

התכונה 'בקצרה' מספקת API לניהול עיצוב הצבעים. במאפייני סגנון אחרים, כמו TextStyle, להצהיר על משתנים ברמה עליונה.

הוספת צבעים

התכונה 'בקצרה' מאפשרת להטמיע צבעים בעיצוב חדשני מהקופסה. כדי להשתמש עיצוב מובנה, יש לעטוף את התוכן הקומפוזבילי ברמה העליונה באמצעות GlanceTheme, כמו שמוצג בדוגמה הבאה.

במכשירים שתומכים בצבעים דינמיים, העיצוב הזה נגזר צבעי פלטפורמה ספציפיים למשתמש. במכשירים אחרים, הפונקציה של הבסיס. אפשר להשתמש ב-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. בקצרה מספקת את ספריית יכולת הפעולה ההדדית androidx.glance:glance-material חומר 2 ו-androidx.glance:glance-material3 ל'חומר לימוד' 3 צבעים תמיכה.

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

צריך לספק את הצבעים מלוח הצבעים של 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 ממשק API של Drawables.

לדוגמה, קטע הקוד הבא מראה איך ליצור צורה ניתנת להזזה (צורה):

<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

פיתוח ממשק משתמש באמצעות 'בקצרה'

יכולת פעולה הדדית של 'בקצרה'