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