קבלת מידע בחזרה מ-Fragment

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

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

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

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

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

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

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

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

קבלת מידע בחזרה מ-Fragment

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

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

1. יצירת הפרגמנט: מוסיפים Fragment (Blank) בשם images-fragment ומנקים את הקוד המיותר. ב-layout מגדירים LinearLayout אופקי עם ארבעה ImageButton (בני, Duckling, Kitten, Puppy), כל אחד עם רוחב 0dp, גובה 80dp, weight 1 ו-scale type fitXY.

2. איתור הכפתורים: ב-onCreateView שומרים את ה-layout בתור layoutRoot, ודרכו קוראים ל-findViewById לכל אחת מארבע התמונות, ובסוף מחזירים את ה-layoutRoot.

3. האזנה ללחיצות: הפרגמנט עצמה מממשת את OnClickListener ונרשמת לכל ארבעת הכפתורים. ב-onClick מבצעים switch לפי v.getId() כדי לדעת איזו תמונה נלחצה.

4. ממשק Callbacks: בתוך הפרגמנט מגדירים אינטרפייס Callbacks עם פונקציה אחת, onImageClicked(int imageId).

5. הגעה לאקטיביטי: קוראים ל-getActivity(), בודקים עם instanceof שהיא מממשת את Callbacks, עושים casting וקוראים ל-onImageClicked עם ה-ID של התמונה ב-R.drawable.

6. צד האקטיביטי: ב-layout יש FrameLayout כקונטיינר ו-ImageView גדול. הקוד מוסיף את הפרגמנט רק כש-savedInstanceState הוא null (בלי newInstance, כי אין מידע להעביר), והאקטיביטי מממשת את ImagesFragment.Callbacks.

7. הצגת התמונה: ב-onImageClicked האקטיביטי קוראת ל-setImageResource על ה-ImageView עם ה-ID שהתקבל. בהרצה, כל לחיצה מציגה את התמונה המתאימה בגדול.

פקודות והגדרות

getActivity(), instanceof, findViewById, setImageResource, getSupportFragmentManager().beginTransaction().add(...) ו-commit.

שימו לב

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

אחרי ההרצאה אפשר להעביר מידע מפרגמנט לאקטיביטי שמכילה אותה באמצעות אינטרפייס callbacks.

השיעור הבא בקורס: Find Fragment By ID

פרקי ההרצאה: קבלת מידע בחזרה מ-Fragment

תמלול ההרצאה: קבלת מידע בחזרה מ-Fragment

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

