Kotlin Android Fundamentals 10.3: עיצוב שמתאים לכולם

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

מבוא

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

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

במעבדה זו, תוכלו לסקור כל אחת מהאפשרויות האלה ולהוסיף תמיכה לאפליקציית GDG Finder.

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

דברים שחשוב לדעת

כדאי שתכירו את:

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

מה תלמדו

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

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

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

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

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

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

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

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

בצילומי המסך שבהמשך אפשר לראות איך האפליקציה תשתנה מההתחלה ועד הסוף של קוד ה-Lab הזה.

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

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

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

בשלב זה צריך לוודא שהאפליקציה GDG Finder פועלת בשפות RTL.

  1. מורידים ומפעילים את האפליקציה GDGFinderMaterial, שהיא האפליקציה למתחילים במעבד הקוד הזה או ממשיכים מהקוד הסופי של קוד הקוד הקודם.
  2. פותחים את קובץ המניפסט של Android.
  3. בקטע <application>, מוסיפים את הקוד הבא כדי לציין שהאפליקציה תומכת ב-RTL.
<application
        ...
        android:supportsRtl="true">
  1. פותחים את activity_main.xml בכרטיסייה עיצוב.
  2. בתפריט הנפתח לוקאל לתצוגה מקדימה, בוחרים באפשרות תצוגה מקדימה מימין לשמאל. (אם לא מוצאים את התפריט הזה, מרחיבים את החלונית או סוגרים את החלונית מאפיינים כדי להציג אותה).

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

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

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

שלב 2: שימוש בהתחלה ובסוף במקום משמאל וימינה

"left" and "right" במסך (כש מול המסך) אין שינוי, גם אם כיוון הטקסט משתנה. לדוגמה, השדה layout_constraintLeft_toLeftOf תמיד מגביל את הצד השמאלי של הרכיב לצד השמאלי של המסך. במקרה של האפליקציה שלך, הטקסט נמצא מחוץ למסך בשפות הנכתבות מימין לשמאל, כפי שמוצג בצילום המסך שלמעלה.

כדי לתקן את הבעיה הזו, במקום &"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"
  1. יש להחליף את layout_marginLeft&ImageView ב-layout_marginStart. פעולה זו תזיז את השוליים למקום הנכון כדי להזיז את הסמל מהקצה של המסך.
<ImageView
android:layout_marginStart="
?
  1. פתיחת fragment_gdg_list.xml בודקים את רשימת ה-GDGs בחלונית תצוגה מקדימה. שים לב שהסמל עדיין פונה לכיוון הלא נכון מפני שהוא משקף (אם הסמל לא משתקף, ודא שאתה עדיין צופה בתצוגה המקדימה מימין לשמאל). בהתאם להנחיות של עיצוב חדשני תלת-ממדי, אין לשקף סמלים.
  2. פותחים את res/drawable/ic_gdg.xml.
  3. בשורה הראשונה של קוד ה-XML, מאתרים את android:autoMirrored="true" ומוחקים אותה כדי להשבית את השיקוף.
  4. צריך לבדוק את התצוגה המקדימה או להפעיל שוב את האפליקציה ולפתוח את מסך חיפוש ה-GDG. יש לתקן את הפריסה עכשיו!

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

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

  1. ב-list_item.xml, ב-TextView, משנים את layout_marginStart בחזרה ל-layout_marginLeft כדי שלסורק יהיה מה למצוא.
<TextView
android:layout_marginLeft="@dimen/spacing_normal"
  1. ב-Android Studio, בוחרים Reגורמי > מוסיפים תמיכה ב-RTL כשאפשר, ומסמנים את התיבות לעדכון המניפסט, ואת קובצי הפריסה שמשתמשים בנכסי התחלה וסיום.

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

  1. שימו לב שהתצוגה המקדימה גם מפרטת קובצי מערכת וספרייה. לוחצים לחיצה ימנית על פריסה ועל ayout-watch-v20 ועל תיקיות אחרות שאינן חלק מאפליקציה, ובוחרים באפשרות החרגה מתפריט ההקשר.

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

שלב 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 ללא תוסף מכילה את משאבי ברירת המחדל החלים בדרך אחרת.

  1. ב-values-es, פותחים את strings.xml ושימו לב שכל המחרוזות הן בספרדית.
  2. ב-Android Studio, פותחים את activity_main.xml בכרטיסייה Design.
  3. בתפריט הנפתח לוקאל לתצוגה מקדימה בוחרים ספרדית. עכשיו הטקסט צריך להיות בספרדית.

  1. [אופציונלי] אם אתם בקיאים בשפת RTL, עליכם ליצור תיקייה values (ערכים) ו-strings.xml בשפה הזו ולבדוק איך היא מופיעה במכשיר.
  2. [אופציונלי] עליך לשנות את הגדרות השפה במכשיר ולהפעיל את האפליקציה. חשוב להקפיד לא לשנות את השפה לשפה שלא קראת, כי קשה לבטל את הפעולה!

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

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

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

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

  1. מתקינים את הסורק באמולטור.
  2. בסיום ההתקנה, לוחצים על פתיחה.
  3. לוחצים על Get Started.
  4. לוחצים על אישור כדי להתחיל בהגדרה של סורק הנגישות בהגדרות.

  1. לוחצים על סורק הנגישות כדי לעבור להגדרות הנגישות של המכשיר.

  1. כדי להפעיל אותו, לוחצים על שימוש בשירות.

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

  1. פותחים את האפליקציה או מפעילים אותה.
  2. לוחצים על הלחצן הכחול ומאשרים אזהרות והרשאות נוספות.

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

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

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

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

  1. באפליקציה שלכם, מנווטים למסך Apply for GDG וסורקים אותו באמצעות אפליקציית סורק הנגישות. כך מוצגות מספר הצעות, כפי שמוצג משמאל. 12, ליתר דיוק. כדי להיות הוגנים, חלק מהם הם עותקים כפולים של פריטים דומים.
  2. יש ללחוץ על הסמל "stack" בסרגל הכלים התחתון כדי לקבל רשימה של כל ההצעות, כמוצג בצילום המסך הימני. תטפלו בכל הבעיות האלה במעבדה זו של הקוד.

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

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

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

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

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

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

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

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

  1. כשאפליקציית GDG Finder פועלת ו-Talback מופעל, עוברים למסך אישור להפעלת GDG.
  2. יש להקיש על התמונה הראשית ... ושום דבר לא קורה.
  3. פותחים את add_gdg_snippet.xml.
  4. בImageView, יש להוסיף מאפיין של תיאור תוכן כפי שמוצג למטה. המחרוזת stage_image_description ניתנת עבורך ב-strings.xml.
android:contentDescription="@string/stage_image_description"
  1. מפעילים את האפליקציה.
  2. עוברים אל Apply to Run GDG (אישור כדי להריץ את GDG) ולוחצים על התמונה. עכשיו אתם אמורים לשמוע תיאור קצר של התמונה.
  3. [אופציונלי] יש להוסיף תיאורי תוכן לתמונות האחרות באפליקציה הזו. באפליקציית ייצור, כל התמונות צריכות לכלול תיאורי תוכן.

שלב 3: הוספת רמזים לשדות טקסט שניתן לערוך

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

  1. עדיין נמצא ב-add_gdg_snippet.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"
  1. יש להוסיף תיאור תוכן ל-labelTextWhy.
android:contentDescription="@string/motivation" 
  1. יש להוסיף רמז אל EditTextWhy. לאחר תיוג תיבות העריכה, יש להוסיף תיאור תיאור של התווית וגם רמז לתיבה.
android:hint="@string/enter_motivation"
  1. להוסיף תיאור תוכן עבור לחצן השליחה. כל הלחצנים צריכים לכלול תיאור של מה שקורה אם לוחצים עליהם.
android:contentDescription="@string/submit_button_description"
  1. הפעלת האפליקציה Talback מופעלת, ומילוי הטופס להגשת בקשה להפעלת GDG.

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

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

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

  1. פותחים את add_gdg_snippet.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/>
  1. בוחרים באפשרות Code > Format code (קוד מפורמט) כדי לפרמט בצורה נכונה את כל הקוד.
  2. יש להסיר את כל שולי הפריסה מ-labelTextWhy ומ-editTextWhy.
  3. ב-labelTextWhy, משנים את האילוץ layout_constraintTop_toTopOf ל-contentGroup.
app:layout_constraintTop_toTopOf="@+id/contentGroup" />
  1. ב-editTextWhy צריך לשנות את האילוץ layout_constraintBottom_toBottomOf לערך contentGroup.
app:layout_constraintBottom_toBottomOf="@+id/contentGroup"
  1. יש להגביל את EditTextRegion ואת Button ל-contentGroup כדי לתקן את השגיאות.
app:layout_constraintBottom_toTopOf="@+id/contentGroup"
  1. הוספת שוליים לLinearLayout. אפשר לחלץ את השוליים האלה כמאפיין.
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

אם נדרשת עזרה, אפשר לבדוק את הקוד שלך מול add_gdg_fragment.xml בקוד הפתרון.

  1. מריצים את האפליקציה ומעיינים במסך החלה כדי להריץ GDG עם TalkBack.

