إضافة لون ديناميكي إلى تطبيقك

1. قبل البدء

في هذا الدرس التطبيقي حول الترميز، ستُجري تحديثًا لتطبيق البدء، وهو تطبيق حساب نصائح لاستخدام الميزات الجديدة في "التصميم المتعدد الأبعاد" 3، ما يتيح تعديل مظهر واجهة مستخدم التطبيق بشكل ديناميكي استنادًا إلى خلفية المستخدم. في ما يلي بعض لقطات الشاشة للتطبيق مع تطبيق ألوان ديناميكية. ستفحص أيضًا بعض السيناريوهات الإضافية التي تسمح لك بالتحكم في كيفية تطبيق الألوان.

المتطلبات الأساسية

يجب أن يكون المطورين

• كنت على دراية بمفاهيم إنشاء المواضيع الأساسية في Android.
• مريح في تعديل مظهر التطبيق

ما ستتعرَّف عليه

• كيفية التمييز بين مكونات Material 3 الحالية وموضوعات Material 3
• كيفية تعديل مظهر إلى Material 3
• كيفية إنشاء مظاهر باستخدام أدواتنا وتطبيقها
• كيفية ارتباط سمات الموضوعات ببعضها البعض

المتطلبات

• جهاز كمبيوتر تم تثبيت "استوديو Android" عليه
• رمز تطبيق Tip Time https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution

2. نظرة عامة على تطبيق المبتدئين

تطبيق Tip Time هو تطبيق لآلة حاسبة النصائح ويضم خيارات لتخصيص النصيحة. وهو أحد نماذج التطبيقات من الدورة التدريبية "أساسيات Android" في لغة Kotlin.

3- تحديث تبعيات Gradle

قبل أن نعدّل المظهر الفعلي ونطبّق اللون الديناميكي، يجب إجراء بعض التغييرات في ملف Build.gradle لتطبيقك.

في قسم الموارد التابعة، تأكَّد من أنّ مكتبة المواد هي 1.5.0-alpha04 أو إصدارًا أحدث:

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
}

في قسم android، غيِّر البيانات التجميعية إلى إصدار CompSdkVersion و targetSdkVersion.

إلى 31 أو تاريخ لاحق:

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

تفترض هذه التعليمات تطبيقًا له تبعيات حديثة نسبيًا. إذا كان أحد التطبيقات لا يستخدم حاليًا نظام Material أو إصدارًا أقل حداثة، يُرجى الاطّلاع على التعليمات الواردة في مستندات البدء الخاصة بمكونات التصميم المتعدد الأبعاد لنظام Android.

أينما أنشأت المظاهر، غيِّر المراجع من Theme.MaterialComponents.* إلى Theme.Material3.*. بعض الأنماط ليس لها نمط جديد حتى الآن في مساحة الاسم Material3، ولكن معظم المكونات ستكتسب النمط الجديد بعد تحديث المظهر الرئيسي إلى Theme.Material3.*. يمكننا أن نرى أدناه أن الأزرار تستخدم الآن الموضوعات المستديرة الجديدة.

في ملف المظاهر أدناه، الشيء الوحيد الذي تم تغييره هو الموضوع الأصلي. سنستبدل هذا الموضوع بالكامل بعد قليل. لقد أصبحت بعض سمات الألوان قديمة وبعض الأنماط المخصصة التي أنشأناها أصبحت الآن قياسية في Material3 ولكننا أردنا الحصول على

themes.xml

<style name="Theme.TipTime" parent="Theme.Material3.Light">
   <!-- Primary brand color. -->
   <item name="colorPrimary">@color/green</item>
   <item name="colorPrimaryVariant">@color/green_dark</item>
   <item name="colorOnPrimary">@color/white</item>
   <!-- Secondary brand color. -->
   <item name="colorSecondary">@color/blue</item>
   <item name="colorSecondaryVariant">@color/blue_dark</item>
   <item name="colorOnSecondary">@color/black</item>
   <!-- Status bar color. -->
   <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
   <!-- For text input fields -->
   <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
   <!-- For radio buttons -->
   <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
   <!-- For switches -->
   <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>

4. فهم سمات الألوان وأدوار الألوان

يستخدم نظام ألوان Material 3 نهجًا منظمًا لتطبيق الألوان على واجهة المستخدم الخاصة بك. لا يزال عدد من السمات من Theme.AppCompat قيد الاستخدام. ومع ذلك، تمت إضافة المزيد من السمات في Theme.MaterialComponents.* والمزيد في Theme.Material3.*، لذلك من المهم فحص جميع شاشات تطبيقك للتأكّد من عدم خروج أي سمات غير مُطبّقة من المظهر الأساسي.

فهم أدوار الألوان

هناك أكثر من عشرين سمة مرتبطة باللون في مظهر Material 3. قد يبدو هذا شاقًا في البداية ولكن هناك حقًا عدد قليل من الألوان الرئيسية التي تندمج مع نفس أدوار الألوان 4-5 لإنشاء ألوان مشتقة.

مجموعات الألوان هذه هي:

