‫Kotlin Android Fundamentals 10.3: עיצוב לכולם

ה-codelab הזה הוא חלק מהקורס Android Kotlin Fundamentals. כדי להפיק את המרב מהקורס הזה, מומלץ לעבוד על ה-codelabs לפי הסדר. כל ה-codelab של הקורס מפורטים בדף הנחיתה של ה-codelab בנושא יסודות Kotlin ל-Android.

שיעור ה-Lab הזה הוא חלק מסדרה שמסבירה את העקרונות הבסיסיים של עיצוב אפליקציות ל-Android ומנחה אתכם בתהליך של בניית אפליקציה שמאתרת מפגשים של קבוצות מפתחים של Google‏ (GDG). האפליקציה מציגה מידע על מפגשים קרובים בצורה יפה ונגישה.

מומלץ לבצע את שלושת ה-codelab בסדרה הזו לפי הסדר, כי הם מתקדמים במשימות שלב אחר שלב:

• ‫10.1 סגנונות ועיצובים
• ‫10.2 Material Design,‏ dimens וצבעים
• ‫10.3 עיצוב לכולם

מבוא

כדאי לפתח אפליקציה שמתאימה לשימוש של כמה שיותר משתמשים, בין אם אתם מפתחים אותה בשביל הכיף או למטרות עסקיות. יש כמה היבטים שצריך לקחת בחשבון כדי להשיג את המטרה הזו.

• תמיכה בשפות שנקראות מימין לשמאל. בשפות אירופאיות ובעוד שפות רבות אחרות קוראים משמאל לימין, ואפליקציות שמקורן באזורים האלה מתוכננות בדרך כלל כך שיתאימו לשפות האלה. שפות רבות אחרות עם מספר גדול של דוברים נכתבות מימין לשמאל, כמו ערבית. כדי להגדיל את הקהל הפוטנציאלי שלכם, כדאי לוודא שהאפליקציה תומכת בשפות שנקראות מימין לשמאל (RTL).
• סריקה לאיתור בעיות נגישות ניחוש לגבי חוויית המשתמש של מישהו אחר באפליקציה שלכם הוא אפשרות שיש בה חסרונות. אפליקציית Accessibility Scanner מנתחת את האפליקציה ומזהה נקודות שבהן אפשר לשפר את הנגישות שלה.
• עיצוב ל-TalkBack עם תיאורי תוכן. ליקויי ראייה נפוצים יותר ממה שאפשר לחשוב, והרבה משתמשים, לא רק עיוורים, משתמשים בקורא מסך. תיאורי תוכן הם ביטויים שקורא המסך אומר כשהמשתמש מקיים אינטראקציה עם רכיב במסך.
• תמיכה במצב לילה. למשתמשים רבים עם ליקויי ראייה, שינוי צבעי המסך משפר את הניגודיות ועוזר להם להשתמש באפליקציה שלכם. ב-Android קל לתמוך במצב לילה, ותמיד כדאי לתמוך במצב לילה כדי לספק למשתמשים חלופה פשוטה לצבעי המסך שמוגדרים כברירת מחדל.

ב-codelab הזה נסביר על כל אחת מהאפשרויות האלה ונוסיף תמיכה בהן לאפליקציית GDG Finder.

בנוסף, תלמדו איך להשתמש בצ'יפים באפליקציית Android. אתם יכולים להשתמש בצ'יפים כדי להפוך את האפליקציה למעניינת יותר, תוך שמירה על נגישות.

מה שכדאי לדעת

חשוב שתכירו את:

• איך ליצור אפליקציות עם פעילויות וקטעים, ואיך לנווט בין קטעים ולהעביר נתונים.
• שימוש בתצוגות ובקבוצות תצוגות כדי ליצור פריסה של ממשק משתמש, במיוחד RecyclerView.
• איך משתמשים ברכיבי ארכיטקטורה, כולל ViewModel, עם הארכיטקטורה המומלצת כדי ליצור אפליקציה יעילה ומובנית היטב.
• קישור נתונים, קורוטינות ואיך לטפל בקליקים בעכבר.
• איך מתחברים לאינטרנט ומאחסנים נתונים במטמון באופן מקומי באמצעות מסד נתונים של Room.
• איך מגדירים מאפייני תצוגה, ואיך מחלצים משאבים מקובצי משאבי XML ומשתמשים בהם.
• איך משתמשים בסגנונות ובעיצובים כדי להתאים אישית את המראה של האפליקציה.
• איך משתמשים ברכיבי Material, במשאבי מאפיינים ובצביעה בהתאמה אישית.

מה תלמדו

