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

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

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

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

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

مقدمة

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

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

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

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

ما يجب معرفته

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخطوة 1: إضافة دعم من اليمين إلى اليسار

في هذه الخطوة، يمكنك جعل تطبيق GDG Finder يعمل مع لغات RTL.

1. نزِّل تطبيق GDGFinderMaterial، وهو تطبيق للمبتدئين لهذا الدرس التطبيقي أو انتقِل إلى الرمز النهائي للدرس التطبيقي السابق من الترميز.
2. افتح ملف بيان Android.
3. في القسم <application>، أضِف الرمز التالي لتحديد أن التطبيق يتوافق مع RTL.

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

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

ملاحظة: ليس عليك تبديل اللغات على جهازك للتحقّق من طريقة عرض تطبيقك من خلال تقنية RTL.

6. في المعاينة، لاحظ أن العنوان &quot؛GDG Finder&quot قد تحرك إلى اليسار، وأن باقي الشاشة تبقى إلى حد كبير تقريبًا. وبوجهٍ عام، يمكن اجتياز هذه الشاشة. ولكن المحاذاة في عرض النص خاطئة الآن، لأنها تمت محاذاة إلى اليمين، بدلاً من اليمين.

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

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

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

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

لإصلاح هذه المشكلة، بدلاً من &"left" &"right&" استخدِم المصطلحين 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 تحقّق من قائمة GDGs في اللوحة معاينة. لاحظ أن الرمز لا يزال يشير في الاتجاه الخاطئ نظرًا لأنه يتم عكسه (إذا كان الرمز غير مطابق، تأكّد من أنك لا تزال تعرض معاينة من اليمين إلى اليسار). وفقًا لإرشادات التصميم المتعدد الأبعاد، يجب عدم النسخ المطابق للرموز.
5. افتح res/Drawable/ic_gdg.xml.
6. في السطر الأول من رمز XML، ابحث عن android:autoMirrored="true" واحذفه لإيقاف النسخ المطابق.
7. تحقّق من المعاينة أو شغِّل التطبيق مرة أخرى وافتح شاشة "بحث GDG". يجب إصلاح التنسيق الآن.

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

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

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

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

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

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

2. في "استوديو Android"، اختَر Re &&gt، وأضِف دعم RTL متى أمكن وضع علامة في المربّعات لتعديل البيان وملفات التنسيق لاستخدام خصائص البدء والانتهاء.

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

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

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

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

ملاحظة: تحتاج بعض مكوّنات View إلى مزيد من التخصيص للعمل بشكل صحيح مع RTL. للحصول على تحكم أكثر دقة في واجهة المستخدم، هناك 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-"language;language;quot; على قيم لكل لغة معتمدة. يحتوي مجلد القيم الذي لا يحتوي على إضافة على الموارد التلقائية التي تنطبق بخلاف ذلك.

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

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

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

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

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

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

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

ملاحظة مهمة: لاستخدام "متجر Play" من المحاكي، عليك تسجيل الدخول باستخدام حساب. ويمكنك استخدام حسابك العادي أو إنشاء حساب للاختبار فقط من خلال المحاكي. ويكون أي حساب تُنشئه مرتبطًا بأحد الحسابات، ولكنك تحاول ربط خدمات "Google Play" الحقيقية وليس نسخة تحاكيه.

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

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

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

7. انقر على فاحص إمكانية الوصول للانتقال إلى إعدادات تسهيل الاستخدام في الجهاز.

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

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

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

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

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

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

ملاحظة مُهمّة: قبل تفعيل هذا الإذن، يُرجى التحقّق للتأكّد من أن التطبيق الذي ثبّته هو Accessibility Scanner من Google LLC.

13. انقر على الزر الأزرق وانتظر حتى تكتمل عملية التحليل. ستشاهد شيئًا مثل لقطة الشاشة أدناه، مع العنوان ومربع الإجراء (FAB) باللون الأحمر. ويشير هذا إلى اقتراحين لتحسين إمكانية الوصول على هذه الشاشة.

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

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

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

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

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

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

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

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

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

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

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

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

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

1. بعد تشغيل تطبيق Finder إلى GDG وتفعيل Talback، انتقِل إلى شاشة تقديم طلب لتشغيل 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. شغِّل تطبيقك مع تفعيل Talback، واملأ النموذج لتقديم طلب لتشغيل GDG.

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

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

