Master Details - Adding Fragments

תמלול ההרצאה: Master Details - Adding Fragments

הטקסט המלא של הדקות הראשונות בהרצאה «Master Details - Adding Fragments» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:00

   אחרי אנחנו יכולים להוסיף את הפרגמנט הדרושים. הפרגמנט הראשונה שאנחנו רוצים להוסיף זה ה-Animal List Fragment. זאת שמציגה את רשימת הפריטים.

2. 00:12

   אז בואו ניגש לאפ, New Fragment ונוסיף Fragment Blank ופשוט נקרא לה Animal List Fragment. ניפטר משני הצ'קבוקסים האלה, נבצע פיניש, נסדר טיפה את הקוד, ניפטר כאן מכל השורות המיותרות כמו תמיד, ואנחנו יכולים לגשת לליאאוט של הפרגמנט, Animal List Fragment, ולראות מה אנחנו צריכים לבצע פה בכדי לעצב את הליאאוט כמו שצריך.

3. 00:54

   אז בואו ניקח איזה שהוא לינאר ליאאוט, ניפטר מאלה, נגדיר אותו כ-Orientation Vertical, למרות שזה פחות משנה, אבל זה משהו שהוא מאוד נפוץ.

4. 01:11

   ואנחנו רוצים ListView, כאשר בואו נבצע כבר את הפרגמנט שלנו כ-ListFragment. אז נגדיר אותו כ-MatchParent ו-RapContent. ניתן לו את ה-ID strudelAndroid.2 id slash list.

5. 01:37

   פטר מזה רק. ומה שאנחנו רוצים זה לגשת לפרגמנט עצמה, ולרשת את listFragment. אנחנו רוצים את ה-SupportLibrary, ופה למעלה אנחנו יכולים כבר להגדיר את ה-ArrayList, מסוג Animal, נקרא לו Animals, ונכניס לתחור את ה-Repository, GetAnimals.

6. 02:12

   כעת אנחנו רוצים להכלס את האדפטר, וראינו שכדאי לעשות את זה ב-onCreate. נשאיר את הקריאה לסופר. ניצור Animals Adapter. שווה New Animals Adapter.

7. 02:31

   ניתן לו את הקונטקסט שלנו ואת רשימת ה-Animals. ונכניס אותו לתוך ה-List. Set List Adapter. Animals Adapter.

8. 02:42

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

9. 03:19

   ניגש ונעשה קסטינג לכל באקס של GetActivity. ואז אנחנו יכולים לקרוא ל-OnItemClick, ומהאוסף של האנימלס לקבל לפי הפוזישן את האנימל שלחצו עליו. ופה למעשה סיימנו את ה-ListFragment שלנו.

10. 03:46

    אנחנו יכולים בשלב הזה לגשת ולצרף את הפרגמנט שמציגה Details. יש לנו פה Fragment ונקרא לפרגמנט Animal Details Fragment. בואו נצרף אותה, נלחץ על Finish, כמו תמיד ננקה טיפה את הקוד, יש לנו כאן את ה-onCreateView, שאנחנו כבר הולכים להשתמש איתו, אבל לפני זה בואו ניגש ונבנה את ה-layout עצמו.

11. 04:27

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

12. 04:50

    אנחנו רוצים שיהיה לנו איזה שהוא TextView, ניקח Wrap Content, נגדיר רק שהכל נמצא במרכז Gravity, ניתן Center Horizontal, ככה שכל המידע יישב בדיוק במרכז של המסך בחינה הוריזנטלית, אנחנו חייבים ID, מפני שהמידע צריך להיכנס בצורה דינמית, TextView, והTextView הראשון זה

13. 05:22

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

14. 05:45

    טקסט size בוא נגדיר גדול יחסית 30 SP. ניתן איזשהו טקסט קולור, אותו הדבר כמו שהענו מקודם, red, green, blue. ויש לנו כאן טקסט puppy, כאשר שוב פעם נחליף לטולז puppy.

15. 06:08

    והנה יש לנו קודם כל את הכותרת. הדבר הבא שאנחנו רוצים זה scroll view, מפני שהמלל יכול להיות רב מדי ואנחנו נרצה איזושהי גלילה. ניתן כאן match parent, גם פה ניתן margin של 10 dp, ואנחנו רוצים פה text view.

16. 06:37

    הטקסט view שאנחנו רוצים גם הוא match parent, שהיא תפוס הכל, חובה id, נגדיר לו text view description, ואנחנו רוצים TextSize ניקח רק 20 SP ו Tools Text ניתן איזושהי מכרוזת ולצורך כך בואו נעצר לעצמנו איזושהי מכרוזת ב-Strings בדיוק פה אנחנו יכולים להוסיף עוד מכרוזת זה תמיד אפשר להיפטר כי

17. 07:19

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

18. 07:44

    עכשיו, שימו לב רק שאם יש לכם מכרוזת שנמצאת בתוך הסטרינגס, אז אנחנו צריכים to escape special characters. אז מה זה אומר? זה אומר שאם יש לנו לדוגמה גרש, ואתם רואים שפה יש לנו איזה שהוא גרש, אנחנו צריכים לבצע backslash לפני הגרש הזה, כי אחר את זה יהיה לנו שגיעת קומפילציה.

19. 08:09

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

20. 08:34

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

21. 08:56

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

22. 09:34

    הזה, אז מה שכדאי לבצע זה כמה דברים. דבר ראשון, הרכיבי UI שלנו