שימוש ב-Fragment בעזרת XML

בלי כתוביותעם כתוביות

מילון מושגים:

Fragment - ב-Android, רכיב ממשק הניתן לשימוש חוזר בתוך Activity, שמייצג חלק ממסך או התנהגות.

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

Activity - ב-Android, רכיב שמייצג מסך יחיד של האפליקציה שאיתו המשתמש מתקשר.

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

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

root - משתמש העל במערכות Linux, בעל הרשאות מלאות לכל פעולה. גם הרמה העליונה בעץ של תיקיות או נתונים.

Android - מערכת הפעלה מבוססת Linux לטלפונים ולמכשירים ניידים, שפותחה על ידי גוגל.

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

שימוש ב-Fragment בעזרת XML

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

השלבים העיקריים

1. יצירה: בתיקיית app לוחצים מקש ימני, New, Fragment, Fragment (Blank), ונותנים שם (BunnyFragment). מבטלים את אפשרויות הקוד המוכן כדי לקבל פרגמנט נקייה, ונוצרים קובץ Java וקובץ layout.

2. ה-layout: מחליפים את ה-FrameLayout שנוצר ב-LinearLayout אנכי עם ImageView של בני (עם margin), ו-TextView בגודל 25 בתוך ScrollView שמאפשר גלילה של טקסט ארוך. כל המידע כאן סטטי.

3. הקוד: ב-onCreateView מקבלים LayoutInflater, container ו-savedInstanceState. מפעילים inflate על ה-layout, שומרים את התוצאה ב-linearLayoutRoot עם casting ומחזירים אותה. אם צריך לעדכן רכיבים פנימיים, משתמשים ב-findViewById על ה-root.

4. פרגמנט שנייה: PuppyFragment נוצרת בשכפול הקוד וה-layout של בני, עם תמונה וטקסט של פאפי.

5. במיין אקטיביטי: מוסיפים תגיות fragment עם wrap_content. שלושה attributes: id (חובה גם אם לא משתמשים בו בקוד), name (שם המחלקה של הפרגמנט, חובה) ו-tools:layout (לא חובה).

6. שכפול: אפשר לשכפל את התגית ולהציג כמה פרגמנטים שרוצים על אותו אקטיביטי, עם ID, שם ו-layout שונים. בהרצה רואים את הטקסט של האקטיביטי ואת שתי הפרגמנטים.

שימו לב

- tools:layout משמש רק את הדיזיינר. בלעדיו רואים בדיזיינר תגית ריקה, אבל בהרצה הפרגמנט מופיעה.

- יש להשתמש ב-Fragment מ-Android Support v4 ולא מ-android.app. הספרייה מאפשרת הצגה על מכשירים ישנים, ובמקרים מסוימים הפרגמנט המקורית לא תעבוד כמו שצריך.

בהרצאה הבאה נראה איך לטעון פרגמנט דינמית מהקוד.

השיעור הבא בקורס: שימוש ב-Fragment בצורה דינמית בקוד

פרקי ההרצאה: שימוש ב-Fragment בעזרת XML

תמלול ההרצאה: שימוש ב-Fragment בעזרת XML

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

