Kotlin Android Fundamentals 10.3: التصميم المناسب للجميع

هذا الدرس التطبيقي حول الترميز هو جزء من دورة "أساسيات Android Kotlin". يمكنك تحقيق أقصى استفادة من هذه الدورة التدريبية إذا اتبعت ترتيب الخطوات في دروس البرمجة. يتم إدراج جميع الدروس التطبيقية حول الترميز الخاصة بالدورة التدريبية في الصفحة المقصودة للدروس التطبيقية حول الترميز في دورة Android Kotlin Fundamentals.

هذا الدرس التطبيقي حول الترميز هو جزء من سلسلة تعلّمك أساسيات تصميم تطبيقات Android وتساعدك في إنشاء تطبيق يعثر على لقاءات مجموعات Google Developer Group (GDG). يعرض التطبيق معلومات حول اللقاءات القادمة بطريقة جميلة وسهلة الاستخدام.

ننصحك بإكمال دروس البرمجة الثلاثة في هذه السلسلة بالترتيب، لأنّها تتضمّن مهامًا متسلسلة خطوة بخطوة:

• ‫10.1 الأنماط والمظاهر
• ‫10.2 Material Design والأبعاد والألوان
• ‫10.3 التصميم من أجل الجميع

مقدمة

من المنطقي أن تسعى إلى جعل التطبيق قابلاً للاستخدام من قِبل أكبر عدد من المستخدمين، سواء كنت تطوّره من أجل المتعة أو لأغراض تجارية. هناك جوانب متعدّدة لتحقيق ذلك.

• إتاحة اللغات التي تُكتب من اليمين إلى اليسار: تُقرأ اللغات الأوروبية والعديد من اللغات الأخرى من اليمين إلى اليسار، وعادةً ما يتم تصميم التطبيقات التي تنشأ من هذه المناطق لتناسب هذه اللغات. تُكتب العديد من اللغات الأخرى التي يتحدث بها عدد كبير من الأشخاص من اليمين إلى اليسار، مثل اللغة العربية. اجعل تطبيقك متوافقًا مع اللغات المكتوبة من اليمين إلى اليسار لزيادة عدد جمهورك المحتمل.
• فحص إمكانية الوصول إنّ محاولة تخمين تجربة المستخدمين الآخرين لتطبيقك هي خيار يتضمّن بعض المخاطر. يساعد تطبيق Accessibility Scanner في تحليل تطبيقك وتحديد الأماكن التي يمكنك تحسين إمكانية الوصول إليها.
• تصميم التطبيقات بما يتوافق مع TalkBack من خلال توفير أوصاف للمحتوى: إنّ مشاكل البصر أكثر شيوعًا ممّا قد يتصوّره البعض، ويستخدم العديد من المستخدمين، وليس فقط المكفوفين، قارئ شاشة. أوصاف المحتوى هي عبارات ينطق بها قارئ الشاشة عندما يتفاعل المستخدم مع أحد عناصر الشاشة.
• إتاحة الوضع الداكن بالنسبة إلى العديد من المستخدمين الذين يعانون من ضعف البصر، يؤدي تغيير ألوان الشاشة إلى تحسين التباين ويساعدهم على استخدام تطبيقك بشكل مرئي. يسهّل نظام التشغيل Android توفير "الوضع الداكن"، ويجب توفيره دائمًا لمنح المستخدمين بديلاً بسيطًا لألوان الشاشة التلقائية.

في هذا الدرس العملي، ستستكشف كل خيار من هذه الخيارات وتضيف إمكانية استخدامه إلى تطبيق GDG Finder.

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

ما يجب معرفته

يجب أن تكون على دراية بما يلي:

• كيفية إنشاء تطبيقات تتضمّن أنشطة ولقطات، والتنقّل بين اللقطات مع تمرير البيانات
• استخدام طرق العرض ومجموعات طرق العرض لتصميم واجهة مستخدم، وخاصةً RecyclerView
• كيفية استخدام "مكوّنات البنية"، بما في ذلك ViewModel، مع البنية المقترَحة لإنشاء تطبيق منظَّم وفعّال
• ربط البيانات والروتينات المشتركة وطريقة التعامل مع نقرات الماوس
• كيفية الاتصال بالإنترنت وتخزين البيانات مؤقتًا على الجهاز باستخدام قاعدة بيانات Room
• كيفية ضبط خصائص طريقة العرض وكيفية استخراج الموارد إلى ملفات موارد XML واستخدامها
• كيفية استخدام الأنماط والمظاهر لتخصيص مظهر تطبيقك
• كيفية استخدام مكوّنات Material وموارد الأبعاد وتلوين مخصّص

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

• كيفية جعل تطبيقك قابلاً للاستخدام من قِبل أكبر عدد من المستخدمين
• كيفية جعل تطبيقك متوافقًا مع اللغات التي تُكتب من اليمين إلى اليسار
• كيفية تقييم إمكانية استخدام تطبيقك
• كيفية استخدام أوصاف المحتوى لتحسين أداء تطبيقك مع قارئات الشاشة
• كيفية استخدام الشرائح
• كيفية جعل تطبيقك متوافقًا مع الوضع الداكن

الإجراءات التي ستنفذّها

• تقييم تطبيق معيّن وتوسيع نطاقه لتحسين إمكانية الوصول إليه من خلال إتاحته للغات التي تُكتب من اليمين إلى اليسار
• افحص تطبيقك لتحديد الجوانب التي يمكن تحسينها في ما يتعلّق بتسهيل الاستخدام.
• استخدِم أوصاف المحتوى للصور.
• تعرَّف على كيفية استخدام العناصر القابلة للرسم.
• أضِف إمكانية استخدام "الوضع الليلي" إلى تطبيقك.

يعتمد تطبيق GDG-finder المبدئي على كل ما تعلّمته حتى الآن في هذه الدورة التدريبية.

يستخدم التطبيق ConstraintLayout لتنسيق ثلاث شاشات. الشاشتان عبارة عن ملفات تصميم ستستخدمها لاستكشاف الألوان والنصوص على Android.

الشاشة الثالثة هي أداة بحث عن مجموعات مطوّري Google. مجموعات Google Developer Group (GDG) هي منتديات للمطوّرين تركّز على تقنيات Google، بما في ذلك Android. تستضيف منتديات GDG في جميع أنحاء العالم لقاءات ومؤتمرات وجلسات دراسية وفعاليات أخرى.

أثناء تطوير هذا التطبيق، ستعمل على القائمة الحقيقية لمجموعات مطوّري Google. تستخدم شاشة البحث الموقع الجغرافي للجهاز لترتيب مجموعات مطوّري Google حسب المسافة.

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

تعرض لقطات الشاشة أدناه كيف سيتغير تطبيقك من بداية هذا الدرس العملي إلى نهايته.

يتمثّل الاختلاف الرئيسي بين اللغات التي تُكتب من اليسار إلى اليمين واللغات التي تُكتب من اليمين إلى اليسار في اتجاه المحتوى المعروض. عندما يتم تغيير اتجاه واجهة المستخدم من اليسار إلى اليمين إلى اليمين إلى اليسار (أو العكس)، يُطلق على ذلك غالبًا اسم "المزامنة". تؤثّر عملية النسخ المطابق في معظم الشاشة، بما في ذلك النصوص ورموز حقول النصوص والتخطيطات والرموز التي تتضمّن اتجاهات (مثل الأسهم). لا يتم عكس عناصر أخرى، مثل الأرقام (الساعة وأرقام الهواتف) والرموز التي ليس لها اتجاه (وضع الطيران وشبكة Wi-Fi) وعناصر التحكّم في التشغيل ومعظم المخططات والرسومات البيانية.

يستخدم أكثر من مليار شخص حول العالم اللغات التي تستخدم اتجاه النص من اليمين إلى اليسار. يتواجد مطوّرو Android في جميع أنحاء العالم، لذا يجب أن يتيح تطبيق GDG Finder اللغات التي تتم الكتابة فيها من اليمين إلى اليسار.

الخطوة 1: إضافة دعم للّغات التي تُكتب من اليمين إلى اليسار

في هذه الخطوة، ستجعل تطبيق GDG Finder متوافقًا مع اللغات التي تُكتب من اليمين إلى اليسار.

1. نزِّل تطبيق GDGFinderMaterial وشغِّله، وهو تطبيق البداية في هذا الدرس العملي، أو واصِل من الرمز النهائي للدرس العملي السابق.
2. افتح ملف AndroidManifest.xml.
3. في القسم <application>، أضِف الرمز التالي لتحديد أنّ التطبيق يتيح استخدام اللغة من اليمين إلى اليسار.

<application
        ...
        android:supportsRtl="true">

4. افتح activity_main.xml في علامة التبويب تصميم.
5. من القائمة المنسدلة اللغة المستخدَمة في المعاينة، اختَر معاينة من اليمين إلى اليسار. (إذا لم تعثر على هذه القائمة، وسِّع اللوحة أو أغلق اللوحة السمات للكشف عنها).

ملاحظة: للاطّلاع على كيفية عرض تطبيقك بصريًا في اللغات من اليمين إلى اليسار، ليس عليك تبديل اللغات على جهازك.

6. في المعاينة، لاحظ أنّ العنوان "GDG Finder" قد انتقل إلى اليسار، وبقيت بقية الشاشة على حالها إلى حدّ كبير. بشكل عام، هذه الشاشة مقبولة. ولكن المحاذاة في عرض النص أصبحت غير صحيحة، لأنّها تتم إلى اليسار بدلاً من اليمين.

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

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

الخطوة 2: استخدام "البداية" و"النهاية" بدلاً من "اليمين" و"اليسار"

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

لحلّ هذه المشكلة، استخدِم مصطلحات Start وEnd بدلاً من "يسار" و "يمين". تحدّد هذه المصطلحات بداية النص ونهايته بشكلٍ مناسب لاتجاه النص في اللغة الحالية، وذلك لضمان ظهور الهوامش والتنسيقات في المواضع الصحيحة من الشاشات.

1. Open list_item.xml.
2. استبدِل أي إشارات إلى Left وRight بإشارات إلى Start وEnd.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

3. استبدِل layout_marginLeft في ImageView بـ layout_marginStart. سيؤدي ذلك إلى نقل الهامش إلى المكان الصحيح لنقل الرمز بعيدًا عن حافة الشاشة.

<ImageView
android:layout_marginStart="
?

4. فتح "fragment_gdg_list.xml" اطّلِع على قائمة مجموعات المطوّرين Google في جزء المعاينة. لاحظ أنّ الرمز لا يزال يشير إلى الاتجاه الخاطئ لأنّه معكوس (إذا لم يكن الرمز معكوسًا، تأكَّد من أنّك لا تزال تعرض المعاينة من اليمين إلى اليسار). وفقًا لإرشادات Material Design، يجب عدم عكس الأيقونات.
5. افتح res/drawable/ic_gdg.xml.
6. في السطر الأول من رمز XML، ابحث عن android:autoMirrored="true" واحذفه لإيقاف ميزة "المطابقة".
7. تحقَّق من المعاينة أو شغِّل التطبيق مرة أخرى وافتح شاشة "البحث عن فعاليات GDG". من المفترض أن يكون التنسيق قد تم إصلاحه الآن.

ملاحظة: يقدّم لك "استوديو Android" نصائح مميّزة باللون الأصفر لتشجيعك على استخدام سمتَي البدء والانتهاء.

