RecyclerView
RecyclerView הוא מבנה שמאפשר הצגת רשימת פריטים על המסך ביעילות, ותומך בתצורות שונות של התנהגות ועיצוב. למדנו בפרק על ListView לממש רשימה כזו, אך RecyclerView עדיף על ListView מבחינת ביצועים, יעילות, עיצוב וגמישות.
בדוגמה הזאת נממש צעד-אחר-צעד אפליקציה שתציג קטלוג מכירת חיסול לציוד מעבדת מדעי המחשב שייראה כך:
כל RecyclerView, גם הפשוט וגם הכי מורכב ומרשים, כולל בתוכו בסך הכל חמישה חלקים בלבד ומאד דומה באנלוגיה לגוף האדם. אנחנו נעבור שלב-שלב כדי ליצור מבנה עם דוגמה של RecyclerView שתכסה את כל חמשת השלבים:
-
השלד
-
עור ובשר
-
מערכת העצבים
-
איברי הגוף
-
המוח
חלק ראשון - השלד
כל פריט שיופיע בעתיד בתוך רשימה צריך מבנה ברור, ותבנית זו מושגת על ידי מחלקה רגילה ב-Java שתגדיר בתכונותיה את רכיבי המידע של הפריט. בשלב זה אין שום דבר שמזכיר עיצוב - אנו רק בשלב הראשון שהוא שלב הגדרת המידע בלבד.
לצורך הדוגמה נניח שנרצה לממש קטלוג מוצרים למכירת חיסול של כל הציוד במעבדת המחשבים שלנו. לצורך כך נגדיר מחלקה שתייצג פריט ונקרא לה Item. המידע שרלוונטי הוא שם הפריט, מחירו וה-id של תמונתו שתהיה ב-drawable:
חלק שני - עור ובשר
אנחנו נרצה שלכל פריט ברשימה יהיה מראה מאד ברור ומוגדר. אפשרי שזה יהיה המראה הכי פשוט כמו למשל תווית עם כיתוב בלבד או מראה מפוצץ של layout מורכב ונוצץ. זה לא משנה - הרעיון הוא ממש כמו עם בני אדם - לכולם יש שלד ויכול להיות שהצורה, הצבע והגודל שמורכבים על השלד הזה ייראו שונה ובהתאם לצורה החיצונית הייחודית לכל אדם.
כדי להמשיך את הדוגמה נייצר את הניראות של כל פריט שיופיע בעתיד ברשימה בקובץ layout משלו שניצור תחת תיקיית layout. לצורך הדוגמה שלנו נקרא לקובץ הזה one_item שיכלול ImageView לתמונה ושני TextViews עבור שם ומחיר:
חלק שלישי - מערכת העצבים
כמו בגוף האדם - שלד ועור לא מספיקים אם אין אמצעי חישה שיכולים להגיב לגירויים. התגובה לגירויים יכולה להיות הכרח קיומי כדי להגן על השלד והעור ולא פעם גם הדרך להבטיח הישרדות ואורך קיום באמצעות הנעת השלד והעור כתגובה.
אמצעי התגובה הזה בדוגמה שלנו יהיה listener שיהווה מסגרת לפעולת תגובה לאירוע שקורה לפריט ברשימה. אם המילה האזנה עדיין מרגישה זרה ולא ברורה כדאי לחזור ולחדד את החומר שלמדנו בפרק על ממשק וגם בפרק על callbacks.
ניצור ממשק בשם OnAdapterClickedListener (השם שבחרתי לא חובה - אצלך עשוי להשתנות בהתאם לצרכים שלך). הרעיון כאן הוא שממשק זה ישמש כ-callback בו ישתמש ״המוח״ שמפרש נגיעה בפריט ברשימה - קוד שניצור בהמשך.
ספוילר! Adapter הוא השם של ״המוח״ באנלוגיה שלנו לגוף האדם. המשיכו הלאה בקריאה ומבטיח שהכל יתחבר בהמשך:
חלק רביעי - איברי הגוף
כמו בגוף האדם - שלד, עור ועצבים צריכים משהו שיחבר ביניהם; אוסף של איברים ורקמות שיעזרו לגוף הזה לפעול ולא רק להיות שלד עטוף בעור ובשר עם תחושות. כאן נכנסת לתמונה מחלקה פנימית של RecyclerView שנקראת ViewHolder.
כשמה כן היא: מאפשרת להחזיק ולחבר בין שדות המידע של מחלקת ה״שלד״ (Item) ובין הניראות החיצונית (ה-View) שכל שאר העולם שבחוץ רואה באמצעות ה״עור״ (קובץ ה-layout שקראנו לו one_item) וכמו כן לשלוח הלאה איתותים בהתאם למה שמורגש באמצעות מערכת העצבים (הפעלת הפעולה onItemClick של הקולבק OnAdapterClickedListener).
מחלקה זו שמרחיבה את המחלקה ViewHolder תשמש אמצעי ״להחזיק״ את ה-View ונקרא לה לצורך הדוגמה שלנו בשם ItemViewHolder. אין צורך להעתיק את הקוד הזה - הוא ממילא ימומש בחלק הבא בתוך המחלקה שמייצגת את ״המוח״.
מה שחשוב לקחת מהמראה הנפרד הזה הוא את המהות ותפקידו של ה-ViewHolder. זה המקום בקוד בו מתבצע מיפוי של מידע אל תצוגת הפריט שהוגדר בקובץ ה-layout, ומוצמדת לכל פריט שכזה גם האזנה (listener) שהמימוש שלה מזמנת את פעולת הקולבק onItemClick עם מיקום הלחיצה ברשימה, לטיפול ותגובה במקרה של לחיצה על הפריט:
חלק חמישי - המוח
זה המקום שבו הכל מתחבר - המוח שתפקידו לנצח על התזמורת ולגרום לכולם לעבוד יחד. המוח יכול לקבל כל שלד שיהיה, כל תצורת גוף ספציפית ומערכת עצבים שניתנת לו על פני איברים שונים שמחוברים אליהם ו״לנגן״ את פעולות הגוף השלם.
השימוש ב״מוח״ בשילוב כל החלקים הקודמים יאפשרו להציג כל רשימה שנרצה על המסך בצורה טובה, יעילה וחזקה.
מחלקת המוח היא מחלקה פנימית של RecyclerView שנקראת Adapter. המחלקה שלנו - מחלקה רגילה של Java - תרחיב את המחלקה הזו, ותממש בתוכה גם את ItemViewHolder (מהחלק ה-4). לשם הדוגמה נקרא לה ItemsAdapter:
חלק אחרון - השימוש
כדי להשתמש ב-RecyclerView כרשימה על המסך נגדיר אותו בקובץ ה-layout של MainActivity לצורך הדוגמה שלנו.
בכוונה הגובה מוגדר ל- 400dp רק כדי להדגים scrolling כאשר יש יותר פריטים ממה שניתן להראות בגובה שהוגדר:
בתוך הקוד של MainActivity או בכל מקום אחר שמתאים לנו ניצור את ה-RecyclerView עם רשימה (ArrayList) שתכיל את ה-Items (יש גם תמונות שצריכות להיות מועתקות וזמינות בתיקיית drawable אליהן פונה הקוד לפי ה-id שלהן), ובנוסף ניצור עצם של ה-Adapter ונחבר אותו להתנהגות האזנה כשנממש את פעולת הקולבק ישירות בקוד. להורדת הפרויקט כולו.
הכל מחובר יחד ייראה כך:
החדשות הטובות - לשנות צורה והתנהגות בקלות!
אחרי שהראינו דוגמה לשימוש ב-RecyclerView אפשר להגיע להדגמה שממחישה מדוע מומלץ להשתמש בו - הקלות בה ניתן לשנות צורה והתנהגות דווקא בגלל ההפרדה הנכונה בין ה-View ל-Model, המאפשרת רמת גמישות גבוהה במיוחד.
למשל, אם נרצה לקחת את הדוגמה הקודמת ובמקום רשימה אנכית נרצה לשנות אותה שעכשיו תהיה רשימה אופקית שנגללת הצידה בתצורה של כרטיסיות, נוכל להשיג את זה בשתי דקות באמצעות הכנסת שני שינויים קלים.
השינוי בקובץ ה-layout של הפריט היחיד שיצרנו (one_item) שייראה עתה כ-card על המסך:
ב-MainActivity נשנה את תצורת ה-RecyclerView להיות אופקית במקום אנכית בשינוי של שורה אחת בלבד. את השורה:
נשנה לשורת הקוד הזו:
וזהו!
נריץ והשינוי המשמעותי הזה ייראה על המסך וההתנהגות תהיה אותה התנהגות שהוגדרה רק בתצורה אחרת.
זו המשמעות של הפרדה נכונה בין שכבת המידע, הלוגיקה והתצוגה שמאפשר RecyclerView!
כך זה יראה:
