מזהה GRid

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

פריסה גמישה ודינמית דו-ממדית באמצעות Grid
איור 1. פריסה גמישה ודינמית דו-ממדית עם Grid.

מה ההבדל בין Grid לבין רכיבים דומים שניתנים להרכבה?

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

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

בטבלה הבאה מפורטות הפריסות שמתאימות לכל API:

רכיב מטרה
LazyVerticalGrid, LazyStaggeredGrid, LazyHorizontalGrid ויזואליזציה של קבוצות גדולות של נתונים הומוגניים שדורשת טעינה מדורגת.
Row, Column, FlexBox פריסה חד-ממדית
Grid פריסה דו-ממדית

הסברים על המונחים

כדי להבין איך Grid פועל, כדאי להכיר את המונחים הבאים.

קו רשת

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

הרשת מורכבת מארבעה קווים אופקיים ושלושה קווים אנכיים.
איור 2. הרשת מורכבת מארבעה קווים אופקיים ושלושה קווים אנכיים.

Grid track

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

רצועת רשת לשורה הראשונה.
איור 3. רצועת רשת לשורה הראשונה.

תא רשת

תא ברשת הוא נקודת החיתוך של שורה ועמודה.

תא ברשת שהוא נקודת המפגש של השורה השנייה והעמודה השנייה.
איור 4. תא ברשת שהוא נקודת המפגש של השורה השנייה והעמודה השנייה.

אזור הרשת

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

אזור ברשת שמורכב מארבעה תאים ברשת.
איור 5. אזור ברשת שמורכב מארבעה תאים ברשת.

הרווח בין המשבצות

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

רווח בין העמודה הראשונה לעמודה השנייה ברשת.
איור 6. רווח בין העמודה הראשונה לעמודה השנייה ברשת.