إذا كنت تخوض غمار عالم تطبيقات أندرويد الأصلية، فربما تكون قد لاحظت ذلك يؤلف Jetpack لقد جاء هذا ليغير قواعد اللعبة. انسَ ملفات XML المملة؛ الآن نعمل في بيئة تصريحية حيث يتم بناء الواجهة باستخدام الدوال، مما يجعل التطوير أكثر سلاسة وطبيعية، خاصة إذا كنت قادمًا من أطر عمل مثل Flutter أو React Native.
وبهذا المعنى، فإن تنفيذ تصميم المواد 3 (M3)لا يقتصر M3 Expressive، المعروف أيضاً باسم Material You، على كونه طبقة جمالية فحسب، بل هو تطور شامل في كيفية تفاعل المستخدمين. يوسع M3 Expressive إمكانيات الحركة والطباعة والمكونات، مما يمنح التطبيقات إحساساً بالحركة. نابض بالحياة وشخصيوحتى التكيف مع الابتكارات البصرية لنظام أندرويد 16.
جوهر السمة: ماتيريال ثيم
لتشغيل M3، أول شيء يجب فعله هو إضافة التبعية المناسبة إلى ملف build.gradle: implementation "androidx.compose.material3:material3:$material3_version"وبمجرد الانتهاء من ذلك، يصبح العنصر المركزي هو ماتيريال ثيموهو بمثابة حاوية نحدد فيها نظام الألوان والخطوط والأشكال. إذا صنّفت أي واجهة برمجة تطبيقات (API) هذا العنصر على أنه تجريبي، فلا تقلق، كل ما عليك فعله هو إضافة التعليق التوضيحي. @ExperimentalMaterial3Api في الوظيفة أو الملف المقابل.
اللعب بالألوان والسحر الديناميكي
لا يعتمد نظام ألوان M3 على درجة لونية واحدة، بل على مجموعة من خمسة ألوان أساسية والتي تُنشئ لوحات ألوان مكونة من 13 مستوى لكل منها. وهذا يسمح للمكونات بالحصول على تناسق بصري بغض النظر عما إذا كان المستخدم يستخدم الوضع الفاتح أو الداكن. إذا كنت لا ترغب في إجهاد ذهنك بتحديد كل لون يدويًا، فإن الأداة منشئ موضوع المواد إنه برنامج رائع، لأنه يقوم بتصدير الملفات مباشرة. Color.kt y Theme.kt مع تحديد جميع الأدوار.
لكن ما يثير دهشتك حقاً هو اللون الديناميكيبفضل تقنية Material You، يستطيع التطبيق استخراج الألوان من خلفية شاشة المستخدم (المتوفرة منذ نظام Android 12) وتطبيقها على واجهة المستخدم. ولتحقيق ذلك، يستخدم التطبيق ميزات مثل dynamicLightColorScheme y dynamicDarkColorSchemeضمان أن يكون التطبيق مريحًا متكامل عضويًا مع بقية نظام التشغيل.
أدوار الألوان وإمكانية الوصول
لا تخدم جميع الألوان نفس الغرض. اللون الأساسي يُستخدم هذا اللون للعناصر الأكثر بروزًا، بينما تساعد الألوان الثانوية والثالثية في خلق التباينات والتسلسلات الهرمية البصرية. من الضروري احترام أدوار "اللون المتوافق" (مثل في المرحلة الابتدائيةوالتي تضمن أن يكون النص مقروءًا على الخلفية، وبالتالي يفي بمعايير إمكانية الوصول إلى التباين للمستخدمين الذين يعانون من صعوبات بصرية.
الطباعة والأشكال: منح التطبيق هوية
لقد سهّل نظام M3 مقياس الكتابة. أصبح لدينا الآن فئات واضحة: الرسومات، والعناوين، والنصوص، والملصقاتلكل منها أحجام صغيرة ومتوسطة وكبيرة. على عكس الإصدارات السابقة، يتم هنا تحديد الخط بشكل فردي في كل منها. TextStyleلتنفيذ ذلك، نقوم بإنشاء كائن Typography وننقلها إلى MaterialThemeمما يسمح لنا بالوصول إليها من خلال MaterialTheme.typography في أي مكان في واجهة المستخدم.
من حيث الشكل، تقدم M3 مجموعة معبرة تتراوح من من صغير جدًا إلى كبير جدًايُعد هذا الأمر أساسيًا لتحديد المكونات والتواصل بشأن الحالات. يمكننا تعريف فئة. Shapes مُخصصة مع RoundedCornerShape بحيث يكون للبطاقات أو الأزرار نصف قطر حدود يناسب العلامة التجارية على أفضل وجه، باستخدام MaterialTheme.shapes لتطبيقها بشكل عام أو مكونًا تلو الآخر.
مكونات الارتفاع والملاحة
لقد شهد الارتفاع في Material 3 منعطفاً مثيراً للاهتمام. لم نعد نعتمد فقط على الظلال، بل نستخدم الآن عناصر أخرى. تراكبات لونية متدرجةكلما زاد التباين اللوني، كلما برز لون المساحة الأساسي على السطح. العنصر Surface إنها الأداة الرئيسية هنا، والتي تتيح لك ضبط كل من ارتفاع النغمة مثل الارتفاع الظلي.
فيما يخص الملاحة، يقدم نظام M3 حلولاً قابلة للتكيف بناءً على حجم الشاشة. شريط التنقل إنه مثالي للهواتف المحمولة ذات الوجهات القليلة، بينما سكة الملاحة يتألق هذا التطبيق على الأجهزة اللوحية في الوضع الأفقي. أما بالنسبة للشاشات الكبيرة، فإن... درج التنقل إنه الخيار الأمثل. تأتي هذه المكونات مزودةً بأنماط M3، ولكن يمكنك دائمًا تخصيصها باستخدام عناصر مثل CardDefaults.cardColors لضبط الألوان والارتفاعات وفقًا لحالة العنصر.
تفاصيل النظام وتجربة المستخدم
هناك تفاصيل قد لا يلاحظها المستخدمون، لكنها تُحسّن بشكل كبير من تجربة استخدام التطبيق. على سبيل المثال، تأثيرات موجة تموج أصبحت الآن أكثر دقة و الإزاحة الزائدة يستخدم تأثير التمدد على الحاويات مثل LazyColumnمما يجعل التنقل يبدو أكثر مرونة وحداثة.
بدمج كل هذا، بدءًا من تكوين سطح لوني بدءًا من النشاط الرئيسي وصولًا إلى تطبيق خطوط محددة على شاشات التفاصيل، نضمن أن التطبيق ليس مجرد أداة وظيفية، بل منتج متناسق بصريًا. يكمن السر في معرفة كيفية دمج استخدام أدوار الألوان بفضل مرونة مكونات Compose، مما يسمح بأن تكون الواجهة قابلة للتكيف، ويمكن الوصول إليها، وقبل كل شيء، جذابة للمستخدم النهائي.