نقل تصميمات XML إلى Material 3 في Compose

عند إضافة Compose إلى تطبيق حالي، عليك نقل سمات Material XML لاستخدام MaterialTheme لمكوّنات Compose. وهذا يعني أنّ تصميم تطبيقك سيستند إلى مرجعَين أساسيَّين، هما التصميم المستند إلى العرض والتصميم المستند إلى Compose. يجب إجراء أي تغييرات على الأنماط في مواضع متعددة. بعد نقل تطبيقك بالكامل إلى Compose، أزِل تصميم XML.

يمكنك استخدام أداة Material Theme Builder لنقل الألوان.

عند بدء عملية نقل البيانات من XML إلى Compose، عليك نقل نظام التصميم إلى نظام التصميم المتوافق مع Material 3 في Compose.

مسرد المصطلحات

العبارة التعريف
MaterialTheme الدالة القابلة للإنشاء التي توفّر السمات (الألوان وأسلوب الخط والأشكال) لمكوّنات واجهة مستخدم Compose
Shape أحد عناصر Compose المستخدَمة لتحديد أشكال مخصّصة للمكوّنات في MaterialTheme
Typography عنصر Compose يُستخدَم لتحديد أنماط نص مخصّصة (مجموعات الخطوط وأحجامها وأوزانها) لعنصر MaterialTheme.
Color كائن Compose يُستخدَم لتحديد أنظمة ألوان مخصّصة لـ MaterialTheme.
مظهر XML نظام السمات في Android المحدّد في ملفات XML، والذي يستخدمه نظام View

القيود

قبل نقل البيانات، يُرجى التعرّف على القيود التالية:

  • يركّز هذا الدليل على نقل البيانات إلى Material 3 فقط. للانتقال من أنظمة تصميم بديلة، راجِع Material 2 أو أنظمة التصميم المخصّصة في Compose.
  • والهدف النهائي هو نقل جميع التطبيقات إلى Compose، ما يتيح إزالة تصميم XML. يوضّح هذا الدليل كيفية نقل البيانات، ولكنّه لا يوضّح كيفية إزالة ميزة تحديد المظهر باستخدام XML نهائيًا.

الخطوة 1: تقييم نظام التصميم

تحديد نظام التصميم المستخدَم في مشروع "عرض XML" تحليل مسار نقل البيانات والخطوات اللازمة لنقل نظام التصميم الحالي إلى Material 3 في Compose

الخطوة 2: تحديد ملفات مصدر المظهر

تحديد جميع موارد وملفات XML اللازمة لتطبيق التصميم وتحديد موقعها: مخططات الألوان الفاتحة والداكنة، والتصاميم، والأشكال، والأبعاد، والطباعة، والأنماط وغيرها من الملفات ذات الصلة

يمكن إعادة استخدام الموارد، مثل السلاسل، كما هي ولا يلزم نقلها.

الخطوة 3: نقل الألوان

انقل أنظمة الألوان الداكنة والفاتحة من XML إلى ما يعادلها في Material 3 Compose.

الخطوة 4: نقل الأشكال المخصّصة والكتابة

  • إذا كان تطبيقك يستخدم أشكالاً مخصّصة:

    1. في رمز Compose، حدِّد عنصر Shape لتكرار تعريفات أشكال XML.

    2. قدِّم كائن Shape هذا إلى MaterialTheme.

      لمزيد من التفاصيل، يُرجى الاطّلاع على الأشكال.

  • إذا كان تطبيقك يستخدم خطوطًا مخصّصة:

    1. في رمز Compose، حدِّد كائن Typography في رمز Compose لتكرار أنماط النصوص وتعريفات الخطوط في XML.

    2. قدِّم كائن Typography هذا إلى MaterialTheme.

      لمزيد من التفاصيل، يُرجى الاطّلاع على أسلوب الخط.

الخطوة 5: التحقّق من صحة عملية نقل المظهر

يجب دائمًا استخدام قيم المظهر الحالية من مظهر XML الأصلي كمصدر للمظهر الجديد Material Theme في Compose ويجب عدم إنشاء قيم مظهر جديدة أثناء عملية نقل البيانات للحفاظ على اتساق العلامة التجارية وتجنُّب المشاكل المرئية.

تأكَّد من أنّ جميع قيم سمات Compose الجديدة تتطابق مع قيم XML الحالية. لا تبرمج أي قيم تم نقلها بشكل ثابت.