استخدِم ميزة البحث والاستبدال مع مطابقة حالة الأحرف للعثور على جميع مرات ظهور Left وRight في تنسيقات XML.

الخطوة 3: السماح لأداة Android Studio بإنجاز العمل نيابةً عنك

في التمرين السابق، اتّخذت خطواتك الأولى لتوفير دعم اللغات التي تُكتب من اليمين إلى اليسار. لحسن الحظ، يمكن لـ Android Studio فحص تطبيقك وإعداد العديد من الأساسيات لك.

1. في ملف list_item.xml، ضمن TextView، غيِّر layout_marginStart إلى layout_marginLeft، لكي يتمكّن الماسح الضوئي من العثور على شيء.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

2. في "استوديو Android"، اختَر إعادة تصميم > إضافة دعم الكتابة من اليمين إلى اليسار حيثما أمكن وضَع علامة في مربّعات تعديل البيان وملفات التصميم لاستخدام السمتَين "بداية" و"نهاية".

3. في لوحة معاينة إعادة تصميم الرمز، ابحث عن مجلد app، ووسِّعه إلى أن تظهر جميع التفاصيل.
4. ضمن مجلد التطبيق، لاحظ أنّ layout_marginLeft الذي غيّرته للتوّ مُدرَج كرمز لإعادة هيكلته.

5. يُرجى العِلم أنّ المعاينة تعرض أيضًا ملفات النظام والمكتبة. انقر بزر الماوس الأيمن على layout وlayout-watch-v20 وأي مجلدات أخرى ليست جزءًا من app، ثم اختَر استبعاد من قائمة السياق.

6. يمكنك إعادة تصميم الرمز البرمجي الآن. (إذا ظهرت لك نافذة منبثقة بشأن ملفات النظام، تأكَّد من استبعاد جميع المجلدات التي لا تشكّل جزءًا من رمز تطبيقك).

7. لاحظ أنّه تم تغيير layout_marginLeft إلى layout_marginStart مرة أخرى.

ملاحظة: تحتاج بعض مكوّنات View إلى المزيد من التخصيص لتعمل بشكلٍ سليم مع اللغات التي تُكتب من اليمين إلى اليسار. للحصول على تحكّم أكثر دقة في واجهة المستخدم، يمكنك استخدام 4 واجهات برمجة تطبيقات مختلفة:

• android:layoutDirection لضبط اتجاه تصميم أحد المكوّنات
• android:textDirection لضبط اتجاه نص أحد المكوّنات
• android:textAlignment لضبط محاذاة نص أحد المكوّنات
• ‫getLayoutDirectionFromLocale() هي طريقة للحصول على اللغة التي تحدّد الاتجاه برمجيًا.

الخطوة 3: استكشاف مجلدات اللغات

حتى الآن، لم يتم سوى تغيير اتجاه اللغة التلقائية المستخدَمة في التطبيق. بالنسبة إلى تطبيق مخصّص للإنتاج، عليك إرسال ملف strings.xml إلى مترجم لترجمته إلى لغة جديدة. في هذا الدرس العملي، يوفّر التطبيق ملف strings.xml باللغة الإسبانية (استخدمنا "ترجمة Google" لإنشاء الترجمات، لذا فهي ليست مثالية).

1. في "استوديو Android"، بدِّل طريقة عرض المشروع إلى ملفات المشروع.
2. وسِّع المجلد res، ولاحظ المجلدات res/values وres/values-es. إنّ الرمز "es" في اسم المجلد هو رمز اللغة الإسبانية. تحتوي مجلدات values-"رمز اللغة" على قيم لكل لغة متوافقة. يحتوي مجلد القيم بدون امتداد على الموارد التلقائية التي تنطبق في الحالات الأخرى.

3. في values-es، افتح strings.xml ولاحظ أنّ جميع السلاسل باللغة الإسبانية.
4. في "استوديو Android"، افتح activity_main.xml في علامة التبويب التصميم.
5. في القائمة المنسدلة اللغة المستخدَمة في المعاينة، اختَر الإسبانية. من المفترض أن يظهر النص الآن باللغة الإسبانية.

6. [اختياري] إذا كنت تجيد إحدى اللغات التي تُكتب من اليمين إلى اليسار، أنشئ مجلد values وملف strings.xml بهذه اللغة واختبِر طريقة ظهورهما على جهازك.
7. [اختياري] غيِّر إعدادات اللغة على جهازك وشغِّل التطبيق. احرص على عدم تغيير لغة جهازك إلى لغة لا تعرفها، لأنّ ذلك سيصعّب عليك التراجع عن هذا الإجراء.

في المهمة السابقة، غيّرت تطبيقك يدويًا ثم استخدمت "استوديو Android" للبحث عن تحسينات إضافية يمكن إجراؤها على التوافق مع اللغات التي تُكتب من اليمين إلى اليسار.

تطبيق Accessibility Scanner هو أفضل حليف لك عندما يتعلّق الأمر بتسهيل استخدام تطبيقك. يفحص التطبيق على جهازك المستهدَف ويقترح تحسينات، مثل تكبير عناصر اللمس وزيادة التباين وتقديم أوصاف للصور لتسهيل استخدام تطبيقك. تطبيق Accessibility Scanner من إنشاء Google، ويمكنك تثبيته من "متجر Play".

الخطوة 1: تثبيت تطبيق Accessibility Scanner وتشغيله

1. افتح "متجر Play" وسجِّل الدخول إذا لزم الأمر. يمكنك إجراء ذلك على جهازك الفعلي أو المحاكي. يستخدم هذا الدرس التطبيقي حول الترميز المحاكي.
   