• اللون الأساسي، اللون الأساسي لتطبيقك
• اللون الثانوي، هو اللون الثانوي لتطبيقك
• ثالثي، إما لون ثالث مكمل للّون الأساسي والثانوي
• خطأ، يُستخدم لنص الخطأ ومربعات الحوار
• الخلفية
• السطح، SurfaceVariant، انعكاس السطح

تكون الأدوار على النحو التالي: "أساسي" و"ثانوي" و"ثالث" و"خطأ":

<اللون الأساسي>	اللون الأساسي
على<اللون الأساسي>	لون الرموز والنص الذي يظهر على اللون الأساسي
<base color>الحاوية	مشتق من القاعدة واللون والمستخدمة للأزرار ومربعات الحوار، وما إلى ذلك
على<base color>الحاوية	لون الرموز والنص في الحاوية

على سبيل المثال، إنّ "زر الإجراءات العائم" ذو التصميم التلقائي في المادة 3 يستخدم Primary كلون أساسي، وبالتالي يستخدم "primaryContainer" للون خلفية الزر و"onPrimaryContainer" لمحتواه.

عند تخصيص مظهر يدويًا، عليك التأكّد على الأقل من أنّ السمة on<base color> لكل لون أساسي تغيّره لا تزال واضحة.

تتمثل أفضل الممارسات في ضبط جميع الأدوار في مجموعة الألوان في نفس الوقت لضمان عدم وجود عناصر من الأساس إلى تطبيقك.

يكون للخلفية ولون سطح الأرض بشكل عام دوران: للون الأساسي نفسه وon<base color> للرموز أو النص الذي يظهر عليه.

5- إنشاء مظهر Material 3 باستخدام Material Theme Builder

تسهِّل أداة Material Theme Builder إنشاء نظام ألوان مخصّص، واستخدام أداة تصدير الرموز البرمجية المضمَّنة لنقل البيانات إلى نظام الألوان M3 والاستفادة من الألوان الديناميكية. مزيد من المعلومات material.io/material-theme-builder

يحتوي مظهر تطبيق Tip Time على عدة أنماط للمكوّنات، ولكن معظم الأنماط تكون تلقائية في مظاهر Material 3. اللونان الرئيسيان الوحيدان اللذان نحتاج إلىهما هما اللون الأساسي والثانوي.