• איך להפוך את האפליקציה לשימושית למספר הגדול ביותר של משתמשים.
• איך לגרום לאפליקציה לפעול בשפות שמוצגות מימין לשמאל (RTL).
• איך מעריכים את הנגישות של האפליקציה.
• איך להשתמש בתיאורי תוכן כדי לשפר את הפעולה של האפליקציה עם קוראי מסך.
• איך משתמשים בצ'יפים.
• איך גורמים לאפליקציה לפעול במצב כהה.

הפעולות שתבצעו:

• הערכה והרחבה של אפליקציה נתונה כדי לשפר את הנגישות שלה, כך שהיא תפעל בשפות שמוצגות מימין לשמאל (RTL).
• סורקים את האפליקציה כדי לזהות נקודות שבהן אפשר לשפר את הנגישות.
• חשוב להשתמש בתיאורי תוכן לתמונות.
• איך משתמשים ב-drawables
• הוספת האפשרות להשתמש במצב לילה באפליקציה.

אפליקציית המתחילים GDG-finder מבוססת על כל מה שלמדתם עד עכשיו בקורס הזה.

האפליקציה משתמשת ב-ConstraintLayout כדי להציג שלושה מסכים. שניים מהמסכים הם רק קובצי פריסה שתשתמשו בהם כדי לבדוק צבעים וטקסט ב-Android.

במסך השלישי מוצג כלי לאיתור קבוצות GDG. קבוצות מפתחים של Google (GDG) הן קהילות של מפתחים שמתמקדות בטכנולוגיות של Google, כולל Android. קבוצות GDG ברחבי העולם מארחות מפגשים, כנסים, סדנאות לימוד ואירועים אחרים.

במהלך פיתוח האפליקציה הזו, אתם עובדים על הרשימה האמיתית של קהילות GDG. במסך החיפוש נעשה שימוש במיקום המכשיר כדי למיין את קבוצות GDG לפי מרחק.

אם יש לכם מזל ויש קבוצת GDG באזור שלכם, תוכלו להיכנס לאתר שלה ולהירשם לאירועים שלה. אירועי GDG הם דרך מצוינת לפגוש מפתחי Android אחרים וללמוד שיטות מומלצות בתעשייה שלא נכללו בקורס הזה.

בצילומי המסך שבהמשך מוצג איך האפליקציה תשתנה מתחילת ה-codelab ועד סופו.

ההבדל העיקרי בין שפות שמוצגות משמאל לימין (LTR) לבין שפות שמוצגות מימין לשמאל (RTL) הוא הכיוון של התוכן שמוצג. כשמשנים את כיוון ממשק המשתמש משמאל לימין לימין לשמאל (או להיפך), זה נקרא לעיתים קרובות שיקוף. ההיפוך משפיע על רוב המסך, כולל טקסט, סמלים של שדות טקסט, פריסות וסמלים עם כיוונים (כמו חצים). פריטים אחרים לא משתקפים, כמו מספרים (שעון, מספרי טלפון), סמלים שאין להם כיוון (מצב טיסה, Wi-Fi), אמצעי בקרה להפעלה ורוב התרשימים והגרפים.

יותר ממיליארד אנשים ברחבי העולם משתמשים בשפות שבהן הכיוון של הטקסט הוא מימין לשמאל. מפתחי Android נמצאים בכל העולם, ולכן אפליקציית GDG Finder צריכה לתמוך בשפות שנקראות מימין לשמאל.

שלב 1: מוסיפים תמיכה ב-RTL

בשלב הזה, גורמים לאפליקציית GDG Finder לפעול עם שפות שנקראות מימין לשמאל.

1. מורידים ומריצים את אפליקציית GDGFinderMaterial, שהיא אפליקציית המתחילים של ה-codelab הזה, או ממשיכים מהקוד הסופי של ה-codelab הקודם.
2. פותחים את קובץ Android Manifest.
3. בקטע <application>, מוסיפים את הקוד הבא כדי לציין שהאפליקציה תומכת ב-RTL.

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

4. פותחים את activity_main.xml בכרטיסייה Design.
5. בתפריט הנפתח Locale for Preview (לוקאל לתצוגה מקדימה), בוחרים באפשרות Preview Right to Left (תצוגה מקדימה מימין לשמאל). (אם התפריט הזה לא מופיע, צריך להרחיב את החלונית או לסגור את החלונית מאפיינים כדי שהוא יופיע).

כדאי לדעת: לא צריך להחליף שפות במכשיר כדי לבדוק איך האפליקציה מוצגת חזותית ב-RTL.

6. בתצוגה המקדימה Preview, אפשר לראות שהכותרת GDG Finder עברה לצד שמאל, ושאר המסך נשאר כמעט ללא שינוי. בסך הכול, המסך הזה סביר. אבל היישור בתצוגת הטקסט שגוי, כי הוא מיושר לשמאל במקום לימין.