ملاحظة: إذا لم يكن لديك "متجر Play" على المحاكي، قد تحتاج إلى إنشاء محاكي جديد. تأكَّد من اختيار خيار يتضمّن رمز "متجر Play" مفعَّلاً عند إنشاء المحاكي.

ملاحظة مهمة: لاستخدام "متجر Play" من المحاكي، عليك تسجيل الدخول باستخدام حساب. يمكنك استخدام حسابك العادي أو إنشاء حساب مخصّص للاختبار باستخدام المحاكي. أي حساب تنشئه هو حساب حقيقي، وأنت تتصل بخدمات Play الحقيقية، وليس بإصدار محاكى منها.

ملاحظة مهمة: يمكنك تخطّي إعداد خيارات الفوترة.

2. في "متجر Play"، ابحث عن Accessibility Scanner من Google LLC. احرص على تنزيل التطبيق الصحيح الصادر عن Google، لأنّ أي عملية مسح ضوئي تتطلّب الكثير من الأذونات.

3. ثبِّت الماسح الضوئي على المحاكي.
4. بعد التثبيت، انقر على فتح.
5. انقر على البدء.
6. انقر على حسنًا لبدء إعداد تطبيق Accessibility Scanner في "الإعدادات".

7. انقر على Accessibility Scanner للانتقال إلى إعدادات تسهيل الاستخدام على الجهاز.

8. انقر على استخدام الخدمة لتفعيلها.

9. اتّبِع التعليمات الظاهرة على الشاشة وامنح جميع الأذونات.
10. بعد ذلك، انقر على حسنًا، فهمت، وارجع إلى الشاشة الرئيسية. قد يظهر زر أزرق اللون يتضمّن علامة اختيار في مكان ما على الشاشة. يؤدي النقر على هذا الزر إلى بدء اختبار التطبيق في المقدّمة. يمكنك تغيير موضع الزر من خلال سحبه. يبقى هذا الزر في أعلى أي تطبيقات، ما يتيح لك بدء الاختبار في أي وقت.

لإيقاف التطبيق، انتقِل إلى الإعدادات وأوقِف Accessibility Scanner.

11. افتح تطبيقك أو شغِّله.
12. انقر على الزر الأزرق واقبل تحذيرات الأمان والأذونات الإضافية.

في المرة الأولى التي تنقر فيها على رمز تطبيق Accessibility Scanner، سيطلب التطبيق إذنًا بالوصول إلى كل ما يظهر على شاشتك. يبدو هذا الإذن مخيفًا جدًا، وهو كذلك بالفعل.

يجب عدم منح إذن من هذا النوع أبدًا تقريبًا، لأنّه يسمح للتطبيقات بقراءة بريدك الإلكتروني أو حتى الحصول على معلومات حسابك المصرفي. ومع ذلك، لكي يتمكّن تطبيق Accessibility Scanner من أداء عمله، عليه فحص تطبيقك بالطريقة التي يستخدمه بها المستخدم، ولهذا السبب يحتاج إلى هذا الإذن.

ملاحظة مهمة: قبل تفعيل هذا الإذن، تحقَّق جيدًا من أنّ التطبيق الذي ثبَّته هو "فاحص إمكانية الوصول" من Google LLC.

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

14. انقر على المربّع المحيط بأداة GDG Finder. يؤدي ذلك إلى فتح لوحة تتضمّن معلومات إضافية، كما هو موضّح أدناه، تشير إلى مشاكل في تباين الصورة.
15. وسِّع معلومات تباين الصورة، وستقترح الأداة حلولاً.
16. انقر على الأسهم المتّجهة لليسار للحصول على معلومات عن العنصر التالي.

17. في تطبيقك، انتقِل إلى شاشة تقديم طلب للحصول على شهادة GDG وافحصها باستخدام تطبيق Accessibility Scanner. سيؤدي ذلك إلى تقديم عدد كبير من الاقتراحات، كما هو موضّح أدناه على اليمين. ‫12، على وجه التحديد. ولكن يجب الإشارة إلى أنّ بعضها مكرّر لسلع مشابهة.
18. انقر على رمز "الحزمة" في شريط الأدوات السفلي للحصول على قائمة بجميع الاقتراحات، كما هو موضّح أدناه في لقطة الشاشة اليسرى. ستتناول كل هذه المشاكل في هذا الدرس العملي.

تتضمّن مجموعة تمكين استخدام Android، وهي مجموعة من التطبيقات من Google، أدوات للمساعدة في تسهيل استخدام التطبيقات. وتشمل أدوات مثل TalkBack. ‫TalkBack هو قارئ شاشة يقدّم ملاحظات سمعية ولمسية وشفهية، ما يتيح للمستخدمين التنقّل في المحتوى على أجهزتهم واستهلاكه بدون استخدام أعينهم.

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

إذًا، إمكانية الوصول للجميع! في هذه المهمة، ستجرّب ميزة TalkBack وتحدّث تطبيقك ليعمل بشكل جيد معها.

الخطوة 1: تثبيت "حزمة أدوات تسهيل الاستخدام" وتشغيلها

يكون TalkBack مثبَّتًا مسبقًا على العديد من الأجهزة الفعلية، ولكن عليك تثبيته على المحاكي.

1. افتح "متجر Play".
2. ابحث عن مجموعة أدوات تسهيل الاستخدام. تأكَّد من أنّه التطبيق الصحيح من Google.
3. إذا لم تكن مثبَّتة، ثبِّت "حزمة تسهيل الاستخدام".
4. لتفعيل TalkBack على الجهاز، انتقِل إلى الإعدادات > تسهيل الاستخدام وفعِّل TalkBack من خلال النقر على استخدام الخدمة. تمامًا مثل أداة "فحص تسهيل الاستخدام"، تتطلّب ميزة TalkBack أذونات لقراءة المحتوى على الشاشة. بعد قبول طلبات الأذونات، ترحّب بك ميزة TalkBack من خلال قائمة بالأدلة التعليمية لتعليمك كيفية استخدامها بفعالية.
5. ننصحك بالتوقف هنا وإكمال البرامج التعليمية، ولو فقط لمعرفة كيفية إيقاف TalkBack عند الانتهاء.
6. للخروج من البرنامج التعليمي، انقر على زر الرجوع لاختياره، ثم انقر مرّتين في أي مكان على الشاشة.