لتجميع مكوِّنات واجهة المستخدم، يجب تضمينها في ViewGroup، مثل LinearLayout. في تطبيق الباحث عن GDG، يُعد العنصران 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"; الإعلان عن التغييرات، ولكن تنتظر دورهم. ضبط القيمة على &"polite"

android:accessibilityLiveRegion="polite"

4. في الحزمة إضافة، افتح 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، غيِّر الزر's 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 أجزاء قابلة للسحب، وهي غير مضمّنة في هذا الدرس التطبيقي حول الترميز. ويمكن العثور على شعار GDG أيضًا بطريقة أخرى في Drawable/ic_gdg.xml.

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

الخطوة 1: إضافة شرائح إلى قائمة GDG

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

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

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. في ملف region.xml، استبدِل الرمز كاملاً بتنسيق وحدة Chip على النحو الموضّح أدناه. لاحِظ أنّ Chip هذا هو مكوّن أساسي. وتجدر الإشارة إلى أنّك ستحصل على علامة الاختيار عن طريق ضبط السمة 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. يتم عرض قوائم الحالات من الأعلى إلى الأسفل، مثل بيان الحالة. إذا لم يتطابق أي من الولايات، تنطبق الحالة التلقائية.

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

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

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

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

1. في حزمة search، افتح 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. داخل لامدا، قبل إرجاع chip مباشرةً، أضِف أداة معالجة النقر. عند النقر على chip، يتم ضبط حالته على checked. وعليك باستدعاء onFilterChanged() في viewModel، ما يؤدي إلى ظهور تسلسل من الأحداث يجلب النتيجة لهذا الفلتر.

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

9. في نهاية الحمل، أزِل جميع طرق العرض الحالية من 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 لفتح شاشة البحث لاستخدام الشرائح الجديدة. وعند النقر على كل شريحة، سيعرض التطبيق مجموعات الفلاتر التي تندرج تحتها.

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

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

الخطوة 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، اضبط android:supportsRtl="true".
• يمكنك معاينة تنسيق RTL في المحاكي ويمكنك استخدام لغتك للاطّلاع على تنسيقات الشاشة. على الجهاز أو المحاكي، افتح الإعدادات، وفي خيارات المطوّرين، اختَر فرض تنسيق RTL.
• استخدِم مراجع Start وEnd بدلاً من المراجع Left وRight.
• يمكنك إيقاف النسخ المطابق للقابلة للرسم من خلال حذف android:autoMirrored="true".
• اختَر Re &> Add RTL support when applicable ليتمكّن تطبيق "استوديو Android" من تنفيذ العمل نيابةً عنك.
• استخدِم مجلدات values-"language;language;quot; لتخزين الموارد بلغات معيّنة.

البحث عن أدوات تمكين الوصول

• في "متجر 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 القابلة للرسم
• أداة رسم 9 رموز تصحيح
• الرقائق
• ChipGroup
• المظهر الداكن
• تحديد الألوان
• أداة الألوان
• جعل الرسومات المتحركة قابلة للرسم

مراجع أخرى:

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

يسرد هذا القسم المهام الدراسية المحتملة للطلاب الذين يعملون من خلال هذا الدرس التطبيقي حول الترميز في إطار دورة تدريبية يُديرها معلِّم. يجب أن ينفِّذ المعلّم ما يلي:

• يمكنك تخصيص واجب منزلي إذا لزم الأمر.
• التواصل مع الطلاب بشأن كيفية إرسال الواجبات المنزلية
• وضع درجات للواجبات المنزلية.

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

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

السؤال 1

أي من الخيارات التالية إلزامي لإتاحة اللغات التي تُكتب من اليمين إلى اليسار؟

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

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

▢ الحرص على أن تستخدم كل الرموز android:autoMirrored="true"

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

السؤال 2

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

▢ TalkBack

▢ الماسح الضوئي لإمكانية الوصول

▢ في "استوديو Android" مع ReACTOR > أضِف دعم RTL متى أمكن

▢ لينت

السؤال 3

أيٌّ مما يلي غير صحيح بشأن الشرائح؟

▢ أنت تعرض شرائح كجزء من ChipGroup.

▢ يمكنك توفير قائمة بحالة الألوان للسمة ChipGroup.

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

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

السؤال 4

ما هو المظهر الذي يتيح لك استخدام الوضع الفاتح والوضع المُعتِم؟

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

السؤال 5

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

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

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

▢ المشاهدة التي تتيح بث الفيديو مباشرةً

▢ رسم متحرك قابل للرسم