Simple ListView
ListView ברוחב match_parent ובגובה wrap_content, בלי תוכן ב-XML, עם id (listView_animals) כדי לאתר אותו בקוד.ArrayList<String> של שמות חיות. כדי להפריד בין האקטיביטי למקור הנתונים, בונים מחלקה Repository עם פונקציה סטטית getAnimals() שמחזירה את הרשימה, וחשוב לא לשכוח את ה-return.ArrayAdapter לוקח את הרשימה ויודע להציג כל פריט ב-ListView. סוג ה-Adapter תואם לסוג הפריטים. הקונסטרקטור מקבל Context, מזהה layout של שורה (כאן android.R.layout.simple_list_item_1) והאוסף.listView.setAdapter(adapter). הרשימה מוצגת וניתנת לגלילה אוטומטית.setOnItemClickListener עם מחלקה אנונימית. onItemClick מקבל את ה-parent, את ה-View של השורה, את ה-position ואת ה-id. מקבלים את הפריט עם animals.get(position) ומציגים Toast, ובמחלקה אנונימית ה-Context הוא MainActivity.this.simple_list_item_single_choice מוסיף RadioButton לכל שורה, אבל הסימון לא נעשה לבד. בקוד שומרים את ה-AppCompatCheckedTextView שנלחץ (גילו את הסוג עם getClass().getSimpleName()), מבטלים בו setChecked(false) אם הוא לא null, מסמנים את הנוכחי ושומרים אותו.simple_list_item_multiple_choice יש צ'קבוקסים, ולכן אין צורך לבטל את הקודם. בלחיצה הופכים את המצב: setChecked(!isChecked()).simple_list_item_checked מציג וי במקום צ'קבוקס.פרקי ההרצאה: Simple ListView
תמלול ההרצאה: Simple ListView
הטקסט המלא של הדקות הראשונות בהרצאה «Simple ListView» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לסדרת סרטונים בהם אנחנו הולכים לראות איך אנחנו יכולים לעבוד עם רשימת פריטים, כלומר הצגה על המסך של רשימה של פריטים.
קורה הרבה שאנחנו רוצים להציג באפליקציה שלנו רשימת מוצרים, רשימת לקוחות, רשימת קונטקס או כל רשימה אחרת של פריטים לדוגמה אחד מעל השני, וקיימים רכיבים ויזואליים מיוחדים שמסוגלים לבצע את זה, צריך להכיר אותם ולדעת איך לעבוד איתם.
אז אנחנו הולכים כרגע להציג איזושהי רשימה מסוימת, בואו נניח רשימה של חיות, שמות של חיות, עם איזשהו רכיב שנקרא List View. בואו נראה איך אנחנו יכולים לעבוד איתו.
דבר ראשון, אנחנו רוצים כאן איזשהו Text View שיציג איזושהי כותרת, ככה שנראה שעל המסך שלנו יכולים להיות עוד דברים חוץ מאותה רשימה.
אז בואו ניקח כאן Wrap Content, נגדיר Gravity, Layout Gravity, Center, נגדיר איזשהו טקסט סייז, בואו ניקח 30 ונגדיר שהטקסט זה Animals ברבים כי אנחנו מציגים רשימה של פריטים.
אז הנה יש לנו כאן את הכותרת ומתחת אנחנו רוצים רכיב ListView, נגדיר אותו כ-Match Parent מבחינת רוחב ו-Rap Content מבחינת גובה שיתפוס כמה פריטים שאנחנו צריכים ואפשר אפילו להגדיר אותו כself closing tag מפני שאין בתוכו שום דבר אנחנו ממלאים אותו דרך הקוד.
דבר נוסף שאנחנו רוצים לתת לו זה ID מפני שאנחנו רוצים להגיע אליו דרך Java code. נקרא לו list view animals בצורה כזאת והנה יש לנו כאן את ממשק המשתמש אנחנו רואים את הכותרת אנחנו רואים את רשימת הפריטים ואנחנו רוצים בקוד למלא את כל הפריטים האלה אז בדוגמה הזאת אנחנו הולכים לראות איך אנחנו יכולים להציג רשימת פריטים פשוטה ביותר ובסרטונים אחרים אנחנו נראה איך אנחנו יכולים לעשות
אותה טיפה יותר מעוצבת הדבר הראשון שאנחנו רוצים זה שיהיה לנו איזה שהוא array list אז בואו נגדיר private array list של string נקרא לו animals ואנחנו רוצים להכניס אליו רשימה של פריטים של שמות של חיות כרגע זה הרייליסט מסוג סטרינג, בהמשך זה יהיה הרייליסט מסוגים אחרים.
עכשיו, בכדי לבצע איזושהי הפרדה בין המיין אקטיביטי לבין מאיפה אנחנו משיגים את רשימת הפריטים, אז בואו נבנה כאן איזושהי מחלקה, נקרא לה ריפוזיטורי, מחסן שהמחסן הזה פשוט יגדיר איזושהי פונקציה סטטית שתחזיר לנו הרייליסט כזה.
הנה הרייליסט של סטרינג, נקרא לפונקציה get-animals נגדיר כאן arraylist של string-animals שווה new-arraylist ופשוט נוסיף שמות של חיות animals add נשכפל את זה ופשוט ניתן פה כמה שמות של חיות בואו ניקח bunny,
זיקית, דיר, דאקלינג, קלפנט, ג'ירף, ניקח קיטן, אול ופנדה ופאפי והנה יש לנו סדרה של חיות ואנחנו רוצים לגשת לריפוזיטורי ולמלא את ה-ArrayList הזה.
ריפוזיטורי, GetAnimals, והנה יש לנו עכשיו רשימת פריטים מוכנה. דבר נוסף שאנחנו רוצים זה לבנות אובייקט מה-ListView אנימלס שלנו.
בואו נאתר אותו, נכניס לתוכו ListView, FindViewByID והנה איתרנו אותו. כעת מה שאנחנו רוצים לעשות זה למלא אותו או בפריטים שנמצאים ב-raylist. חייב להיות לנו איזושהי רשימה שאותה אנחנו רוצים לקחת ולמלא את הרכיב הוויזואלי עם הרשימה הזאת.
אז מה שאנחנו צריכים לעשות זה להגדיר משהו שנקרא ה-rayadapter. ה-rayadapter זאת מחלקה שהיא זאת שמקבלת את רשימת הפריטים והיא זאת שיודעת להציג אותם בתוך ה-list view.
והרי אדפטר הזה זה רכיב מאוד חשוב שדרוש בכדי להציג את רשימת הפריטים. כי שימו לב שהפריטים עצמם נמצאים בהרייליסט וזה דאטה טהור.
ההרייליסט לא אמור לדעת איך מציגים את עצמו. הוא רק אומר לי יש לי רשימה של פריטים שבמקרה הזה זה רשימה של מכרוזות ובהמשך זה יהיה רשימה של איזשהו אובייקט משלנו, אובייקט אחר.
אז זה לא משנה איזה פריטים הוא מציג הוא רק דאטה טהור. עכשיו יש לנו את הרכיב הוויזואלי שהוא הליסט-ויו. הליסט-ויו מתעסק עם התצוגה עצמה, אבל אנחנו צריכים את המתאם הזה, את האדפטר, שייקח את הרשימה של הפריטים מהרי-ליסט וידע איך להציג כל פריט בליסט-ויו.
ככה זה עובד. אם רשימת הפריטים שלנו זאת רשימה של סטרינגים, אז גם הרי-אדפטר צריך להיות סטרינג. אם הרשימה היא אובייקט אחר, הרי אדאפטר יהיה בדיוק מאותו אובייקט.
אז בואו ניקח כאן את הרי אדאפטר, נגדיר אובייקט הרי אדאפטר שווה new הרי אדאפטר, פה אנחנו לא צריכים את הסטרינג, לפי אחת מהגרסאות החדשות יותר של ג'אווה, ואנחנו רוצים בקונסטרקטור להביא לו את הדברים הדרושים.
הדבר הראשון שהוא מבקש מאיתנו, בוא נשים כאן את הפרמטרים, קונטרול פי, זה את הקונטקסט, זה כמובן הדיסק, כי אנחנו קונטקסט, לאחר מכן הוא מבקש מאיתנו איזשהו ID של קובץ layout בכדי לדעת איך להציג את הפריטים.
בסרטון הזה אנחנו הולכים לראות סדרת תצוגות שהן מאוד פשוטות ולכן קיימים במערכת באנדרואיד סדרת layoutים מאוד פשוטים להצגת פריטים. אז בואו ניתן לו את ה-layout הכי פשוט שקיים וזה יהיה android כל layout כזה מתחיל באנדרואיד, נקודה r, נקודה layout, נקודה simple והנה אנחנו רואים פה סדרה של ליהוטים שמתאימים.
בואו ניקח simple underline list underline item 1. זה בעצם ליהוט שאומר תנו לי רשימה של פריטים אני מציג אותה ממש אחד מתחת לשני מכרוזות פשוטות. הדבר הבא שאנחנו רוצים לתת לו זה את ה-collection עצמו.
ה-collection שלנו זה ה-animals והרי ליסט ועכשיו האדפטר מוכן והוא יודע איך בעצם להציג את הפריטים כל מה שאנחנו צריכים לעשות עכשיו זה לגשת לליסט view ולהגדיר לה סט האדפטר הנה הרי אדפטר שלנו קחי אותו ותציגי פשוט את כל הפריטים איך שהוא יגיד לך יש לנו רק שגיאה קטנה כאן בריפוזיטורי אני רואה בואו ניכנס ונחפש אותה כאן אני רואה אדום ואכן
אני רואה שפשוט שכחתי לעשות ריטרן של אנימלס. הגדרתי שהפונקציה מחזירה רייליסט ופשוט שכחתי לעשות הריטרן, והנה הבעיה טופלה.
אז בואו נחזור, וכעת אנחנו מוכנים להריץ. אז הנה המערכת רצה, ואנחנו רואים את רשימת הפריטים, ואוטומטית יש לנו סקרולר כזה שיכול לגלול, וכל הפריטים מוצגים בצורה הכי פשוטה שיכולה להיות, המחרוזות אחד מתחת לשני זאת אומרת המינימום הצלחנו להציג רשימת פריטים על רכיב list view באקטיביטי מה קורה אם היוזר לוחץ על פריט
אז אם הוא לוחץ על פריט אנחנו רוצים לדעת איזה פריט נלחץ שימו לב שיש לי פה אפקט ויזואלי של ripple אפקט שאומר לי על איזה פריט לחצו זה מאוד פשוט לביצוע מה שאנחנו רוצים לעשות זה להגיע ל-list view שלנו list view animals ולהירשם לאירוע שנקרא set on item click listener נגדיר לו הפעם new on item click listener ניקח בעצם את הקונספט של מחלקה אנונימית והנה יש לנו כאן
פונקציה שתתבצע ב-on click. הפונקציה הזאת מקבלת סדרת פרמטרים היא מקבלת איזה רכיב הוא הפרנט שזה בעצם ה-List View עצמה, איזה View לחצו עליו, שזה כל אחד מהשורות עצמן, השורות אמורות להיות איזשהו טקסט-ויו פשוט או משהו שיורש מטקסט-ויו, מה המיקום של הפריט ואנחנו יכולים להשתמש איתו
בשביל להשיג את הפריט עצמו מהאוסף, ואיזשהו ID שמייצג את ה-ID של השורה, פחות שימושי מבחינתנו כרגע. אז בואו פשוט נציג איזשהו Toast, מייק טקסט דיס אנחנו לא יכולים לעשות מפני שאנחנו אנונימוס קלאס מחלקה אנונימית ומחלקה אנונימית במקרה הזה היא לא קונטקסט אז אנחנו צריכים מיין אקטיביטי נקודה דיס זה הקונטקסט של המיין אקטיביטי לאחר מכן אנחנו רוצים את הפריט עצמו שלחצו עליו אנימלס זה
האוסף פריטים שלנו גט הוא מבקש ממני אינדקס וזה בדיוק הפוזישן לאחר מכן length בואו ניקח הפעם short ונעשה show ונריץ.
האפליקציה מתחילה לרוץ, אנחנו עדיין רואים את אותם פריטים, אנחנו יכולים להסתכל על כל אחד, אבל ברגע שאנחנו בוחרים פריט, הנה אנחנו קיבלנו את האירוע קליק שלו ואנחנו יכולים לראות בדיוק איזה פריט היוזר לחץ.
הכל עובד כמו שצריך, הצגנו רשימה פשוטה של פריטים. עכשיו איזה עוד layouts מרכזיים ונפוצים קיימים שמאפשרים לנו לראות את רשימת הפריטים.
אז אנחנו יכולים עכשיו לקחת את כל הסיפור הזה, בואו נשים אותו רק בהערה, נדביק אותו כאן ונראה אפשרות אחרת. במקום simple list item 1 בואו נבחר ב-simple list item single choice.
סינגל צ'וייס מאפשר לנו לראות מעין רדיו בטון כזה. אם אנחנו עכשיו לוקחים בדיוק את הקוד הזה, פשוט שינינו את הלייאוט והצגנו לייאוט אחר, מה זה בעצם הלייאוט הזה?
זה פשוט אומר לנו איך כל אחד מהפריטים הולך להיראות. אז אם אנחנו ניקח בדיוק את זה ונריץ, אנחנו נוכל לראות שלכל פריט יש רדיו בטון לידו.
אחלה. והקונספט של סינגל צ'וייס, כלומר המטרה זה שרק אחד נבחר אבל אם אנחנו לוחצים על זה הוא בכלל לא בוחר לנו את הרדיו באטל הוא לא מראה לנו שהרדיו באטל נבחר.
מפני שהליסט לא מטפל בזה האדפטר לא מטפל בזה ולא הליסט view ואנחנו צריכים לטפל בזה בעצמנו אז איך אפשר לעשות את זה אפשר לעשות את זה בצורה ממש פשוטה בואו נגדיר כאן שימו לב איפה אני נמצא אני נמצא בתוך המחלקה האנונימית.
אנחנו רוצים להגדיר אובייקט מסוג הפריט עצמו שנלחץ. מה הסוג שלו? הרי הסוג שלו זה לא list view, list view זה כל הרכיב שמכיל את כל הרשימה.
ב-list view יש שורות שורות של פריטים. אם אני רוצה להגדיר את הפריט הזה שנלחץ בכדי לדעת מי הפריט האחרון שלחצו עליו ואז ככה אני יכול לסמן אותו או לבטל אותו, אז בואו נעשה רגע איזה טריק קטן נגיע לכאן ובמקום להציג את הפריט עצמו ניגש ל-vue שזה הפריט האמיתי שלחצו עליו ונקרא לפונקציה שנקראת get class.
זה מביא לנו איזשהו אובייקט שמתאר את ה-class