Custom ListView
Animal עם השדות type ו-description, גטרים וסטרים ו-toString, כולם נוצרו ב-Alt+Insert. מחלקת Repository מחזירה ArrayList<Animal>, ובאקטיביטי animals = Repository.getAnimals().item_animal עם RelativeLayout. בו ImageView בגודל 80dp על 80dp עם margin של 10dp, TextView של הסוג (גודל 30sp, כחול, מימין לתמונה) ו-TextView של התיאור (מתחת לסוג, מיושר אליו, גודל 20sp, ירוק).tools:src ו-tools:text רואים ערכי דוגמה רק במעצב, ובריצה הם לא משפיעים. התיאור מוגדר singleLine עם ellipsize בסוף, כדי להציג שלוש נקודות.AnimalsAdapter extends ArrayAdapter<Animal>. הקונסטרקטור מקבל Context ורשימה, וקורא ל-super(context, 0, animals), כי אין שימוש ב-layout הסטנדרטי. בנוסף שומרים LayoutInflater (מ-getSystemService(LAYOUT_INFLATER_SERVICE)), Resources ושם החבילה.getView: נקראת אוטומטית לכל פריט ומחזירה את ה-View של השורה. מנפחים את R.layout.item_animal עם inflate(..., null), מאתרים את שלושת הרכיבים, מקבלים את הפריט עם getItem(position), ומחשבים את מזהה התמונה עם getResources().getIdentifier(type.toLowerCase(), "drawable", packageName).setImageResource(imageId), ו-setText לסוג ולתיאור. מחזירים את ה-layout.new AnimalsAdapter(this, animals), setAdapter, ו-setOnItemClickListener שמציג Toast עם animals.get(position).toString().Animal, ולכן ArrayAdapter של מחרוזות לא מתאים כאן.פרקי ההרצאה: Custom ListView
תמלול ההרצאה: Custom ListView
הטקסט המלא של הדקות הראשונות בהרצאה «Custom ListView» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שראינו איך אנחנו יכולים להציג רשימת פריטים בצורה פשוטה על רכיב ליסט ויו, בואו נראה איך אנחנו יכולים להציב רשימת פריטים אבל בצורה מעוצבת על ליסט ויו. מה זאת אומרת?
זאת אומרת שאנחנו יכולים להגדיר איך ייראה כל פריט ופריט שמוצג בליסט ויו. בדרך כלל זה קורה כאשר לפריט יש יותר מסתם מחרוזת. אולי יש לו מחרוזת וגם ערך אינטג'רי וגם תמונה.
דוגמא אם אנחנו לוקחים מוצר אז יש לו שם ויש לו מחיר ויש לו תמונה ויש לו אולי תיאור ואת כל הדברים האלה אנחנו רוצים להגדיר בצורה ויזואלית מעוצבת עבור כל אחד מהפריטים בואו ניקח את אותה דוגמה שעשינו עבור החיות ונראה איך אנחנו מציגים את החיות אבל בצורה מעוצבת אז דבר ראשון הגיוני שתהיה לנו מחלקה שמתארת חיה כי כנראה שיש לנו כמה פריטים שונים עבור
animal אז בואו נבנה מחלקה חדשה ובואו נקרא לה animal ובואו נגדיר במחלקה הזאת את הדברים שיש לנו והמינימום שיש לנו זה private string סוג החיה type ובואו ניקח עוד string עבור לדוגמה תיאור החיה description אנחנו רוצים גתרים וסתרים ואנחנו יכולים ללחוץ על alt
ו-insert ביחד ואז לבחור או בגטר או בסטר או בגטר אנד סטר. לבחור שאנחנו רוצים את שניהם, נבצע אוקיי ואוטומטית אנדרואיד סטודיו בונה לנו גם גטרים וגם סטרים עבור המחלקה.
בואו נעשה את אותו הדבר עבור קונסטרקטור, הנה אנחנו רואים קונסטרקטור, אנחנו רוצים קונסטרקטור שיכיל את שני החבר'ה האלה אבל אנחנו רק צריכים לעבור דרך הסטרים, זה הדבר היותר נכון לבצע.
בואו נקרא לסט טייפ אנחנו ממש בונים מחלקה שמתארת ישות טהורה ופשוטה סט דסקריפשן ניפטר מזה ובואו נלחץ עוד פעם אלט אינסרט ונבנה הפעם טוסטרינג אז אנחנו רוצים להחזיר הכל בטוסטרינג הנה כאן למטה לא לא למטה פה הוא בנה לנו את הטוסטרינג באזור הזה בואו נעביר את זה למטה שיהיה קצת יותר הגיוני ונעצב אותה קצת אחרת האמת בואו נחזיר את הטייפ משורשר עם ירידת שורה משורשר עם הדסקריפשן והנה סידרנו
לעצמנו 2 סטרינג והמחלקה שמתארת חיה אחת מוכנה לנו שלחיה יש רק סוג החיה ותיאור החיה. הדבר הבא שאנחנו הולכים לבנות זה ריפוזיטורי של חיות בדיוק כמו שבנינו בסרטון של ה-Simple List View.
בואו נגדיר פה מחלקה ריפוזיטורי ונבנה בתוך המחלקה הזאת איזושהי פונקציה סטטית public static שמחזירה array list, אבל הפעם כל פריט הוא מטיפוס animal. נקרא לפונקציה getAnimals, נגדיר array list של animal בתוך המחלקה, animal שווה new arraylist והפעם אני לא אשכח להחזיר אותו וכאן אנחנו צריכים למלא את ה-arraylist
באובייקטים מסוג animal שלכל אובייקט יש type ויש description אז הכנתי מבעוד מועד סדרה של חיות עם type ו-description פשוט עשיתי copy paste מוויקיפדיה ומכל מיני אתרים והנה יש לנו description ו-type עבור כל חיה והריפוזיטורי מחזיר לנו אריי ליסט של חיות.
כעת אנחנו יכולים לבוא למיין אקטיביטי, לבנות כאן אובייקט פרייבט אריי ליסט של אנימל, נקרא לו Animals שווה ריפוזיטורי getAnimals בצורה כזאת וכעת אנחנו יכולים להציג את כל החיות האלה בממשק שלנו.
מה יש לנו בממשק? לממשק יש לנו בדיוק אותו הדבר כמו שהיה לנו מקודם הנה יש לנו פה למעלה את האנימלס שזה בעצם טקסט view עם כותרת והנה יש לנו פה את הליסט view הכל אותו הדבר אנחנו רק רוצים להציג את הפריטים מעוצבים כפי שאנחנו רוצים.
אז מה שאנחנו צריכים לעשות זה פשוט לבנות layout שמתאר איך נראה פריט ברשימה זה מתבצע בתיקיית ה-layouts. בואו ניגש ונוסיף layout resource file ונקרא לו item underline animal והוא מתאר לנו איך נראה פריט שמחזיק חיה אחת.
בואו ניגש לxml שלו, נוריד את זה, יש לנו פה linear layout ובואו נגדיר אותו כהוריזונטל ולא ורטיקל, לא, בעצם בואו נעשה אותו relative, נעשה אותו relative ואז יש לנו יותר שליטה על הפריטים השונים שקיימים בו.
ומה אנחנו רוצים להציג אנחנו רוצים להציג סך הכל את מה שהיה לנו במחלקה במחלקה היה לנו סך הכל טייפ ודסקריפשן ובואו נציג גם תמונה לצורך כך בואו ניגש וניקח סדרה של תמונות הנה יש לנו פה תמונות שהכנתי נחזור בחזרה נדביק אותם בתוך דרובל יש לנו פה את התמונות וכעת אנחנו יכולים לבנות את הלייאוט שמתאר פריט בודד.
הנה יש לנו כאן image view נגדיר שהוא יהיה 80 dp על 80 dp אנחנו רואים פה בצד את התמונה נגדיר id image view animal animal אחד ויחיד ניתן איזשהו margin שיהיה טיפה ריווח נניח 10 dps ואנחנו רוצים לראות איך הדבר הזה נראה כאן תוך כדי הבנייה.
עכשיו אנחנו לא רוצים לגשת ולבצע src שווה drawable ולתת כאן איזושהי חיה לדוגמה פאפי למה כי אז כל פעם שפריט ייווצר בזמן ריצה בצורה דינמית אז המערכת קודם כל תיגש תיקח את התמונה הספציפית הזאת תשים ואז תחליף את זה בתמונה הסטנדרטית או הנוכחית שבאמת צריכה להיות מוצגת על הפריט הזה לכן ראינו בעבר שיש לנו איזשהו טריק ואנחנו יכולים במקום android.src לרשום tools.src ואנחנו רואים
את הקו הזה זה אומר שאנחנו צריכים Alt Enter ואז המערכת יוצרת לנו את ה-Namespace המתאים ו-Tools אומר שאנחנו כן רואים את התמונה הזאת בדיזיינר אבל שום דבר לא קורה עם הפרופרטי הזה כאשר האפליקציה רצה ואז אוטומטית אנחנו מקבלים את התמונה הנוכחית האחת והיחידה שאמורה להיות מוצגת בפריט הזה
ולא סתם תמונה פיקטיבית. בואו נייצר בנוסף טקסט view עבור הטייפ, נגדיר אותו כ-Rap Content, נגדיר ID טקסט view טייפ, נגדיר to write off שיהיה מצד ימין של אימג' ויו אנימל, ימינה מהאימג' ויו אנחנו רוצים אותו, בואו ניתן לו גם כן איזשהו מרג'ין 10 dps, נגדיר לו טקסט סייז 30 SP ונגדיר לו טקסט קולור
בואו ניקח רד גרין ובלו שיהיה כחול ולבסוף טולס נקודותיים טקסט וניתן לו פאפי והנה אנחנו רואים שכאן מוצג הפאפי כל מה שנשאר לנו לעשות זה לשכפל ולהגדיר עוד אחד עבור הדסקריפשן בואו נשנה פה את השם לטקסט view description בצורה כזאת ואנחנו רוצים שהוא יקבל מאפיינים אחרים אנחנו רוצים שהוא יהיה מתחת ולא to write off אנחנו רוצים בלואו טקסט view type שהוא יהיה מתחתיו
ובנוסף אנחנו רוצים to align left לטקסט view type ואז הוא כזה נמצא ממש מתחתיו. אין צורך במרג'ין כאן, אפשר להיפטר מהמרג'ין.
טקסט סייז נגדיר קצת יותר קטן, בואו ניקח 20, זה ה-Description. צבע נגדיר אותו כ-Red, Green, Blue שיהיה צבע אחר, ירוק, בואו ניתן לו דסקריפשן ארוך ונראה איך הוא מוצג.
בואו ניקח את הדסקריפשן האמיתי מהריפוזיטורי של פאפי. הנה הדסקריפשן, נעתיק את כל זה, קונטרול C, נחזור, קונטרול V, והנה יש לנו דסקריפשן ארוך וזה כאילו מה שאמור להיות מוצג וזה כמובן לא כל כך הגיוני כי הוא ממש גולש לי פה למטה.
אז בואו ניקח איזשהו טריק מגניב ונבצע כזה דבר. נגדיר שsingle line זה true זאת אומרת שהוא תופס לנו רק שורה אחת ונגדיר שיהיה לנו אליפסיס בסוף בend שזה נראה לי הדפולט אבל נשאיר את זה ככה ואליפסיס זה שלושת הנקודות שאפשר לראות כאן אם אנחנו נתקרב אנחנו נראה פה שלוש נקודות ואנחנו יכולים להציב את זה בסוף מילה בסוף תו בתחילת המחרוזת בכל מיני
מקומות. אז הנה יש לנו כאן את התמונה איך בעצם נראה פריט אחד ברשימה כאשר כל ההגדרות האלה זה הגדרות שרק הדיזיינר רואה אותן וזמן הריצה לא יבצע אותן אלא ישים את ההגדרות האמיתיות.
אז סיימנו להגדיר את הממשק משתמש עבור פריט בודד. מה הדבר הבא שאנחנו צריכים לעשות? כאשר אנחנו התעסקנו עם simple list view אנחנו הלכנו ל-main אקטיביטי ואנחנו יצרנו כאן איזשהו אריי אדפטר.
האריי אדפטר שיצרנו היה אריי אדפטר של סטרינג ואז האריי אדפטר החליט איך בדיוק להציג כל פריט ופריט בליסט ויו. אנחנו לא רוצים להשתמש עם סטרינג פשוט ולכן אנחנו לא יכולים להשתמש עם האריי אדפטר של סטרינג אלא אנחנו צריכים לבנות אריי אדפטר משלנו.
למה? מפני שהמערכת לא יכולה לדעת אף פעם איך אנחנו בדיוק רוצים להציג כל פריט של אנימל האם אנחנו רוצים את הטייפ להציג כאן או האם אנחנו רוצים להציג אותו כאן ואיך בדיוק אנחנו מציגים את התמונה ומאיפה כלומר אם יש לנו איזשהו layout שמתאר פריט משלנו ואנחנו בנינו את ה-layout הזה אז אנחנו צריכים לבוא ולומר למערכת איך להציג את כל אחד מהפריטים ב-layout הזה וזה
זה מתבצע על ידי בניית אדפטר משלנו והאדפטר משלנו יורש את האדפטר הרגיל של המערכת ומגדיר בדיוק איך הוא מציג את הפריטים. אז בואו נקרא לאדפטר הזה Animals Adapter, זאת פשוט מחלקה רגילה לגמרי ונבצע Extends ל-Array Adapter שהשתמשנו איתו מקודם אבל הפעם הוא יטפל ב-Animal עבור כל פריט ופריט.
מה אנחנו רוצים להגדיר ב-Re-Adapter? קודם כל אנחנו צריכים להגדיר קונסטרקטור, אז בואו נגדיר לו Public Animal Adapter in הקונסטרקטור, והקונסטרקטור הזה צריך לקבל קונטקסט, כי אנחנו רוצים להעביר את זה ל-Parent, ArrayList של Animal, ובעצם שכחתי פה לרשום קונטקסט כמשתנה, פרייליסט של אנימל וזה יהיה כל האנימלס ואנחנו
צריכים לגשת לבייס קונסטרקטור שלנו כלומר סופר ולשלוח לו כזה דבר הנה הקונטקסט שלנו פריט הבא שאנחנו צריכים לשלוח לו זה את ה-id של הלאוט הסטנדרטי שאנחנו מוסיפים ולדוגמה היה ה-simple layout item או סימפל צ'ק בוקס אייטם או כל הלאוטים האלה שהגדרנו בסרטון הקודם ובגלל שאנחנו לא מתעסקים כרגע עם עלי ההוצאה