واجهة برمجة التطبيقات Style API هي نموذج جديد لتخصيص العناصر والمكوّنات أو "تصميمها" في Jetpack Compose، وهو ما كان يتم تقليديًا من خلال المعدِّلات. وهي مصمَّمة لتوفير تخصيص أسهل وأكثر تفصيلاً.
تحسّن واجهة برمجة التطبيقات Styles API المرونة على مستوى عوامل شكل الأجهزة، وتوفّر أداءً أفضل، وتسهّل إنشاء أنظمة تصميم مخصّصة. حتى إذا لم تكن بحاجة إلى مكوّنات مخصّصة، تقدّم واجهة برمجة التطبيقات Styles API العديد من المزايا لنظام التصميم.
من المهم التمييز بين الأنماط والمعدِّلات، فالأنماط ليست بديلاً عن المعدِّلات، ولكنها تحل محلّ مَعلمات التصميم، مثل المساحة الداخلية والألوان. ننصحك بالانتقال إلى استخدام الأنماط بدلاً من المَعلمات لزيادة المرونة وتحسين الأداء.
مزايا الأنماط
- تبسيط التصميم المستند إلى الحالة: توفّر واجهة برمجة التطبيقات طريقة أكثر إيجازًا وتصريحًا لتحديد الأنماط التي تتغيّر استنادًا إلى حالات مختلفة (مثل التمرير فوق العنصر أو التركيز عليه أو الضغط عليه)، ما يقلّل بشكل كبير من رمز النص النموذجي مقارنةً بنظام المعدِّلات.
- تحسين عمليات الانتقال بين الحالات المتحركة: تتيح واجهة برمجة التطبيقات 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" }