7. כדי שהאפשרות הזו תפעל במכשיר, בהגדרות המכשיר או האמולטור , באפשרויות למפתחים, בוחרים באפשרות הפעלת פריסה מימין לשמאל. (אם צריך להפעיל את אפשרויות למפתחים, מוצאים את מספר ה-Build ולוחצים עליו עד שמופיעה הודעה שאתם מפתחים. האפשרויות משתנות בהתאם למכשיר ולגרסת מערכת Android).

8. מריצים את האפליקציה ומוודאים במכשיר שהמסך הראשי נראה כמו בתצוגה המקדימה. שימו לב שהלחצן הראשי לפעולה עבר לצד ימין, ותפריט ההמבורגר עבר לצד שמאל.
9. באפליקציה, פותחים את חלונית ההזזה לניווט ועוברים למסך חיפוש. כמו שרואים למטה, הסמלים עדיין בצד ימין, ולא רואים טקסט. מסתבר שהטקסט נמצא מחוץ למסך, משמאל לסמל. הסיבה לכך היא שהקוד משתמש בהפניות למסך ימין/שמאל במאפייני התצוגה ובאילוצי הפריסה.

שלב 2: שימוש ב-start וב-end במקום ב-left וב-right

הצדדים 'ימין' ו'שמאל' במסך (כשמסתכלים על המסך) לא משתנים, גם אם כיוון הטקסט משתנה. לדוגמה, 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. בודקים את רשימת קבוצות GDG בחלונית תצוגה מקדימה. שימו לב שהסמל עדיין מצביע לכיוון הלא נכון כי הוא משתקף (אם הסמל לא משתקף, ודאו שאתם עדיין צופים בתצוגה המקדימה מימין לשמאל). בהתאם להנחיות של Material Design, אסור להפוך סמלים.
5. פותחים את res/drawable/ic_gdg.xml.
6. בשורה הראשונה של קוד ה-XML, מחפשים את android:autoMirrored="true" ומוחקים אותו כדי להשבית את שיקוף המסך.
7. בודקים את התצוגה המקדימה או מריצים שוב את האפליקציה ופותחים את המסך 'חיפוש GDG'. הפריסה אמורה להיות תקינה עכשיו.

טיפ: ב-Android Studio יש טיפים עם הדגשה צהובה כדי לעודד את השימוש במאפייני ההתחלה והסיום.

משתמשים בחיפוש והחלפה עם התאמה לאותיות רישיות כדי למצוא את כל המקרים של Left ו-Right בפריסות ה-XML.

שלב 3: מאפשרים ל-Android Studio לעשות את העבודה בשבילכם

בתרגיל הקודם התחלתם ללמוד איך לתמוך בשפות שנקראות מימין לשמאל (RTL). למזלכם, Android Studio יכול לסרוק את האפליקציה ולהגדיר בשבילכם הרבה דברים בסיסיים.

1. ב-list_item.xml, ב-TextView, משנים את layout_marginStart בחזרה ל-layout_marginLeft, כדי שיהיה לסורק משהו למצוא.

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

2. ב-Android Studio, בוחרים באפשרות Refactor > Add RTL support where possible (שינוי מבנה > הוספת תמיכה ב-RTL איפה שאפשר) ומסמנים את התיבות כדי לעדכן את המניפסט ואת קובצי הפריסה לשימוש במאפייני התחלה וסיום.

3. בחלונית Refactoring Preview (תצוגה מקדימה של שינוי מבנה הקוד), מחפשים את התיקייה app (אפליקציה) ומרחיבים אותה עד שכל הפרטים מוצגים.
4. בתיקיית האפליקציה, אפשר לראות שקובץ layout_marginLeft ששיניתם מופיע כקוד שצריך לבצע בו רפקטורינג.

5. שימו לב שבתצוגה המקדימה מופיעים גם קבצי מערכת וקבצים מהספרייה. לוחצים לחיצה ימנית על layout ועל layout-watch-v20 ועל כל תיקייה אחרת שלא שייכת ל-app, ובוחרים באפשרות Exclude בתפריט ההקשר.

6. אפשר לבצע את השינוי עכשיו. (אם מופיע חלון קופץ לגבי קבצי מערכת, מוודאים שהחרגתם את כל התיקיות שלא שייכות לקוד האפליקציה).

7. שימו לב שערך המאפיין layout_marginLeft השתנה חזרה ל-layout_marginStart.

הערה: כדי שחלק מהרכיבים של View יפעלו בצורה תקינה עם כתיבה מימין לשמאל, צריך לבצע בהם התאמה אישית נוספת. כדי לקבל שליטה מדויקת יותר בממשק המשתמש, אפשר להשתמש ב-4 ממשקי API שונים:

• ‫android:layoutDirection כדי להגדיר את כיוון הפריסה של רכיב.
• ‫android:textDirection כדי להגדיר את הכיוון של הטקסט ברכיב.
• ‫android:textAlignment כדי להגדיר את יישור הטקסט של רכיב.
• ‫getLayoutDirectionFromLocale() היא שיטה לקבלת הלוקאל שקובע את הכיוון באופן פרוגרמטי.

שלב 3: עיון בתיקיות של הלוקאלים

עד עכשיו שיניתם רק את הכיוון של שפת ברירת המחדל שמשמשת באפליקציה. באפליקציה שמוכנה להפצה, צריך לשלוח את הקובץ strings.xml למתרגם כדי שיתרגם אותו לשפה חדשה. ב-codelab הזה, האפליקציה מספקת קובץ strings.xml בספרדית (השתמשנו ב-Google Translate כדי ליצור את התרגומים, אז הם לא מושלמים).

1. ב-Android Studio, מחליפים את תצוגת הפרויקט לProject Files (קבצי פרויקט).
2. מרחיבים את התיקייה res ורואים תיקיות בשמות res/values ו-res/values-es. המחרוזת 'es' בשם התיקייה היא קוד השפה לספרדית. תיקיות values-"language code" מכילות ערכים לכל שפה נתמכת. התיקייה values ללא סיומת מכילה את משאבי ברירת המחדל שחלים אחרת.

3. בתיקייה values-es, פותחים את הקובץ strings.xml ורואים שכל המחרוזות הן בספרדית.
4. ב-Android Studio, פותחים את activity_main.xml בכרטיסייה עיצוב.
5. בתפריט הנפתח Locale for Preview (לוקאל לתצוגה מקדימה), בוחרים באפשרות Spanish (ספרדית). הטקסט אמור להיות עכשיו בספרדית.

6. [אופציונלי] אם אתם שולטים בשפה שקוראים מימין לשמאל, אתם יכולים ליצור תיקייה בשם values וקובץ בשם strings.xml בשפה הזו, ולבדוק איך הם מוצגים במכשיר.
7. [אופציונלי] משנים את הגדרות השפה במכשיר ומפעילים את האפליקציה. חשוב לא לשנות את השפה במכשיר לשפה שאתם לא קוראים, כי יהיה קשה לבטל את השינוי.

במשימה הקודמת, שיניתם את האפליקציה באופן ידני ואז השתמשתם ב-Android Studio כדי לבדוק אם יש שיפורים נוספים שאפשר לבצע ב-RTL.

אפליקציית Accessibility Scanner היא הכלי הכי טוב שיעזור לכם להפוך את האפליקציה לנגישה. היא סורקת את האפליקציה במכשיר היעד ומציעה שיפורים, כמו הגדלת אזורי המגע, הגברת הניגודיות ומתן תיאורים לתמונות, כדי להפוך את האפליקציה לנגישה יותר. אפליקציית Accessibility Scanner נוצרה על ידי Google, ואפשר להתקין אותה מחנות Play.

שלב 1: התקנה והפעלה של Accessibility Scanner

1. פותחים את חנות Play ונכנסים לחשבון אם צריך. אפשר לעשות את זה במכשיר הפיזי או באמולטור. ב-codelab הזה נעשה שימוש באמולטור.
   

הערה: אם אין לכם את חנות Play באמולטור, יכול להיות שתצטרכו ליצור אמולטור חדש. כשיוצרים את האמולטור, חשוב לבחור באפשרות שבה סמל Play Store מופעל.

חשוב: כדי להשתמש בחנות Play מהאמולטור, צריך להתחבר לחשבון. אתם יכולים להשתמש בחשבון הרגיל שלכם או ליצור חשבון רק לצורך בדיקה באמצעות האמולטור. כל חשבון שתיצרו הוא אמיתי, ואתם מתחברים ל-Play Services האמיתי, ולא לגרסה מדומה שלו.

חשוב: אתם יכולים לדלג על הגדרת אפשרויות החיוב.

2. מחפשים את Accessibility Scanner by Google LLC בחנות Play. חשוב לוודא שאתם מורידים את האפליקציה הנכונה, שפותחה על ידי Google, כי כל סריקה דורשת הרבה הרשאות.

3. מתקינים את הסורק באמולטור.
4. אחרי ההתקנה, לוחצים על פתיחה.
5. לוחצים על שנתחיל?.
6. לוחצים על אישור כדי להתחיל בהגדרת Accessibility Scanner בהגדרות.

7. לוחצים על Accessibility Scanner כדי לעבור להגדרות הנגישות במכשיר.

