Style API هو نموذج جديد لتخصيص العناصر والمكوّنات أو "تنسيقها" في Jetpack Compose، وهو ما كان يتم عادةً من خلال المُعدِّلات. وهي مصمَّمة لتوفير إمكانات تخصيص أعمق وأسهل.
توفّر واجهة Styles API مرونة أكبر على مستوى أشكال الأجهزة، وتساهم في تحسين الأداء، وتسهّل إنشاء أنظمة تصميم مخصّصة. حتى إذا لم تكن بحاجة إلى مكوّنات مخصّصة، توفّر Styles API العديد من المزايا لنظام التصميم الخاص بك.
من المهم الإشارة إلى أنّ الأنماط لا تحلّ محل المُعدِّلات، بل تحلّ محل مَعلمات الأنماط، مثل المساحة المتروكة والألوان. ننصحك بالانتقال إلى استخدام الأنماط بدلاً من المَعلمات لزيادة المرونة وتحسين الأداء.
مهارات Android
العرض على GitHubالأنماط
android skills add stylesمزايا الأنماط
- تبسيط الأنماط المستندة إلى الحالة: توفّر واجهة برمجة التطبيقات طريقة أكثر إيجازًا ووضوحًا لتحديد الأنماط التي تتغيّر استنادًا إلى حالات مختلفة (مثل التمرير فوق العنصر أو التركيز عليه أو الضغط عليه)، ما يقلّل بشكل كبير من الرموز البرمجية النموذجية مقارنةً بنظام المُعدِّلات.
- تحسين الانتقالات المتحركة بين الحالات: تتيح واجهة Style API استخدام تأثيرات متحركة مضمّنة لخصائص الأنماط بين الحالات مع خصائص أداء مثالية، ما يجنّب حدوث عمليات إعادة تركيب التي تحدث مع نهج
animateColorAsStateالحالي. - تبسيط واجهات برمجة التطبيقات للمكوّنات: من خلال تقديم مَعلمة نمط واحدة للتخصيص، يتم تبسيط واجهات برمجة التطبيقات للمكوّنات بشكل كبير وتوفير مرونة أكبر.
- عدد أقل من عمليات إعادة الإنشاء يؤدي إلى أداء أفضل مقارنةً بالمعدِّلات: يتم تشغيل الأنماط في مرحلتَي "الرسم" و"التنسيق" في Compose، مع تخطّي مرحلة "الإنشاء".
- مجموعة أكثر توحيدًا من واجهات برمجة التطبيقات: تتيح مجموعة عادية من سمات الأنماط إمكانية تصميم أي مكوّن.
المفاهيم الأساسية
| الفكرة | الوصف |
|---|---|
Style |
واجهة تحدّد مظهر عنصر في واجهة المستخدم، مع مجموعة معايير التعلُّم من الخصائص القابلة للتنسيق. وهي تشبه أنماط CSS ويمكن تخصيصها محليًا أو من خلال مظهر. تستبدل الأنماط بعضها بعضًا، ويؤدي ضبط سمة مرتين (مثل background()) إلى الحصول على قيمة نهائية واحدة. |
StyleScope |
نطاق مستقبِل لدالة applyStyle() ضمن "نمط". وتوفّر دوال لتحديد الخصائص المرئية (مثل المساحة المتروكة والخلفية والحدود وما إلى ذلك) والوصول إلى StyleState الحالي. |
StyleState |
توفّر الحالة (مثل isEnabled وisPressed وisChecked والحالات المخصّصة) التي يمكنك استخدامها ضمن نمط لتحديد نمط شرطي. |
البدء: إضافة التبعيات
لاستخدام واجهات برمجة التطبيقات في مشروعك، تأكَّد من استخدام أحدث إصدار أولي
من Jetpack Compose foundation. في ملف settings.gradle.kts، أضِف مستودع Maven للّقطات إلى قائمة المستودعات التي تريد استخدامها.
في ملف libs.versions.toml أو مباشرةً في ملف app/build.gradle.kts، اضبط إصدار Compose على 1.12.0-alpha03:
compose = "1.12.0-alpha03"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }