‫Android Kotlin Fundamentals 07.3: GridLayout with RecyclerView

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

מבוא

אחד היתרונות העיקריים של RecyclerView הוא שהוא מאפשר לכם להשתמש במנהלי פריסות כדי לשלוט באסטרטגיית הפריסה ולשנות אותה. LayoutManager קובע את אופן הסידור של הפריטים בRecyclerView.

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

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

מה שכדאי לדעת

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

  • בניית ממשק משתמש בסיסי באמצעות Activity, Fragments ו-Views
  • ניווט בין פרגמנטים ושימוש ב-safeArgs כדי להעביר נתונים בין פרגמנטים
  • הצגת מודלים, הצגת מפעלים של מודלים וטרנספורמציות
  • LiveData והמשתמשים שמוגדרים כצופים שלהם
  • איך יוצרים מסד נתונים של Room, יוצרים DAO ומגדירים ישויות
  • איך משתמשים בקורוטינות למשימות שקשורות למסד נתונים ולמשימות אחרות שפועלות לאורך זמן
  • איך מטמיעים RecyclerView בסיסי עם Adapter, ViewHolder ופריסת פריטים
  • איך מטמיעים קשירת נתונים ב-RecyclerView
  • איך ליצור מתאמי קישור ולהשתמש בהם כדי לשנות נתונים

מה תלמדו

  • איך משתמשים בLayoutManager אחר כדי לשנות את אופן הצגת הנתונים ב-RecyclerView
  • איך יוצרים פריסת רשת לנתוני השינה

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

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

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

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

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

נתוני השינה מוצגים בRecyclerView. ב-codelab הזה, תשנו את האפליקציה כך שתשתמש ב-GridLayout. המסך הסופי ייראה כמו בצילום המסך שלמטה.

ב-codelab הקודם, כשמוסיפים את RecyclerView ל-fragment_sleep_tracker.xml, מוסיפים LinearLayoutManager בלי התאמות אישיות. הקוד הזה מציג את הנתונים כרשימה אנכית.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

‫LinearLayoutManager הוא מנהל הפריסה הנפוץ והפשוט ביותר ל-RecyclerView, והוא תומך במיקום אופקי ואנכי של תצוגות צאצא. לדוגמה, אפשר להשתמש ב-LinearLayoutManager כדי ליצור קרוסלה של תמונות שהמשתמש יכול לגלול אופקית.

GridLayout

תרחיש נפוץ נוסף הוא הצורך להציג למשתמש הרבה נתונים, שאפשר לעשות באמצעות GridLayout. הנתונים של GridLayoutManager עבור RecyclerView מוצגים כרשת שאפשר לגלול בה, כמו שמוצג בהמשך.

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

איך GridLayout מסדר פריטים

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

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

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

במשימה הזו, לוקחים את RecyclerView שהשלמתם בתרגיל הקודם ומעדכנים אותו כך שיוצגו בו נתונים באמצעות GridLayoutManager. אתם יכולים להמשיך להשתמש באפליקציה למעקב אחרי השינה מה-codelab הקודם, או להוריד את האפליקציה RecyclerViewGridLayout-Starter מ-GitHub.

שלב 1: שינוי של LayoutManager

  1. אם צריך, מורידים את האפליקציה RecyclerViewGridLayout-Starter ל-codelab הזה מ-GitHub ופותחים את הפרויקט ב-Android Studio.
  2. פותחים את קובץ הפריסה fragment_sleep_tracker.xml.
  3. מסירים את מנהל הפריסה מההגדרה של sleep_list RecyclerView.

קוד למחיקה:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. פתיחת SleepTrackerFragment.kt.
  2. ב-OnCreateView(), ממש לפני ההצהרה return, יוצרים פריסה אנכית חדשה, מלמעלה למטה, GridLayoutManager עם 3 טווחים.

    הבונה GridLayoutManager מקבל עד ארבעה ארגומנטים: הקשר, שהוא activity, מספר הטווחים (עמודות, בפריסה האנכית שמוגדרת כברירת מחדל), כיוון (ברירת המחדל היא אנכית) והאם זו פריסה הפוכה (ברירת המחדל היא false). 
val manager = GridLayoutManager(activity, 3)
  1. מתחת לשורה הזו, אומרים ל-RecyclerView להשתמש ב-GridLayoutManager הזה. הערך RecyclerView נמצא באובייקט הקישור ונקרא sleepList. (ראו fragment_sleep_tracker.xml).
