واجهة برمجة التطبيقات 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" }