ملاحظة: إذا لم تتمكّن من سماع أي شيء، عليك رفع مستوى الصوت.

ملاحظة: للنقر على عنصر، انقر عليه مرّتين. للتمرير أو السحب، انقر مرّتين ثم اسحب.

7. استكشاف التطبيق باستخدام TalkBack لاحظ الأماكن التي لا تقدّم فيها ميزة TalkBack أي معلومات مفيدة عن الشاشة أو أحد عناصر التحكّم. ستحلّ هذه المشكلة في التمرين التالي.

الخطوة 2: إضافة وصف للمحتوى

واصِفات المحتوى هي تصنيفات وصفية توضّح معنى المشاهدات. يجب أن تتضمّن معظم طرق العرض أوصافًا للمحتوى.

1. بعد تشغيل تطبيق GDG Finder وتفعيل Talkback، انتقِل إلى شاشة تقديم طلب لتنظيم فعالية GDG.
2. انقر على الصورة الرئيسية ... ولا يحدث أي شيء.
3. افتح add_gdg_fragment.xml.
4. في ImageView، أضِف سمة وصف المحتوى كما هو موضّح أدناه. يتم توفير السلسلة stage_image_description لك في الملف strings.xml.

android:contentDescription="@string/stage_image_description"

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

الخطوة 3: إضافة تلميحات إلى حقول النص القابلة للتعديل

بالنسبة إلى العناصر القابلة للتعديل، مثل EditText، يمكنك استخدام android:hint في XML لمساعدة المستخدمين في معرفة ما يجب كتابته. يظهر تلميح دائمًا في واجهة المستخدم لأنّه النص التلقائي في حقل الإدخال.

1. لا يزال في add_gdg_fragment.xml.
2. أضِف أوصافًا وتلميحات للمحتوى، واستخدِم الرمز البرمجي أدناه كدليل.

الإضافة إلى textViewIntro:

android:contentDescription="@string/add_gdg"

أضِف إلى مربّعات تعديل النصوص ما يلي:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

3. أضِف وصفًا للمحتوى إلى labelTextWhy.

android:contentDescription="@string/motivation" 

4. أضِف تلميحًا إلى EditTextWhy. بعد تصنيف مربّعات التعديل، أضِف وصفًا للمحتوى إلى التصنيف وتلميحًا إلى المربّع.

android:hint="@string/enter_motivation"

5. أضِف وصفًا للمحتوى لزر الإرسال. يجب أن تتضمّن جميع الأزرار وصفًا لما يحدث عند الضغط عليها.

android:contentDescription="@string/submit_button_description"

6. شغِّل تطبيقك مع تفعيل TalkBack، واملأ النموذج لتقديم طلب استضافة فعالية لمجموعة مطوّري Google.

الخطوة 4: إنشاء مجموعة محتوى

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

لتجميع عناصر واجهة المستخدم، يمكنك تضمينها في ViewGroup، مثل LinearLayout. في تطبيق GDG Finder، يُعدّ العنصران labelTextWhy وeditTextWhy من الخيارات الممتازة للتجميع لأنّهما ينتميان إلى بعضهما دلاليًا.

1. افتح add_gdg_fragment.xml.
2. أضِف LinearLayout حول LabelTextWhy وEditTextWhy لإنشاء مجموعة محتوى. انسخ الرمز أدناه والصِقه. يحتوي ملف LinearLayout هذا على بعض أنماط التنسيق التي تحتاج إليها. (تأكَّد من أنّ button خارج LinearLayout).

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

3. اختَر الرمز > إعادة تنسيق الرمز لترك مسافة بادئة بشكل صحيح في كل الرمز.
4. أزِل جميع هوامش التصميم من labelTextWhy وeditTextWhy.
5. في labelTextWhy، غيِّر قيد layout_constraintTop_toTopOf إلى contentGroup.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

6. في editTextWhy، غيِّر قيد layout_constraintBottom_toBottomOf إلى contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. قيِّد EditTextRegion وButton بـ contentGroup للتخلّص من الأخطاء.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. أضِف هوامش إلى LinearLayout. يمكنك اختياريًا استخراج هذا الهامش كسمة.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

إذا كنت بحاجة إلى مساعدة، قارِن الرمز بالرمز add_gdg_fragment.xml في رمز الحلّ.

9. شغِّل تطبيقك واستكشِف شاشة طلب تشغيل GDG باستخدام TalkBack.

الخطوة 5: إضافة منطقة نشطة

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

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

1. افتح add_gdg_fragment.xml.
2. غيِّر مهمة نص الزر إلى إرسال باستخدام مورد السلسلة submit المتوفّر.

android:text="@string/submit"

3. أضِف منطقة نشطة إلى الزرّ من خلال ضبط السمة android:accessibilityLiveRegion. أثناء الكتابة، تتوفّر لك عدة خيارات لقيمتها. استنادًا إلى أهمية التغيير، يمكنك اختيار ما إذا كنت تريد مقاطعة المستخدم أم لا. عند ضبط القيمة على "حازم"، ستتوقّف خدمات تسهيل الاستخدام عن نطق الكلام الجاري حاليًا للإعلان فورًا عن التغييرات في طريقة العرض هذه. إذا ضبطت القيمة على "none"، لن يتم الإعلان عن أي تغييرات. عند ضبطها على "مؤدبة"، تعلن خدمات تسهيل الاستخدام عن التغييرات، ولكنها تنتظر دورها. اضبط القيمة على "polite".