8. לוחצים על Use service (שימוש בשירות) כדי להפעיל אותו.

9. פועלים לפי ההוראות במסך ומעניקים את כל ההרשאות.
10. אחר כך לוחצים על אישור וחוזרים למסך הבית. יכול להיות שיופיע כפתור כחול עם סימן וי איפשהו במסך. לחיצה על הלחצן הזה מפעילה בדיקה של האפליקציה בחזית. כדי לשנות את המיקום של הלחצן, פשוט גוררים אותו. הלחצן הזה מוצג מעל כל האפליקציות, כך שאפשר להפעיל את הבדיקה בכל שלב.

כדי להשבית את הסורק, עוברים אל הגדרות ומשביתים את Accessibility Scanner.

11. פותחים או מפעילים את האפליקציה.
12. לוחצים על הלחצן הכחול ומאשרים אזהרות אבטחה והרשאות נוספות.

בפעם הראשונה שלוחצים על הסמל של סורק הנגישות, האפליקציה מבקשת הרשאה לגשת לכל מה שמוצג במסך. זו נראית כמו הרשאה מפחידה מאוד, וזה נכון.

כמעט אף פעם לא כדאי להעניק הרשאה כזו, כי היא מאפשרת לאפליקציות לקרוא את האימייל שלכם או אפילו לגשת לפרטי חשבון הבנק שלכם. עם זאת, כדי שאפליקציית Accessibility Scanner תוכל לבצע את העבודה שלה, היא צריכה לבדוק את האפליקציה כמו שמשתמש בודק אותה – ולכן היא זקוקה להרשאה הזו.

חשוב: לפני שמפעילים את ההרשאה הזו, צריך לוודא שהאפליקציה שהתקנתם היא Accessibility Scanner של Google LLC.

13. לוחצים על הלחצן הכחול ומחכים לסיום הניתוח. יוצג מסך כמו בצילום המסך שלמטה, עם הכותרת והלחצן הצף שמסומנים בתיבה אדומה. המספר הזה מציין שיש שתי הצעות לשיפור הנגישות במסך הזה.

14. לוחצים על התיבה שמסביב ל-GDG Finder. ייפתח חלונית עם מידע נוסף, כמו שמוצג למטה, שבו מצוינות בעיות בניגודיות של התמונה.
15. מרחיבים את המידע על ניגודיות התמונה והכלי מציע פתרונות.
16. לוחצים על החצים שמשמאל כדי לקבל מידע על הפריט הבא.

17. באפליקציה, עוברים למסך Apply for GDG וסורקים אותו באמצעות אפליקציית Accessibility Scanner. האפליקציה תציג הרבה הצעות, כמו שמוצג בצד שמאל למטה. 12, ליתר דיוק. כדי להיות הוגנים, חלק מהפריטים האלה הם כפילויות של פריטים דומים.
18. לוחצים על סמל הערימה בסרגל הכלים התחתון כדי לראות רשימה של כל ההצעות, כמו שמוצג בצילום המסך משמאל. ב-codelab הזה נסביר איך לפתור את כל הבעיות האלה.

‫Android Accessibility Suite, אוסף של אפליקציות מבית Google, כולל כלים שעוזרים להפוך אפליקציות לנגישות יותר. הוא כולל כלים כמו TalkBack. ‫TalkBack הוא קורא מסך שמציע משוב קולי, משוב באמצעות רטט ומשוב קולי, ומאפשר למשתמשים לנווט ולצרוך תוכן במכשירים שלהם בלי להשתמש בעיניים.

מתברר ש-TalkBack לא משמש רק עיוורים, אלא גם אנשים רבים עם ליקויי ראייה מסוגים שונים. או אפילו אנשים שרק רוצים לעצום את העיניים!

לכן, נגישות היא לכולם! במשימה הזו תנסו את TalkBack ותעדכנו את האפליקציה כך שתפעל איתו בצורה טובה.

שלב 1: התקנה והפעלה של חבילת הנגישות

‫TalkBack מותקן מראש במכשירים פיזיים רבים, אבל באמולטור צריך להתקין אותו.

1. פותחים את חנות Play.
2. מחפשים את חבילת הנגישות. חשוב לוודא שזו האפליקציה הנכונה של Google.
3. אם הוא לא מותקן, מתקינים את חבילת הנגישות.
4. כדי להפעיל את TalkBack במכשיר, עוברים אל הגדרות > נגישות ומפעילים את TalkBack על ידי בחירה באפשרות שימוש בשירות. בדומה ל-Accessibility Scanner, גם ל-TalkBack נדרשות הרשאות כדי לקרוא את התוכן במסך. אחרי שתאשרו את בקשות ההרשאה, TalkBack יציג לכם רשימה של הדרכות שיעזרו לכם להשתמש ב-TalkBack בצורה יעילה.
5. כדאי לעצור כאן ולעבור על המדריכים, גם אם רק כדי ללמוד איך להשבית את TalkBack כשמסיימים.
6. כדי לצאת מההדרכה, לוחצים על לחצן החזרה כדי לבחור אותו, ואז לוחצים לחיצה כפולה במקום כלשהו במסך.