00:00
כאשר אנחנו עובדים עם Fragments, יכול להיות מצב שבו אנחנו רוצים שהFragments תשלח מידע לעולם החיצון. לדוגמה, לאקטיביטי שמשתמשת בה. אולי כי אנחנו רוצים שהמידע הזה יוצג באקטיביטי או יגיע לאקטיביטי והאקטיביטי תשתמש בו באיזושהי צורה.
00:21
אולי כי אנחנו רוצים להעביר את המידע הזה לאקטיביטי בכדי שהאקטיביטי תעביר את המידע הזה לפרגמנט אחר, יש כל מיני סיבות לבצע את זה. אז איך בדיוק אנחנו יכולים להעביר מידע מהפרגמנט לאקטיביטי שמשתמשת בפרגמנט?
00:38
הרי אם האקטיביטי מכילה בתוכה את הפרגמנט, ברור שהאקטיביטי מכירה את הפרגמנט, וכך יכולה לשלוח למידע. עשינו את זה בסרטון הקודם. אבל אם הפרגמנט נמצאת בתוך האקטיביטי, הפרגמנט לא מכירה את האקטיביטי.
00:55
אז איך בדיוק הפרגמנט יכולה להעביר מידע לאקטיביטי? אז בסרטון הזה אנחנו הולכים לצרף איזושהי פרגמנט שהולכת לקבל מידע מהיוזר על ידי איזושהי בחירה מסוימת, ולהעביר את המידע הזה לאקטיביטי שהיא מוכלת בתוכה.
01:15
האקטיביטי תשתמש במידע הזה. אז בואו נצרף פרגמנט חדשה, נבצע add, פרגמנט, נבחר פרגמנט בלנק, ואנחנו רוצים פרגמנט שתציג מידע לגבי תמונות.
01:32
אז בואו נקרא ל-images-fragment, ניפטר משני החבר'ה האלה, נבצע finish, והנה אנחנו רואים את קוד ה-Java של ה-fragment, בואו טיפה, ננקה אותו, עם constructor רקע אנחנו חייבים, אבל אם אין לנו אז אוטומטית הוא נוצר, בואו ניפטר מהשואר רקע הזאת והזאת, וכעת אנחנו יכולים לגשת ל-fragment layout, ולעצב את ה-layout כמו שאנחנו רוצים.
02:09
אז מה שאנחנו רוצים לעשות זה להכיל כאן מספר תמונות. אז בואו נגדיר כאן linear layout, וניפטר מזה, וניפטר מזה, והlinear layout אמורה להיות הוריזונטלית, וזה הדפולט, ניפטר מזה, ופה אנחנו רוצים שיהיה לנו מספר תמונות.
02:39
אנחנו רוצים שניתן יהיה ללחוץ על התמונות האלה. אז בואו נגדיר את התמונות כ-image button, שאז המשתמש יוכל לראות בעצם שהוא לוחץ על תמונה.
02:50
עכשיו, בגלל שאנחנו רוצים להציג את זה בצורה אופקית, אז בואו נגדיר 0 dp לרוחב, נגדיר 80 dp לגובה, נגדיר איזשהו id לתמונה, image, button, התמונה הראשונה שנוצגת יש של בני.
03:17
נגדיר weight 1, נגדיר scale type fit xy, ולבסוף התמונה עצמה נמצאת בתוך drop-on, והיא נקראת בני. אנחנו רוצים 4 כאלה, אז הנה 1, 2, 3 ו-4, כאשר אנחנו רוצים להחליף את התמונות עצמם ואת ה-id.
03:48
יש לנו כאן Duckling, יש לנו כאן Kitten, ובואו נגדיר כאן את הפאפי הידוע שהיה לנו. והנה יש לנו עכשיו Fragment שמכילה ארבע תמונות. מה אנחנו רוצים לעשות?
04:16
אנחנו רוצים להציב את הפרגמנט הזאת על האקטיביטי, ואנחנו רוצים לאפשר למשתמש ללחוץ על תמונה. ברגע שהמשתמש לוחץ על התמונה, אנחנו רוצים להעביר לפארנט אקטיביטי שלנו איזו תמונה המשתמש לחץ עליה.
04:31
ואז מה שאנחנו רוצים לעשות בפרנט אקטיביטי זה להציג את התמונה בגדול. בשביל זה אנחנו צריכים שהפרגמנט תעביר את המידע למין אקטיביטי. אז איך הפרגמנט יכולה לעשות את זה?
04:44
אז דבר ראשון מה שאנחנו צריכים לעשות זה להיכנס לקוד של הפרגמנט ובואו נחלק את השורה הזאת לשני חלקים. חלק ראשון אנחנו רוצים את ה-Linear Layout. בואו נגדיר פה Linear Layout, Linear Layout, Root.
05:01
זה בעצם תגיד את השורש של ה-Fragment, של ה-Layout של ה-Fragment, וכמו שהשתמשנו בה, זאת הייתה Linear Layout. כאן בסוף, בסוף, בסוף, אנחנו רוצים להחזיר את ה-Layout Root.
05:16
כעת אנחנו רוצים להשיג את ארבעת אובייקטי ה-Image Button. אז בואו ניקח את ה-Image Button הראשונה שהייתה בני. נלך ל-Image Button, בצורה כזאת.
05:35
דרך ה-Linear layout root, אנחנו רוצים לפנות ל-FindViewByID, ולתת R, ID, Image, Button, והתמונה הראשונה הזאת הייתה בני. נשכפל, 2, 3, 4, אחרי הבני, היה לנו Duckling, ובואו נגדיר כאן שהתמונה היא Duckling, ה-ID basically, ולאחר מכן היה לנו kitten, נגדיר שה-ID שאנחנו מחפשים הוא kitten,
06:16
ולבסוף puppy, ונגדיר כאן שה-ID הוא puppy. אחרי שיש לנו את ארבעת הרכיבים, אנחנו יכולים לגשת לכל אחד מהם, image button, נתחיל עם הבני, ו-to register on click listener.
06:38
בואו ניתן את הפרגמנט עצמה ככזאת שמממשת את האינטרפייס, נלחץ Alt Enter, Make Images Fragment Implement, On Click, Listener. יש לנו פה את האירוע On Click, נגיד לו בסדר.
06:53
הנה אנחנו רואים פה למעלה את האימפלמנט של האינטרפייס, והנה On Click. נשכפל את השורה הזאת, כך שכל אחת מהתמונות תעלה את אותו אירוע.