android:accessibilityLiveRegion="polite"

4. في حزمة add، افتح AddGdgFragment.kt.
5. داخل showSnackBarEvent Observer، بعد الانتهاء من عرض SnackBar، اضبط وصفًا جديدًا للمحتوى ونصًا للزر.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

6. شغِّل تطبيقك وانقر على الزر. للأسف، الزر والخط صغيران جدًا.

الخطوة 6: إصلاح نمط الزر

1. في ملف add_gdg_fragment.xml، غيِّر width وheight للزر إلى wrap_content، حتى يظهر التصنيف الكامل ويكون الزر بحجم مناسب.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. احذف السمات backgroundTint وtextColor وtextSize من الزر لكي يستخدم التطبيق تصميمًا أفضل للمظهر.
3. احذف السمة textColor من textViewIntro. يجب أن توفّر ألوان التصميم تباينًا جيدًا.
4. شغِّل التطبيق. لاحظ زر إرسال الذي أصبح أكثر سهولة في الاستخدام. انقر على إرسال ولاحظ كيف يتغيّر إلى تم.

الشرائح هي عناصر مضغوطة تمثّل سمة أو نصًا أو كيانًا أو إجراءً. تسمح للمستخدمين بإدخال معلومات أو تحديد خيار أو فلترة المحتوى أو بدء إجراء.

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

تستخدم الشرائح عناصر قابلة للرسم. تتيح لك عناصر Android القابلة للرسم رسم الصور والأشكال والصور المتحركة على الشاشة، ويمكن أن يكون لها حجم ثابت أو حجم ديناميكي. يمكنك استخدام الصور كعناصر قابلة للرسم، مثل الصور في تطبيق GDG، كما يمكنك استخدام الرسومات المتجهة لرسم أي شيء يخطر ببالك. يتوفّر أيضًا عنصر قابل للرسم وتغيير الحجم يُعرف باسم عنصر 9-patch القابل للرسم، وهو غير مشمول في هذا الدرس التطبيقي حول الترميز. شعار GDG، في drawable/ic_gdg.xml، هو عنصر آخر قابل للرسم.

لا يمكن وضع عناصر قابلة للرسم مباشرةً داخل ConstraintLayout لأنّها ليست طرق عرض، بل يجب وضعها داخل ImageView. يمكنك أيضًا استخدام عناصر قابلة للرسم لتوفير خلفية لعرض نص أو زر، ويتم رسم الخلفية خلف النص.

الخطوة 1: إضافة شرائح إلى قائمة "مجموعات مطوّري Google"

تستخدم الشريحة التي تم وضع علامة عليها أدناه ثلاثة عناصر قابلة للرسم. الخلفية وعلامة الاختيار هما عنصران قابلان للرسم. يؤدي النقر على الشريحة إلى إنشاء تأثير تموّج، ويتم ذلك باستخدام RippleDrawable خاص يعرض تأثير تموّج استجابةً لتغييرات الحالة.

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

1. افتح الملف fragment_gdg_list.xml.
2. أنشئ com.google.android.material.chip.ChipGroup داخل HorizontalScrollView.. اضبط الخاصية singleLine على true، وذلك لترتيب جميع الشرائح في سطر واحد يمكن الانتقال فيه أفقيًا. اضبط قيمة السمة singleSelection على true لكي يتم اختيار شريحة واحدة فقط في المجموعة في كل مرة. إليك الرمز.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

3. في مجلد التصميم، أنشئ ملفًا جديدًا لمورد التصميم باسم region.xml لتحديد تصميم Chip واحد.
4. في ملف egion.xml، استبدِل كل الرمز البرمجي بتصميم Chip واحد كما هو موضّح أدناه. يُرجى العِلم أنّ Chip هو أحد مكوّنات Material. لاحظ أيضًا أنّه يمكنك الحصول على علامة الاختيار من خلال ضبط السمة app:checkedIconVisible. سيظهر لك خطأ بشأن لون selected_highlight المفقود.

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

5. لإنشاء اللون selected_highlight الناقص، ضَع المؤشر على selected_highlight، وافتح قائمة الخيارات، ثم انقر على إنشاء مورد ألوان للنص المحدّد. الخيارات التلقائية مناسبة، لذا ما عليك سوى النقر على حسنًا. يتم إنشاء الملف في المجلد res/color.
6. افتح res/color/selected_highlight.xml. في قائمة حالات الألوان هذه، التي تم ترميزها على هيئة <selector>، يمكنك توفير ألوان مختلفة للحالات المختلفة. يتم ترميز كل حالة ولون مرتبط بها على شكل <item>. يمكنك الاطّلاع على سمات الألوان لمعرفة المزيد عن هذه الألوان.

7. داخل <selector>، أضِف عنصرًا بلون تلقائي colorOnSurface إلى قائمة الحالات. في قوائم الولايات، من المهم دائمًا تغطية جميع الولايات. تتمثل إحدى طرق القيام بذلك في استخدام لون تلقائي.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

8. أضِف item بلون colorPrimaryVariant فوق اللون التلقائي، واقتصر على استخدامه عندما تكون الحالة المحدّدة هي true. يتم الانتقال إلى قوائم الحالات من الأعلى إلى الأسفل، مثل عبارة case. إذا لم تتطابق أي من الحالات، يتم تطبيق الحالة التلقائية.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

الخطوة 2: عرض صف الشرائح

ينشئ تطبيق GDG قائمة بالرقائق التي تعرض المناطق التي تتضمّن مجموعات مطوّري Google. عند اختيار شريحة، يفلتر التطبيق النتائج لعرض نتائج "مجموعات مطوّري Google" في تلك المنطقة فقط.