טיפ: אם אתם לא שומעים כלום, כדאי להגביר את עוצמת הקול.

טיפ: כדי ללחוץ על פריט, מקישים עליו הקשה כפולה. כדי לגלול או לגרור, מקישים הקשה כפולה וגוררים.

7. אפשר ללמוד איך משתמשים באפליקציית GDG Finder עם TalkBack. שימו לב למקומות שבהם TalkBack לא מספק מידע שימושי על המסך או על אמצעי בקרה. תתקנו את זה בתרגיל הבא.

שלב 2: מוסיפים תיאור תוכן

מתארי תוכן הם תוויות תיאוריות שמסבירות את המשמעות של הצפיות. לרוב הסרטונים שלכם צריכים להיות תיאורי תוכן.

1. כשאפליקציית GDG Finder פועלת ו-TalkBack מופעל, עוברים למסך Apply to run GDG.
2. מקישים על התמונה הראשית ... ולא קורה כלום.
3. פותחים את add_gdg_fragment.xml.
4. במאפיין ImageView, מוסיפים מאפיין של תיאור תוכן כמו בדוגמה שלמטה. המחרוזת stage_image_description מסופקת לכם בקובץ strings.xml.

android:contentDescription="@string/stage_image_description"

5. מפעילים את האפליקציה.
6. מנווטים אל Apply to run GDG (הגשת בקשה להפעלת קבוצת 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 מופעל, וממלאים את הטופס כדי להגיש בקשה להפעלת קבוצת GDG.

שלב 4: יצירת קבוצת תוכן

כדי ש-TalkBack יתייחס לרכיבי בקרה בממשק המשתמש כאל קבוצה, אפשר להשתמש בקיבוץ תוכן. תוכן קשור שמקובץ יחד, מוכרז יחד. כך משתמשים בטכנולוגיה מסייעת לא צריכים להחליק, לסרוק או לחכות לעיתים קרובות כדי לגלות את כל המידע במסך. ההגדרה הזו לא משפיעה על האופן שבו אמצעי הבקרה מופיעים במסך.

כדי לקבץ רכיבי ממשק משתמש, עוטפים אותם ב-ViewGroup, כמו LinearLayout. באפליקציית GDG Finder, הרכיבים labelTextWhy ו-editTextWhy הם מועמדים מצוינים לקיבוץ כי הם שייכים יחד מבחינה סמנטית.

1. פותחים את add_gdg_fragment.xml.
2. כדי ליצור קבוצת תוכן, מקיפים את LabelTextWhy ואת EditTextWhy בתגי LinearLayout. מעתיקים ומדביקים את הקוד שבהמשך. ה-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. בוחרים באפשרות Code > Reformat code כדי להוסיף כניסה לכל הקוד בצורה נכונה.
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. מריצים את האפליקציה ומעיינים במסך Apply to run GDG באמצעות TalkBack.

שלב 5: הוספת אזור פעיל

כרגע, התווית על לחצן השליחה היא אישור. עדיף שהלחצן יכלול תווית ותיאור תוכן אחדים לפני שליחת הטופס, ושהתווית ותיאור התוכן ישתנו באופן דינמי לתווית ולתיאור תוכן אחרים אחרי שהמשתמש ילחץ על הלחצן וישלח את הטופס. אפשר לעשות את זה באמצעות אזור בשידור חי.

אזור פעיל מציין לשירותי הנגישות אם המשתמש צריך לקבל הודעה כשמשתנה תצוגה. לדוגמה, אם מודיעים למשתמש על סיסמה שגויה או על שגיאת רשת, האפליקציה נגישה יותר. בדוגמה הזו, כדי לפשט את העניין, מודיעים למשתמש כשמצב לחצן השליחה משתנה.

1. פותחים את add_gdg_fragment.xml.
2. משנים את הטקסט של הלחצן לשליחה באמצעות משאב המחרוזת submit שסופק.

android:text="@string/submit"

3. מוסיפים אזור פעיל ללחצן על ידי הגדרת המאפיין android:accessibilityLiveRegion. כשמקלידים, מוצגות כמה אפשרויות לערך המאפיין. בהתאם לחשיבות השינוי, אתם יכולים לבחור אם להפריע למשתמש. אם הערך הוא assertive, שירותי הנגישות יקטעו את הדיבור כדי להודיע באופן מיידי על שינויים בתצוגה. אם מגדירים את הערך כ-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, שמכילה את כל הלוגיקה של הפריסה והציור. הלוגיקה הנוספת קיימת כדי לתמוך בניווט באמצעות מגע, עכבר, מקלדת ונגישות. הצ'יפ הראשי וסמל הסגירה נחשבים לתצוגות משנה לוגיות נפרדות, והם מכילים את התנהגות הניווט והמצב שלהם.

צ'יפים משתמשים בפריטים שניתנים לציור. רכיבי drawable ב-Android מאפשרים לכם לשרטט תמונות, צורות והנפשות על המסך, והם יכולים להיות בגודל קבוע או בגודל דינמי. אפשר להשתמש בתמונות כמשאבים שניתן לצייר, כמו התמונות באפליקציית GDG. אפשר גם להשתמש בציורים וקטוריים כדי לצייר כל דבר שרוצים. יש גם רכיב ציור שניתן לשינוי גודל שנקרא 9-patch drawable, שלא נכלל ב-Codelab הזה. הלוגו של GDG, ב-drawable/ic_gdg.xml, הוא עוד drawable.

‫Drawables הם לא תצוגות, ולכן אי אפשר להציב drawable ישירות בתוך ConstraintLayout, צריך להציב אותו בתוך ImageView. אפשר גם להשתמש ב-drawables כדי לספק רקע לתצוגת טקסט או ללחצן, והרקע מצויר מאחורי הטקסט.

שלב 1: מוסיפים צ'יפים לרשימת קהילות GDG

הצ'יפ המסומן שלמטה משתמש בשלושה רכיבי drawable. הרכיב drawable של הרקע ושל סימן הווי. כשנוגעים בצ'יפ נוצר אפקט אדווה, שנוצר באמצעות 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. בתיקייה layout, יוצרים קובץ חדש של משאב פריסה בשם region.xml, כדי להגדיר את הפריסה של Chip אחד.
4. ב-region.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 יוצרת רשימה של צ'יפים שבהם מוצגים אזורים שיש בהם קהילות GDG. כשבוחרים צ'יפ, האפליקציה מסננת את התוצאות ומציגה רק תוצאות של GDG באזור הזה.

הערה: תהליך היצירה של הרשימה הזו והסינון של התוצאות לא מתואר ב-codelab הזה. כדי להבין איך מתקבלת רשימת קבוצות GDG ואיך מיושם הסינון, אפשר לבדוק את הקבצים בחבילות search ו-network. חשוב במיוחד לבדוק את 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(), מתחת לבדיקת הערך null, מקצים את binding.regionList למשתנה חדש שנקרא chipGroup כדי לשמור במטמון את regionList.

val chipGroup = binding.regionList

4. למטה, תצור layoutInflator חדש לניפוח צ'יפסים מchipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

5. כדי להיפטר משגיאת קישור הנתונים, צריך לנקות את הפרויקט ולבנות אותו מחדש.

מתחת ל-inflator, אפשר ליצור עכשיו את הצ'יפים בפועל, אחד לכל אזור ב-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, מוסיפים click listener. כשלוחצים על 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)
}