שלב 5: מוסיפים אזור פעיל

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

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

  1. פותחים את add_gdg_snippet.xml.
  2. משנים את הקצאת הטקסט של הלחצן לשליחה באמצעות משאב המחרוזת submit שזמין.
android:text="@string/submit"
  1. מוסיפים את האזור הפעיל ללחצן על ידי הגדרת המאפיין android:accessibilityLiveRegion. תוך כדי הקלדה, יש כמה אפשרויות להגדרת הערך שלו. בהתאם לחשיבות השינוי, ניתן לבחור אם להפריע למשתמש. מאחר שהערך '&ser; &assertive' , שירותי הנגישות מפריעים לדיבור המתמשך כדי להודיע מיד על שינויים בתצוגה המפורטת הזו. אם תגדירו את הערך כ-"none", לא יוכרו שינויים. מוגדר ל-"פוליט&&;, שירותי הנגישות מכריזים על שינויים, אבל ממתינים בתורם. מגדירים את הערך כ-"polite".

android:accessibilityLiveRegion="polite"
  1. בחבילה add, פותחים את AddGdgFragment.kt.
  2. בתוך ה-showSnackBarEvent Observer, אחרי שמסיימים להציג את ה-SnackBar, צריך להגדיר תיאור תוכן וטקסט חדש ללחצן.
binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)
  1. מפעילים את האפליקציה ולוחצים על הלחצן. לצערנו, הלחצן והגופן קטנים מדי!

שלב 6: תיקון סגנון הלחצן

  1. ב-add_gdg_snippet.xml, צריך לשנות את ה-width של הלחצן ו-height ל-wrap_content, כך שהתווית המלאה תהיה גלויה והלחצן יהיה בגודל טוב.
android:layout_width="wrap_content"
android:layout_height="wrap_content"
  1. יש למחוק את המאפיינים backgroundTint, textColor ו-textSize מהלחצן כדי שהאפליקציה תשתמש בסגנון העיצוב טוב יותר.
  2. מחיקת המאפיין textColor מ-textViewIntro. צבעי העיצוב צריכים ליצור ניגודיות טובה.
  3. מריצים את האפליקציה. שימו לב ללחצן שליחה שהוא שימושי יותר. לוחצים על שליחה ומשנים את הסטטוס לסיום.

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

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

צ'יפים משתמשים ברישומים. שרטוטי Android מאפשרים לצייר תמונות, צורות ואנימציות במסך, והם יכולים להיות בגודל קבוע או בגודל דינמי. אתם יכולים להשתמש בתמונות כשרטוטים, כמו התמונות באפליקציית GDG. תוכלו גם להשתמש בשרטוטים וקטוריים כדי לשרטט כל דמיון. יש גם אפשרות לשרטוט בגודל של 9 כדורים עם 9 קווים, שאי אפשר להשתמש בה ב-codelab הזה. ניתן גם לצייר את הלוגו של 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"/>
  1. בתיקייה פריסה, יוצרים קובץ משאב חדש לפריסה בשם region.xml, להגדרת הפריסה של קובץ אחד (Chip).
  2. בפורמט 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"/>
  1. כדי ליצור את הצבע הselected_highlight חסר, יש להציב את הסמן על selected_highlight, להציג את תפריט הכוונות וליצור משאב צבע להדגשה שנבחרה. אפשרויות ברירת המחדל הן טובות, לכן יש ללחוץ על אישור. הקובץ נוצר בתיקייה res/color.
  2. פותחים את res/color/selected_highlight.xml. ברשימת מצבי הצבע הזו, המקודדת בתור <selector>, אפשר לספק צבעים שונים למדינות שונות. כל מצב וצבע משויך מקודדים כ-<item>. מידע נוסף על צבעים אלה זמין בקטע עיצוב צבעים.
  1. בתוך <selector>, מוסיפים פריט עם צבע ברירת המחדל colorOnSurface לרשימת המדינות. ברשימות של מדינות, חשוב לכלול תמיד את כל המדינות. אחת הדרכים לעשות זאת היא שימוש בצבע ברירת המחדל.
<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>
  1. מעל צבע ברירת המחדל, יש להוסיף item בצבע colorPrimaryVariant ולהגביל את השימוש בו כאשר המצב שנבחר הוא true. רשימות של מדינות עובדות מלמעלה למטה, כמו הצהרת מקרה. אם אף אחת מהמדינות לא מתאימה, מצב ברירת המחדל חל.
<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

שלב 2: הצגת שורת הצ'יפים

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

  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
        }
})
  1. בתוך onChanged(), מתחת לבדיקת ה-null, יש להקצות את binding.regionList למשתנה חדש בשם chipGroup כדי לשמור את המטמון במטמון regionList.