ملاحظة: لا يشمل هذا الدرس التطبيقي حول الترميز طريقة إنشاء هذه القائمة وطريقة فلترة النتائج. إذا أردت معرفة كيفية الحصول على قائمة "مجموعات مطوّري Google" وكيفية تنفيذ عملية الفلترة، يمكنك الاطّلاع على الملفات في حزمتَي البحث والشبكة. على وجه الخصوص، راجِع GdgListViewModel.

1. في حزمة البحث، افتح GdgListFragment.kt.
2. في onCreateView()، فوق عبارة return مباشرةً، أضِف مراقبًا على viewModel.regionList وتجاهل onChanged(). عندما تتغيّر قائمة المناطق التي يوفّرها نموذج العرض، يجب إعادة إنشاء الشرائح. أضِف عبارة للرجوع فورًا إذا كانت قيمة data المُقدَّمة هي null.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

3. داخل onChanged()، أسفل اختبار القيمة الخالية، عيِّن binding.regionList لمتغيّر جديد باسم chipGroup لتخزين regionList مؤقتًا.

val chipGroup = binding.regionList

4. في ما يلي، أنشئ layoutInflator جديدًا لتضخيم الشرائح من chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

5. نظِّف مشروعك وأعِد إنشاءه للتخلّص من خطأ ربط البيانات.

أسفل أداة التضخيم، يمكنك الآن إنشاء الشرائح الفعلية، واحدة لكل منطقة في regionList.

6. أنشئ متغيّرًا، children، لتخزين جميع الشرائح. عيِّن دالة ربط على data الذي تم تمريره لإنشاء كل شريحة وإرجاعها.

val children = data.map {} 

7. داخل دالة lambda الخاصة بالخريطة، أنشئ شريحة واملأها لكل regionName. في ما يلي الرمز المكتمل.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

8. داخل دالة lambda، وقبل عرض chip مباشرةً، أضِف أداة معالجة النقرات. عند النقر على chip، اضبط حالته على checked. استدعِ الدالة onFilterChanged() في viewModel، ما يؤدي إلى تشغيل سلسلة من الأحداث التي تسترد نتيجة هذا الفلتر.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

9. في نهاية الدالة lambda، أزِل جميع طرق العرض الحالية من chipGroup، ثم أضِف جميع الشرائح من children إلى chipGroup. (لا يمكنك تعديل الشرائح، لذا عليك إزالة محتوى chipGroup وإعادة إنشائه).

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

يجب أن يكون المراقب المكتمل على النحو التالي:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

12. شغِّل تطبيقك وابحث عن GDGS لفتح شاشة البحث واستخدام الشرائح الجديدة. عند النقر على كل شريحة، سيعرض التطبيق مجموعات الفلاتر أسفلها.

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

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

الخطوة 1: تفعيل "الوضع الليلي"

لتوفير المظهر الداكن لتطبيقك، عليك تغيير مظهره من المظهر Light إلى مظهر يُسمى DayNight. يظهر المظهر DayNight فاتحًا أو داكنًا، حسب الوضع.

1. في styles.xml,، غيِّر المظهر الرئيسي AppTheme من Light إلى DayNight.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. في طريقة MainActivityonCreate()، استخدِم AppCompatDelegate.setDefaultNightMode() لتفعيل المظهر الداكن آليًا.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. شغِّل التطبيق وتأكَّد من أنّه تم التبديل إلى المظهر الداكن.

الخطوة 2: إنشاء لوحة ألوان خاصة بك للمظهر الداكن

لتخصيص المظهر الداكن، أنشئ مجلدات باستخدام أداة التحديد -night للمظهر الداكن. على سبيل المثال، يمكنك استخدام ألوان معيّنة في "الوضع الليلي" من خلال إنشاء مجلد باسم values-night.

1. انتقِل إلى أداة اختيار الألوان على material.io وأنشِئ لوحة ألوان لمظهر الوضع الداكن. على سبيل المثال، يمكنك استنادها إلى لون أزرق داكن.
2. أنشئ ملف colors.xml ونزِّله.
3. بدِّل إلى طريقة عرض ملفات المشروع لإدراج جميع المجلدات في مشروعك.
4. ابحث عن مجلد res ووسِّعه.
5. أنشئ مجلد موارد res/values-night.
6. أضِف ملف colors.xml الجديد إلى مجلد الموارد res/values-night.
7. شغِّل تطبيقك مع تفعيل الوضع الداكن، وسيفترض أن يستخدم التطبيق الألوان الجديدة التي حدّدتها في res/values-night. لاحظ أنّ الشرائح تستخدم اللون الثانوي الجديد.

مشروع "استوديو Android": GDGFinderFinal

دعم اللغات التي تُكتب من اليمين إلى اليسار

• في ملف Android Manifest، اضبط android:supportsRtl="true".
• يمكنك معاينة المحتوى من اليمين إلى اليسار في المحاكي، ويمكنك استخدام لغتك للتحقّق من تخطيطات الشاشة. على جهاز أو محاكي، افتح الإعدادات، وفي خيارات المطوّرين، اختَر فرض تخطيط من اليمين إلى اليسار.
• استبدِل الإشارات إلى Left وRight بالإشارات إلى Start وEnd.
• يمكنك إيقاف النسخ المطابق للعناصر القابلة للرسم من خلال حذف android:autoMirrored="true".
• اختَر Refactor > Add RTL support where possible ليتولّى "استوديو Android" تنفيذ هذه العملية نيابةً عنك.
• استخدِم مجلدات values-"رمز اللغة" لتخزين الموارد الخاصة بلغة معيّنة.

فحص المحتوى بحثًا عن مشاكل تسهيل الاستخدام

