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

توفّر ميزة "نظرة سريعة" واجهة برمجة تطبيقات لإدارة مظهر الألوان. وبالنسبة لسمات النمط الأخرى، مثل 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),
        // ...

    )
}

لتخصيص المظهر، يمكنك تمرير colors إلى GlanceTheme. نظرة سريعة توفّر مكتبة إمكانية التشغيل التفاعلي "androidx.glance:glance-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
    )
}

وفّر الألوان من المخطط إلى 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),
        // ...
    )
}

إذا كنت تفضّل استخدام الألوان الديناميكية من الخلفية عند توفّرها، نظام ألوان التطبيق، وإلا يمكنك تمرير نظام ألوان تطبيقك مشروطًا في 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),
        // ...
    )
}

إضافة أشكال

لتوفير أشكال أو تظليلات خاصة لأداة التطبيق، يمكنك استخدام واجهة برمجة التطبيقات 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>

تقديمه إلى العنصر القابل للإنشاء:

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