تتوافق هذه مع اللون الأساسي الأخضر (#1B5E20) واللون الثانوي الأزرق (0288D1).

يمكنك إدخال هذه الألوان في Material Theme Builder وتصدير مظهر كامل (بافتراض وجود رابط إلى نظرة عامة كاملة في مكان آخر).

ضع في اعتبارك أن الألوان التي تدخلها قد تتغير في الأسلوب لتناسب خوارزمية إنشاء الألوان وتضمن ألوانًا تكميلية وقابلة للقراءة.

في ما يلي مجموعة فرعية من القيم التي تم إنشاؤها عند إدخال ألوان مخصصة.

6- استخدام ملفات التصدير في Material Theme Builder

يحتوي أرشيف التصدير على قيم ودلائل value-night/ مع ملف products.xml خاص بهما، بما يتوافق مع المظاهر الفاتحة والداكنة. ويتم تحديد كل الألوان في القيم/colors.xml.

يمكن نسخ الملفات كما هي، ولكن سيكون عليك تغيير اسم المظهر AndroidManifest.xml أو في ملفات المظاهر ليتطابق مع بعضها. الاسم التلقائي المستخدَم من الأدوات هو AppTheme.

أعِد تشغيل التطبيق ويبدو بالشكل نفسه تقريبًا. من بين التغييرات البارزة هذه أزرار التبديل وأزرار الاختيار، التي يتم وضع مظهرها على حالاتها المحددة الآن باستخدام درجات لونية أساسية مقابل ألوان ثانوية. في التطبيقات الأكبر، قد تضطر إلى إعادة النظر في بعض التصميمات.

ملاحظة: قد تظهر لك رسالة خطأ بشأن ملف AndroidManifest.xml وتطبيقات Android 12 التي تحتاج إلى تحديد قيمة صريحة لـ android:exported للنشاط.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.tiptime">

   <application ...>
       <activity android:name=".MainActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

</manifest>

7. جارٍ إضافة لون ديناميكي

باستخدام مظهر Material 3 المناسب قيد الاستخدام، يمكننا جعل واجهة المستخدم ديناميكية من خلال بعض الإضافات الصغيرة.

تسمح لك واجهة برمجة التطبيقات للألوان الديناميكية بتطبيق ألوان ديناميكية على جميع الأنشطة

في تطبيق أو أنشطة فردية أو طرق عرض أو أجزاء فردية. موجَّه إلى

هذا التطبيق، فسنستخدم لونًا ديناميكيًا على مستوى العالم.

إنشاء ملف فئة تطبيق

class TipTimeApplication: Application() {
    override fun onCreate() {
        // Apply dynamic color
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

علينا الإشارة إلى هذا الملف الذي تم إنشاؤه حديثًا في بيان Android:

ملف AndroidManifest.xml

< application android name=".TipTimeApplication
<!--- Other existing attributes –>

</application >

في أنظمة Android 12 والإصدارات الأحدث، يتم فحص ورقة الحائط الخاصة بالمستخدم للمخطط التلقائي لإنشاء العديد من لوحات الألوان. يتم استخدام القيم من هذه اللوحات لإنشاء ThemeOverlay.

تسجِّل فئة DynamicColors ActivityLifecycleCallbacks الذي يتعارض مع ActivityPreCreated لتطبيق تراكب المظهر الديناميكي الذي أنشأه النظام أو العنصر الذي قدّمته.

8. تطبيق تراكب مظهر مخصص

يمكن للأدوات التي نوفّرها تصدير تراكبات المظاهر، ولكن يمكنك أيضًا إنشاؤها يدويًا في حال تجاوز عدد قليل من السمات.

ومن المفترض استخدام تراكب المظاهر مع مظهر آخر، ولا يوفّر سوى القيم التي ستتغيّر فوق المظهر الأساسي.

لنفترض أنه لسبب ما، وربما بناء العلامة التجارية، نحتاج إلى درجات الألوان الأساسية لتكون ظلال من الأحمر. يمكننا القيام بذلك باستخدام الملفات والسمات التالية.

colors.xml

<resources>
    <color name="overlay_light_primary">#9C4146</color>
    <color name="overlay_light_onPrimary">#FFFFFF</color> 
    <color name= "overlay_light_primaryContainer">#FFDADB</color>
    <color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >

themes_overlays.xml

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
    <item name="colorPrimary">@color/overlay_light_primary</item>
    <item name="colorOnPrimary">@color/overlay_light_onPrimary</item> 
    <item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item> 
    <item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>

بالنسبة إلى الرمز البرمجي أعلاه، سيطبّق Android 12 مظهرًا ديناميكيًا الفاتح ويعرض التغييرات التي أجريتها عليه. يمكنك بدلاً من ذلك استخدام أي سمة ThemeOverlay صالحة كعنصر رئيسي، بما في ذلك أي مما يلي:

ThemeOverlay.Material3.Light

ThemeOverlay.Material3.Dark

ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark

ThemeOverlay.Material3.DynamicColors.DayNight

لاستخدام ميزة "تراكب المظهر" هذه بدلاً من القيمة التلقائية للمواد، يمكنك تغيير الطلب إلى DynamicColors.applyToActivitiesIfAvailable ليصبح:

DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)

9. إضافة لون ديناميكي إلى السمات المخصصة

لقد ألغينا حتى الآن الخصائص الموجودة بالفعل في مظهر Material 3. هناك حالة أخرى محتملة ممكنة في اللون الديناميكي، حيث قد يكون لدينا سمة مخصّصة واحدة أو أكثر يجب تخصيصها.

عندما يستخدم أحد التطبيقات اللون الديناميكي، يحصل على إمكانية الوصول إلى 5 لوحات ألوان تتنوّع بين ثلاث لوحات ألوان ولوحتَين محايدتَين مع الأدوار التالية التقريبية:

system_accent1	درجات الألوان الأساسية
system_accent2	درجات الألوان الثانوية
system_accent3	درجات ألوان ثلاثية
system_neutral1	خلفيات وأسطح محايدة
system_neutral2	الأسطح والمخططات المحايدة

تحتوي كل لوحة على عدد من خطوات الدرجات اللونية التي تتراوح من الأبيض

إلى الأسود: 0، 10، 50، 100، 200، 300، 400، 500، 600، 700، 800، 900، 1000

عند تصميم واجهة مستخدم للون الديناميكي، يجب أن تفكر أقل في اللون المحدد وأكثر حول علاقة درجة لون هذا المكون وإضاءته بالآخرين في نظام التصميم.

لنفترض أنك أردت أن يكون موضوع الرموز باستخدام لوحة التشكيل الثانوية وقمت بإضافة سمة لأيقونات التلوين بالإدخال التالي في attrs.xml.

attrs.xml

<resources>
    <attr name="iconColor" format="color" />
</resources>

قد يبدو تراكب المظهر كما يلي:

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight"> 
<item name="iconColor">@android:color/system_accent2_600</item>
</style>

وعند إعادة تثبيت التطبيق وتغيير الخلفية، سيختار التطبيق تلك اللوحة الثانوية.

تقتصر هذه اللوحات على نظام التشغيل Android 12 (واجهة برمجة التطبيقات 31)، لذا سيكون عليك وضع الملفات ذات الصلة في مجلدات باللاحقة -v31 ما لم يتم ضبط الحد الأدنى لحزمة تطوير البرامج (SDK) على 31 أو إصدار أحدث في تطبيقك.

10. ملخّص

في هذا الدرس التطبيقي حول الترميز، نجحت في:

• أضف التبعيات لترقية المظهر إلى Material 3.
• افهم مجموعات الألوان والأدوار الجديدة.
• التعرُّف على كيفية الانتقال من مظهر ثابت إلى لون ديناميكي
• تعرَّف على كيفية استخدام تراكبات المظاهر واستخدام ألوان ديناميكية لسمات المظاهر المخصّصة.