• في "متجر Play"، نزِّل تطبيق Accessibility Scanner من Google LLC وشغِّله للبحث عن عناصر الشاشة التي يمكن تحسينها.

تصميم تطبيقات متوافقة مع TalkBack باستخدام أوصاف المحتوى

• ثبِّت مجموعة "خدمات تسهيل استخدام Android" من Google، والتي تتضمّن TalkBack.
• أضِف أوصافًا للمحتوى إلى جميع عناصر واجهة المستخدم. على سبيل المثال:
  android:contentDescription="@string/stage_image_description"
• بالنسبة إلى عنصر قابل للتعديل، مثل EditText، استخدِم السمة android:hint في XML لتقديم تلميح للمستخدم بشأن النص المطلوب كتابته.
• أنشئ مجموعات محتوى من خلال تضمين العناصر ذات الصلة في مجموعة عرض.
• أنشئ منطقة نشطة لتزويد المستخدمين بملاحظات إضافية باستخدام android:accessibilityLiveRegion.

استخدام الشرائح لتنفيذ فلتر

• الشرائح هي عناصر مضغوطة تمثّل سمة أو نصًا أو كيانًا أو إجراءً.
• لإنشاء مجموعة من الشرائح، استخدِم com.google.android.material.chip.ChipGroup.
• حدِّد التنسيق لسمة com.google.android.material.chip.Chip واحدة.
• إذا كنت تريد أن تتغير ألوان الشرائح، قدِّم قائمة بحالات الألوان على شكل <selector> مع ألوان تتضمّن حالات:
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• اربط الشرائح ببيانات مباشرة من خلال إضافة مراقب إلى البيانات في نموذج العرض.
• لعرض الشرائح، أنشئ أداة تضخيم لمجموعة الشرائح:
  LayoutInflater.from(chipGroup.context)
• أنشئ الشرائح، وأضِف أداة معالجة نقرات تؤدي إلى تنفيذ الإجراء المطلوب، ثم أضِف الشرائح إلى مجموعة الشرائح.

إتاحة استخدام الوضع الداكن

• استخدِم DayNight AppTheme لتفعيل الوضع الداكن.
• يمكنك ضبط الوضع الداكن آليًا:
  AppCompatDelegate.setDefaultNightMode()
• أنشِئ مجلد موارد res/values-night لتوفير ألوان وقيم مخصّصة للوضع الداكن.

مستندات مطوّري تطبيقات Android:

• LayoutDirection (RTL)
• ثنائية الاتجاه
• بدء استخدام Accessibility Scanner
• TalkBack
• إيماءات TalkBack
• مستندات النظرة العامة على العناصر القابلة للرسم
• واصفات المحتوى
• تجميع المحتوى
• المحتوى الديناميكي المتغيّر
• العناصر الرسومية القابلة للتوسيع NinePatch
• أداة Draw 9-patch
• Chips
• ChipGroup
• المظهر الداكن
• تنسيق الألوان
• أداة الألوان
• إضافة حركة إلى الرسومات القابلة للرسم

مراجع أخرى:

• تطوير تطبيقات Android باستخدام لغة Kotlin (دورة تدريبية على Udacity)
• برنامج تدريبي حول لغة Kotlin للمبرمجين (دورة تدريبية على Udacity)
• البرامج التدريبية حول الترميز في Kotlin للمبرمجين

يسرد هذا القسم مهامًا منزلية محتملة للطلاب الذين يعملون على هذا الدرس التطبيقي العملي كجزء من دورة تدريبية يقودها مدرّب. على المعلّم تنفيذ ما يلي:

• حدِّد واجبًا منزليًا إذا لزم الأمر.
• توضيح كيفية إرسال الواجبات المنزلية للطلاب
• وضع درجات للواجبات المنزلية

يمكن للمدرّبين استخدام هذه الاقتراحات بالقدر الذي يريدونه، ويجب ألا يترددوا في تكليف الطلاب بأي واجبات منزلية أخرى يرونها مناسبة.

إذا كنت تعمل على هذا الدرس العملي بنفسك، يمكنك استخدام مهام الواجب المنزلي هذه لاختبار معلوماتك.

السؤال 1

أيّ مما يلي إلزامي لدعم اللغات التي تُكتب من اليمين إلى اليسار؟

▢ استبدال Left وRight في الخصائص بـ Start وEnd

▢ التبديل إلى لغة مكتوبة من اليمين إلى اليسار

▢ التأكّد من أنّ جميع الرموز تستخدم android:autoMirrored="true"

▢ تقديم أوصاف للمحتوى

السؤال 2

أيّ من أدوات تسهيل الاستخدام التالية تكون مضمّنة في معظم أجهزة Android؟

‫▢ TalkBack

▢ Accessibility Scanner

‫▢ في "استوديو Android"، إعادة تصميم > إضافة دعم الكتابة من اليمين إلى اليسار حيثما أمكن

‫▢ Lint

السؤال 3

أيّ مما يلي غير صحيح بشأن رقائق البطاطس؟

‫▢ يمكنك عرض الشرائح كجزء من ChipGroup.

‫▢ يمكنك تقديم قائمة بحالات الألوان لعنصر ChipGroup.

▢ الشرائح هي عناصر مضغوطة تمثّل إدخالاً أو سمةً أو إجراءً.

▢ يجب تفعيل DarkTheme دائمًا إذا كان تطبيقك يستخدم شرائح.

السؤال 4

أيّ مظهر يوفّر لك أنماطًا للوضع الداكن والوضع الفاتح؟

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

السؤال 5

ما هي المنطقة النشطة؟

▢ عقدة تحتوي على معلومات مهمة للمستخدم

‫▢ منطقة في الشاشة يتغير شكلها وفقًا لإرشادات Material

‫▢ طريقة عرض تتيح بث الفيديو

‫▢ عنصر قابل للرسم المتحرّك