تطبيق مظهر ميزة "نظرة سريعة"

توفّر Glance واجهة برمجة تطبيقات لإدارة نسق الألوان. بالنسبة إلى سمات الأنماط الأخرى، مثل TextStyle، يجب تعريف المتغيّرات ذات المستوى الأعلى.

إضافة ألوان

توفّر Glance عملية تنفيذ ألوان Material Design الجاهزة للاستخدام. لاستخدام المظهر المضمّن، يمكنك تضمين الدالة المركّبة ذات المستوى الأعلى مع 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.

على سبيل المثال، يمكنك تقديم ألوان Material Design الحالية في تطبيقك إلى واجهة برمجة التطبيقات ColorProviders لإنشاء نظام ألوان 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).