واجهة برمجة التطبيقات 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.11.0-alpha06:
compose = "1.11.0-alpha06"
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" }