binding.sleepList.layoutManager = manager

שלב 2: שינוי הפריסה

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

  1. פתיחת list_item_sleep_night.xml.
  2. מוחקים את sleep_length TextView, כי העיצוב החדש לא צריך אותו.
  3. מעבירים את quality_string TextView כך שיוצג מתחת ל-ImageView. כדי לעשות את זה, צריך לעדכן לא מעט דברים. זה הפריסה הסופית של quality_string TextView:
<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />
  1. בתצוגה עיצוב, מוודאים שהמיקום של quality_string TextView הוא מתחת ל-ImageView.

מכיוון שהשתמשתם בקשירת נתונים, לא צריך לשנות שום דבר ב-Adapter. הקוד אמור לפעול, והרשימה אמורה להופיע כרשת.

  1. מריצים את האפליקציה ורואים איך נתוני השינה מוצגים ברשת.

    חשוב לזכור שהרכיב ConstraintLayout עדיין תופס את כל הרוחב. האפשרות GridLayoutManager מגדירה רוחב קבוע לתצוגה, על סמך טווח התאריכים שלה. GridLayoutManager עושה כמיטב יכולתה כדי לעמוד בכל המגבלות כשמגדירים את פריסת הרשת, מוסיפים רווח לבן או חותכים פריטים.
  1. ב-SleepTrackerFragment, בקוד שיוצר את GridLayoutManager, משנים את מספר ה-span של GridLayoutManger ל-1. מריצים את האפליקציה ומוצגת רשימה.
val manager = GridLayoutManager(activity, 1)
  1. משנים את מספר הטווחים של GridLayoutManager ל-10 ומריצים את האפליקציה. שימו לב ש-GridLayoutManager יתאים ל-10 פריטים בשורה, אבל הפריטים ייחתכו.
  2. משנים את מספר המרווחים ל-5 ואת הכיוון ל-GridLayoutManager.VERTICAL. מריצים את האפליקציה ורואים שאפשר לגלול אופקית. כדי שהתמונה תיראה טוב, צריך להשתמש בפריסה אחרת.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. אל תשכחו להגדיר את מספר הטווח בחזרה ל-3 ואת הכיוון לאנכי.

פרויקט Android Studio: ‏ RecyclerViewGridLayout
  • מנהלי פריסות קובעים את האופן שבו הפריטים ב-RecyclerView מסודרים.
  • ‫RecyclerView כולל מנהלי פריסה מוכנים לשימוש לתרחישים נפוצים כמו LinearLayout לרשימות אופקיות ואנכיות, ו-GridLayout לרשתות.
  • לתרחישי שימוש מורכבים יותר, כדאי להטמיע LayoutManagerבהתאמה אישית.
  • מבחינת עיצוב, הכי טוב להשתמש ב-GridLayout לרשימות של פריטים שאפשר לייצג כסמלים או כתמונות.
  • GridLayout מסדרת את הפריטים ברשת של שורות ועמודות. בהנחה של גלילה אנכית, כל פריט בשורה תופס מה שנקרא 'טווח'.
  • אתם יכולים להתאים אישית את מספר התאים שפריט מסוים תופס, וכך ליצור רשתות מעניינות יותר בלי שתצטרכו מנהל פריסות בהתאמה אישית.
  • יוצרים פריסת פריט לפריט אחד ברשת, ומנהל הפריסה דואג לארגן את הפריטים.
  • אפשר להגדיר את LayoutManager של RecyclerView בקובץ פריסת ה-XML שמכיל את הרכיב <RecyclerView>, או באופן פרוגרמטי.

קורסים ב-Udacity:

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

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

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

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

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

עונים על השאלות הבאות

שאלה 1

אילו מהאפשרויות הבאות הן מנהלי פריסות שמסופקים על ידי Android? יש לבחור בכל האפשרויות הרלוונטיות.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

שאלה 2

מהו span?

‫▢ גודל הרשת שנוצרה על ידי GridLayoutManager.

‫▢ רוחב העמודה ברשת.

‫▢ המידות של פריט ברשת.

‫▢ מספר העמודות ברשת עם כיוון אנכי.

עוברים לשיעור הבא: 7.4: אינטראקציה עם פריטים ב-RecyclerView