00:02
הדבר הראשון שאנחנו הולכים לראות זה איך לצרף פרגמנט ואז להציג את הפרגמנט על ידי תגיד פרגמנט בתוך ה-XML. כדי לצרף פרגמנט אנחנו צריכים ללכת לרמת האפליקציה עצמה בתקיית אפ, ללחוץ מקש ימני, new ולבחור פרגמנט ופרגמנט blank.
00:27
לאחר מכן אנחנו נותנים שם לפרגמנט. הפרגמנט הראשונה שאנחנו הולכים לבנות זה פרגמנט שפשוט נציגה מידע לגבי בני. אז בואו נקרא לפרגמנט בני פרגמנט. בגלל שהפרגמנט מציגה UI, אז אנחנו רואים שיש לנו כבר layout של הפרגמנט שנקראת fragment underline bunny.
00:49
זה בסדר. אנחנו רוצים אבל ברוב המקרים להוריד את הוויזה אלה בכדי לקבל פריגמנט רקע בלי כל מיני קודים מוכנים בתוכה.
01:02
בואו בשלב הזה נלחץ finish ומה שאנחנו מקבלים זה גם קוד Java עבור הפריגמנט וגם קוד layout עבור הפריגמנט. הנה יש לנו כאן את קוד ה-Java ואם אנחנו מסתכלים אנחנו רואים כאן את ה-layout של הפריגמנט.
01:21
אז דבר ראשון, מה שאנחנו רוצים לעשות זה קודם כל לגשת ולעצב את ה-layout של הפרגמנט. מה הם הרכיבים הויזואליים שאנחנו רוצים לראות על גבי הפרגמנט? אז אנחנו רואים שב-default אנחנו מקבלים frame layout ואין שום בעיה לגשת ולשנות את זה לכל layout שאנחנו רוצים.
01:46
בואו נגדיר כאן linear layout הסטנדרטית שאנחנו מכירים. נפטר רגע מזה ונפטר מזה, נגדיר כאן את הסגירה, בואו נפטר מכל התוכן שאוטומטית קיבלנו, נגדיר שהלארט שלנו הוא orientation vertical ונגדיר כאן תמונה, בואו ניקח תמונה של match parent וניקח wrap content וניתן לה איזשהו margin שתהיה קצת בנפרד,
02:27
מהUIs האחרים ויש לנו פה source בדרובול יש לנו בני. הדבר הבא שאנחנו רוצים זה איזה שהוא text view ואנחנו רוצים match parent וrap content, text size, בואו ניקח
02:52
25 ובואו נגדיר את הטקסט כי יש לנו strings, בני ויש לנו פה טקסט לגבי בני יכול להיות שבהמשך אנחנו נחליף את הטקסט הזה ולכן נגדיר כאן scroll view שבמידה והטקסט תהיה טקסט רב אנחנו נוכל לגלול אותו.
03:17
בואו נגדיר match parent וrap content וניתן גם לו איזה שהוא margin של 10 dp ואת הטקסט view נשים בתוכו. וכרגע כל המידע זה מידע סטטי שממש מוגדר בתוך ה-layout.
03:38
אז אחרי שהגדרנו את הלארד שלנו וככה הפריגמנט נראית, אז אנחנו יכולים לגשת לקוד של ה-Java של הפריגמנט. בקוד של ה-Java אנחנו יכולים להיפטר פה מכל מיני דברים, יש לנו constructor rec, אנחנו צריכים constructor rec או default constructor, אבל אם אנחנו נוריד אותו אז זה אותו הדבר, המערכת מייצרת לנו constructor כזה.
04:03
בואו נשים את זה בצורה כזאת, ובואו נבין מה יש לנו כאן מול העיניים. אז אנחנו רואים אוטומטית את הפונקציה OnCreateView שמתבצעת אוטומטית, כאשר אנחנו שמים את הפרגמנט על אקטיביטי במסגרת הפרגמנט Lifecycle.
04:27
והתפקיד של הפונקציה הזאת זה לבנות את ה-UI ולהחזיר את ה-Layout הראשי. קודם כל, מה אנחנו בעצם מקבלים לפונקציה? Layout Inflator זה בעצם אובייקט שמאפשר לנו to inflate the layout.
04:43
אנחנו כבר רואים כאן את ה-layout עצמו שאנחנו בנים מקודם. Container זה אותו רכיב שבתוכו אנחנו הולכים לשים את הפרגמנט. כאן נראה שזה יהיה חלק מהאקטיביטי.
04:58
כאן אנחנו מקבלים saved instant state בכדי לשחזר את ה-state של הפרגמנט. כמובן כאשר ה-user מבצע שינוי אוריינטציה, יכול להיות שכל ה-state של הפרגמנט נהרס, ואנחנו נרצה בהמשך לשחזר אותו.
05:18
בואו נחלק את השורה הזאת לשני חלקים. חלק ראשון נבנה linear layout, נקרא לו linear layout root, ונכניס לתוכו את מה שהאינפלייטר מחזיר בואו נבצע פה הקאסטינג ל-LinearLayout והדבר הבא זה נחזיר את ה-LinearLayoutRoot רק בכדי להבין מהם שתי השורות שהתבצעו כאן מה שקורה כאן זה שהאינפלייטר מבצע אינפלייט ל-FragmentBunny Layout ומה שהוא מחזיר לנו זה את ה-RootTag שיש פה
05:57
אנחנו רואים שזה LinearLayout לכן אנחנו יכולים להיות בטוחים שאנחנו הולכים לקבל ליניאר ליארט אם אנחנו עכשיו רוצים להדכן רכיבים פנימיים בתוך הליניארט רות האלה אז אנחנו יכולים to find view by ID כל רכיב פנימי שנמצא בתוך הליארט ולהדכן אותו להכניס לתוכו איזה מידע שאנחנו רוצים ולבסוף אנחנו מחזירים מאון
06:20
create view את הליניאר ליארט רות זה בעצם כל מה שאנחנו צריכים לעשות לגבי הבני פרגמנט. שימו לב רק שהפרגמנט מגיעה כרגע בימים אלו מ-Android Support v4 פרגמנט, כאשר יש עוד פאקאג' והפאקאג' הזה נקרא android.app.
06:51
ויש לנו שם את הפרגמנט. וזה בעצם הפרגמנט הראשונה שיצאה לעולם, באיזשהו שלב יש לנו כאן את הספורט לייבררי שמאפשרת