ה-Observer המלא שלכם צריך להיראות כך:

   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: הפעלת מצב לילה

כדי לספק עיצוב כהה לאפליקציה, צריך לשנות את העיצוב שלה מ לעיצוב שנקרא .LightDayNight העיצוב 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. עוברים לתצוגה Project Files (קבצי פרויקט) כדי לראות רשימה של כל התיקיות בפרויקט.
4. מאתרים את התיקייה res ומרחיבים אותה.
5. יוצרים תיקיית משאבים res/values-night.
6. מוסיפים את הקובץ החדש colors.xml לתיקיית המשאבים res/values-night.
7. מריצים את האפליקציה, כשמצב הלילה עדיין מופעל, והאפליקציה אמורה להשתמש בצבעים החדשים שהגדרתם עבור res/values-night. שימו לב שהצבע המשני החדש מופיע בצ'יפים.

פרויקט Android Studio: ‏ GDGFinderFinal.

תמיכה בשפות שכותבים מימין לשמאל

• במניפסט של Android, מגדירים את android:supportsRtl="true".
• אתם יכולים לראות תצוגה מקדימה של כיוון כתיבה מימין לשמאל באמולטור, ולהשתמש בשפה שלכם כדי לבדוק את פריסות המסך. במכשיר או באמולטור, פותחים את ההגדרות, ובאפשרויות למפתחים בוחרים באפשרות הפעלת פריסה מימין לשמאל.
• החלפת ההפניות אל Left ואל Right בהפניות אל Start ואל End.
• כדי להשבית את השיקוף של רכיבי drawable, מוחקים את android:autoMirrored="true".
• כדי ש-Android Studio יעשה את העבודה בשבילכם, בוחרים באפשרות Refactor > Add RTL support where possible (שינוי מבנה > הוספת תמיכה ב-RTL איפה שאפשר).
• כדי לאחסן משאבים ספציפיים לשפה, משתמשים בתיקיות values-"language code".

