Android Kotlin Fundamentals 07.3: GridLayout עם RecyclerView

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

מבוא

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

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

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

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

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

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

מה תלמדו

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

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

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

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

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

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

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

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

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

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

פריסת רשת

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

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

איך GridLayout בפריסה של פריטים

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

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

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

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

שלב 1: שינוי של מנהל הפריסה

  1. אם צריך, מורידים את האפליקציה RecyclerViewNetworkLayout-Starter מ-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, צריך לשנות את מספר הטווחים של 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: RecyclerViewNetworkLayout
  • מנהלי הפריסה מנהלים את האופן שבו הפריטים בRecyclerView מסודרים.
  • המדיניות RecyclerView כוללת מנהלי פריסה מחוץ לתיבה עבור תרחישי שימוש נפוצים, כמו LinearLayout לרשימות אופקיות ואנכיות, ו-GridLayout עבור רשתות.
  • לתרחישים מורכבים יותר, מומלץ להטמיע LayoutManager בהתאמה אישית.
  • מבחינת עיצוב, GridLayout מתאים במיוחד לרשימות של פריטים שניתן לייצג כסמלים או כתמונות.
  • GridLayout מארגן פריטים ברשת השורות והעמודות. בהנחה שגלילה אנכית, כל פריט בשורה תופס את מה ש&&quot39.
  • אתם יכולים להתאים אישית את מספר הצפיות בפריטים. כך תוכלו ליצור רשתות מעניינות יותר בלי להשתמש בכלי לניהול פריסה בהתאמה אישית.
  • יוצרים פריסת פריט עבור פריט אחד ברשת, ומנהל הפריסה מטפל בסידור הפריטים.
  • אפשר להגדיר את LayoutManager ל-RecyclerView בקובץ פריסת ה-XML שמכיל את הרכיב <RecyclerView>, או באופן פרוגרמטי.

קורסים בעירום:

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

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

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

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

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

מענה על השאלות האלה

שאלה 1

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

▬ LinearLayouManager

▬ GridLayoutManager

▬ CircularLayoutManager

▬ StaggeredGridLayoutManager

שאלה 2

מהו "span"

הוספה בגודל של רשת שנוצרת על ידי GridLayoutManager.

הוספה של רוחב עמודה ברשת.

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

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

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