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

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

إضافة ألوان

تتيح لك ميزة "نظرة سريعة" تنفيذ ألوان متعددة الأبعاد خارج العلبة. لاستخدام المظهر المضمَّن، يمكنك إضافة 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. توفِّر ميزة "نظرة سريعة" مكتبة إمكانية التشغيل التفاعلي androidx.glance:glance-material مع Material 2 وandroidx.glance:glance-material3 لـ "دعم ألوان المادة 3".

على سبيل المثال، يمكنك تقديم ألوان المواد الحالية في تطبيقك إلى واجهة برمجة التطبيقات ColorProviders لإنشاء ألوان في ميزة "نظرة سريعة"، كما هو موضّح في المقتطف التالي:

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

على سبيل المثال، يعرض المقتطف التالي كيفية إنشاء شكل قابل للرسم (شكل):

<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).