סריקה לנגישות

• בחנות 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" />
• כדי לקשר את הצ'יפים לנתונים פעילים, מוסיפים משקיף לנתונים במודל התצוגה.
• כדי להציג את הצ'יפים, יוצרים Inflator לקבוצת הצ'יפים:
  LayoutInflater.from(chipGroup.context)
• יוצרים את הצ'יפים, מוסיפים מאזין קליקים שמפעיל את הפעולה הרצויה ומוסיפים את הצ'יפים לקבוצת הצ'יפים.

תמיכה במצב כהה

• משתמשים ב-DayNight AppTheme כדי לתמוך במצב כהה.
• אפשר להגדיר את המצב הכהה באופן פרוגרמטי:
  AppCompatDelegate.setDefaultNightMode()
• יוצרים תיקיית משאבים בשם res/values-night כדי לספק צבעים וערכים בהתאמה אישית למצב כהה.

מסמכי תיעוד למפתחי Android:

• ‫LayoutDirection (RTL)
• דו-כיווניות
• תחילת העבודה עם אפליקציית Accessibility Scanner
• TalkBack
• תנועות ב-TalkBack
• מסמכי סקירה כללית בנושא Drawables
• תוויות לתיאור התוכן
• קיבוץ תוכן
• אזורים פעילים
• נכסי NinePatch
• כלי לשרטוט של 9-patch
• Chips
• ChipGroup
• עיצוב כהה
• ערכות נושא עם צבעים
• הכלי לבחירת צבעים
• הנפשת גרפיקה מסוג drawable

מקורות מידע נוספים:

• פיתוח אפליקציות ל-Android באמצעות Kotlin (קורס ב-Udacity)
• ‫Kotlin Bootcamp for Programmers (קורס ב-Udacity)
• סדנאות תכנות של Kotlin Bootcamp for Programmers

בקטע הזה מפורטות אפשרויות למשימות ביתיות לתלמידים שעובדים על ה-Codelab הזה כחלק מקורס בהנחיית מדריך. המורה צריך:

• אם צריך, מקצים שיעורי בית.
• להסביר לתלמידים איך להגיש מטלות.
• בודקים את שיעורי הבית.

אנשי ההוראה יכולים להשתמש בהצעות האלה כמה שרוצים, ומומלץ להם להקצות כל שיעורי בית אחרים שהם חושבים שמתאימים.

אם אתם עובדים על ה-codelab הזה לבד, אתם יכולים להשתמש במשימות האלה כדי לבדוק את הידע שלכם.

שאלה 1

איזו מהאפשרויות הבאות היא חובה לתמיכה בשפות שנקראות מימין לשמאל?

‫▢ החלפת Left ו-Right בנכסים ב-Start ו-End

‫▢ מעבר לשפה שמוצגת מימין לשמאל (RTL)

‫▢ מוודאים שכל הסמלים משתמשים ב-android:autoMirrored="true"

‫▢ אספקת תיאורי תוכן

שאלה 2

איזה מכשיר נגישות מהרשימה הבאה מובנה ברוב מכשירי Android?

‫▢ TalkBack

‫▢ Accessibility Scanner

‫▢ ב-Android Studio, בוחרים באפשרות Refactor > Add RTL support where possible (שינוי מבנה > הוספת תמיכה ב-RTL איפה שאפשר)

‫▢ Lint

שאלה 3

איזו מההצהרות הבאות לא נכונה לגבי צ'יפס?

‫▢ הצגת צ'יפים כחלק מChipGroup.

‫▢ אפשר לספק רשימה של מצבי צבע עבור ChipGroup.

‫▢ צ'יפים הם רכיבים קומפקטיים שמייצגים קלט, מאפיין או פעולה.

‫▢ אם האפליקציה משתמשת בצ'יפים, חובה להפעיל את DarkTheme.

שאלה 4

איזה עיצוב מספק סגנונות למצב כהה ולמצב בהיר?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

שאלה 5

מהו אזור פעיל?

‫▢ צומת שמכיל מידע שחשוב למשתמש

‫▢ אזור במסך שמשנה את הצורה שלו בהתאם להנחיות של Material

‫▢ תצוגה שמאפשרת הפעלת סטרימינג של וידאו

‫▢ פריט גרפי מונפש שניתן לשרטוט