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

1. قبل البدء

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

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

على المطوّرين:

أن تكون على دراية بمفاهيم السمات الأساسية في Android
أن تكون على دراية بتعديل مظهر التطبيق

أهداف الدورة التعليمية

كيفية التمييز بين مواضيع Material Components الحالية ومواضيع 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 الخاص بتطبيقك.

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

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

في قسم Android، غيِّر compileSdkVersion وtargetSdkVersion

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

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

تفترض هذه التعليمات وجود تطبيق يتضمّن تبعيات حديثة نسبيًا. بالنسبة إلى التطبيقات التي لا تستخدم Material أو إصدارًا أقدم، يُرجى الاطّلاع على التعليمات الواردة في مستندات "بدء الاستخدام" الخاصة بمكوّنات Material Design لنظام التشغيل 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 ألوان لإنشاء ألوان مشتقة.

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

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

في ما يلي الأدوار لكل من "أساسي" و"ثانوي" و"ثالث" و"خطأ":

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

على سبيل المثال، يستخدم "زر الإجراء الرئيسي" الذي يتضمّن تصميمًا تلقائيًا في Material 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

يحتوي أرشيف التصدير على أدلة قيم وقيم-ليل تتضمّن ملف themes.xml الخاص بها، والذي يتوافق مع المظهرين الفاتح والداكن. يتم تحديد جميع الألوان في values/colors.xml.

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

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

<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

لاستخدام "تراكب المظهر" هذا بدلاً من الإعداد التلقائي في Material، غيِّر المكالمة إلى 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>

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

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

10. ملخّص

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

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