val chipGroup = binding.regionList
  1. למטה צריך ליצור layoutInflator חדש לניפוח של צ'יפים מ-chipGroup.context.
val inflator = LayoutInflater.from(chipGroup.context)
  1. יש לנקות ולבנות מחדש את הפרויקט כדי לתקן את השגיאה של קישור הנתונים.

מתחת לניפוח, אפשר עכשיו ליצור צ'יפים בפועל, אחד לכל אזור בregionList.

  1. יוצרים משתנה מסוג children כדי לכלול את כל הצ'יפים. כדי ליצור ולהחזיר צ'יפ, יש להקצות לו פונקציית מיפוי של הכרטיס העובר ב-data.
val children = data.map {} 
  1. בתוך המלבה של המפה, לכל 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
   }
}
  1. בתוך הלובה, ממש לפני החזרה של chip, מוסיפים האזנה לקליק. כאשר לוחצים על chip, יש להגדיר את המצב שלו ל-checked. יש להתקשר אל onFilterChanged() בviewModel. הפרמטר הזה מפעיל רצף של אירועים שמאחזרים את התוצאה של המסנן הזה.
chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}
  1. בקצה של לאמבה, מסירים את כל הצפיות הנוכחיות מ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)
       }
   }
})
  1. כדי להשתמש בצ'יפים החדשים, מפעילים את האפליקציה ומחפשים את GDGS כדי לפתוח את מסך החיפוש. כשלוחצים על כל צ'יפ, האפליקציה מציגה את קבוצות הסינון שמתחתיו.

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

שלב 1: הפעלת מצב הלילה

כדי לספק את העיצוב הכהה באפליקציה, משנים את העיצוב מעיצוב Light לעיצוב DayNight. העיצוב של DayNight נראה בהיר או כהה, בהתאם למצב.

  1. בstyles.xml,, יש לשנות את עיצוב ההורה של AppTheme מLight לDayNight.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  1. בשיטה onCreate() של MainActivity#, יש להתקשר אל AppCompatDelegate.setDefaultNightMode() כדי להפעיל את העיצוב הכהה באופן פרוגרמטי.
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
  1. מפעילים את האפליקציה ומוודאים שהיא עברה לעיצוב הכהה.

שלב 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".
  • אתם יכולים לצפות בתצוגה מקדימה של ה-RTL באמולטור שלכם, ואתם יכולים להשתמש בשפה שלכם כדי לבדוק את פריסות המסך. במכשיר או באמולטור, פותחים את ההגדרות ואז באפשרויות למפתחים, לוחצים על אכיפת פריסת RTL.
  • יש להחליף את ההפניות ב-Left וב-Right בהפניות אל Start ואל End.
  • כדאי להשבית את השיקוף של פריטי שרטוט על ידי מחיקת android:autoMirrored="true".
  • בוחרים לבצע חישוב מחדש > מוסיפים תמיכה ב-RTL כשהדבר אפשרי מאפשר ל-Android Studio לעשות את העבודה בשבילכם.
  • משתמשים בתיקיות values-"language code" כדי לאחסן משאבים ספציפיים לשפה.

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

עיצוב ל-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)
  • יוצרים את הצ'יפים, מוסיפים event listener שמפעיל את הפעולה הרצויה ומוסיפים את הצ'יפים לקבוצת הצ'יפים.

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

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

התיעוד של מפתח Android:

משאבים אחרים:

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

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

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

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

שאלה 1

אילו מהשפות הבאות נדרשות כדי לתמוך בשפות RTL?

▬ להחליף את Left ואת Right בנכסים ב-Start וב-End

▬ החלפה לשפת RTL

הוספה יש לוודא שכל הסמלים כוללים את android:autoMirrored="true"

▬ לספק תיאורי תוכן

שאלה 2

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

הוספה של TalkBack

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

▬ ב-Android Studio, לבצע חישוב מחדש > הוספת תמיכה ב-RTL כשהדבר אפשרי

▢ מוך

שאלה 3

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

הוספה של צ'יפ מוצג כחלק מChipGroup.

הוספה ניתן להוסיף רשימת מצבי צבע של ChipGroup.

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

הוספה תמיד צריך להפעיל את DarkTheme אם האפליקציה משתמשת בצ'יפים.

שאלה 4

איזה עיצוב מספק עיצוב במצבים כהים או בהירים?

DayNight

DarkTheme

DarkAndLightTheme

Light

שאלה 5

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

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

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

▬ תצוגה שמאפשרת לצפות בווידאו בסטרימינג

הוספה של קו אנימציה