Orientation Based Fragment in Code

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

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

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

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

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

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

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

תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.

Orientation Based Fragment in Code

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

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

1. קונטיינרים במקום תגיות fragment: ב-layout של הפורטרייט יש FrameLayout אחד בשם frameLayoutContainerText. ב-layout של הלנדסקייפ יש שניים, אחד לטקסט ואחד לתמונה, כל אחד ברוחב 0dp עם weight 1.

2. אותו ID בשני הקבצים: ל-FrameLayout של הטקסט חייב להיות אותו ID גם בפורטרייט וגם בלנדסקייפ, כדי שהקוד יפנה אליו בלי קשר לאוריינטציה.

3. הטקסט תמיד: אם savedInstanceState הוא null, יוצרים TextFragment ומוסיפים אותה לקונטיינר של הטקסט עם beginTransaction, add ו-commit.

4. בדיקת אוריינטציה בצורה אלגנטית: במחלקת MyApp (שיורשת Application ומוגדרת במניפסט) כותבים שתי פונקציות סטטיות, isPortrait ו-isLandscape, שבודקות getContext().getResources().getConfiguration().orientation.

5. תמונה רק בלנדסקייפ: אם MyApp.isLandscape(), מחפשים עם getSupportFragmentManager().findFragmentById אם ImageFragment כבר נוספה. אם התוצאה null, יוצרים ImageFragment חדשה ומוסיפים אותה לקונטיינר של התמונה.

6. בדיקה: בפורטרייט רואים רק טקסט, ובמעבר ללנדסקייפ רואים גם תמונה, וחוזרים חלילה.

שימו לב

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

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

פרקי ההרצאה: Orientation Based Fragment in Code

תמלול ההרצאה: Orientation Based Fragment in Code

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

00:01
אחרי שראינו איך אנחנו יכולים להשתמש ב-Fragments בכדי להציג ממשק משתמש דומה בין Portrait לבין Landscape, בואו נראה איך אנחנו יכולים לבצע בדיוק את אותו הדבר, אבל איך אנחנו יכולים לעשות את זה על ידי הוספת ה-Fragments בצורה דינמית בקוד.
00:18
דבר ראשון, במקום התגיות של ה-Fragments, אנחנו צריכים להגדיר תגיות של layout כלשהן שיאבו קונטיינר. בואו נשתמש כמו שהשתמשנו בעבר, ב-Frame Layout.
00:31
אז יש לנו פה תגיד frame layout, ואנחנו רוצים match parent, אנחנו רוצים שה-ID שלה תייצג את ה-frame layout, בואו נקרא לזה frame layout container, אבל עבור הטקסט, ואין לנו שום צורך בנים ובתגיד layout הזאת, בפרופרטי של ה-layout, והדבר הבא שאנחנו רוצים זה לבצע בדיוק את אותו הדבר,
01:00
אבל עבור ה-landscape, אז בואו ניגש ל-landscape שלנו, תגיד ראשונה frame layout, אנחנו רוצים גם כן width fsdp, height match parent, id, אנחנו רוצים את אותו ה-id בדיוק, בואו ניקח בדיוק את אותו ID ונשים אותו פה, זאת נקודה מאוד חשובה, זה חייב להיות אותו ID.
01:26
ה-width אנחנו רוצים אחד, ואת שני אלה אנחנו רוצים להיפטר מהם. בואו נבוצע בדיוק את אותו הדבר גם פה למטה, ונשנה את זה ל-ID של Frame Layout Container Image, וכעת הרגענו לעצמנו את הממשק משתמש ב-Layouts של האקטיביטי, כך שהאקטיביטי של הפורטריט יציג לנו רק פריים layout אחד ויחיד שמיועד להציג את הפרגמנט של הטקסט
02:02
והלהאוט של האקטיביטי עבור ה-landscape מציג לנו שני פריים layout, אחד עבור הטקסט והשני עבור ה-image מה שאנחנו רוצים לעשות עכשיו זה במיין אקטיביטי אנחנו רוצים בצורה דינמית לטעון את הפרגמנט ולהוסיף אותם לקונטיינרים האלה וזה בעצם משהו שהוא מאוד נפוץ הרבה יותר נפוץ ליצור פרגמנט במהלך הריצה מאשר להשתמש באיזושהי תגית פרגמנט
02:33
אבל אנחנו ראינו גם את זה ועכשיו אנחנו הולכים לראות גם את זה אז איך עושים את זה? דבר ראשון, אנחנו רוצים בכל מקרה להציג את הטקסט פרגמנט בין אם אנחנו בפורטרט ובין אם אנחנו בלנסקייפ אבל אנחנו רוצים ליצור אובייקט חדש ולצרף אותו רק בהרצאה הראשונה.
02:53
אז אם ה-saved instance state הוא null, עשינו את זה כמובן הרבה פעמים בעבר, בואו ניצור text fragment, הנה יש לנו אובייקט חדש מסוג text fragment, ובואו ניגש ל-get support fragment manager, נבצע בגין טרנסקשן, נוסיף RID Frame Layout Text ושימו לב שבכוונה לקחנו את אותו ID גם לפורטריט וגם ללנסקייפ כי זה לא משנה אם אני מריץ את
03:26
האפליקציה בפורטריט או לנסקייפ אני מתייחס לאותו ה-ID בדיוק ושמה אני מציג את הטקסט פרייגמנט שיצרנו כרגע בואו נבצע קומית והנה יש לנו עכשיו הצגה של הטקסט בכל מקרה זאת אומרת, גם אם אנחנו בפורטריט, גם אם אנחנו בלנסקייפ, אנחנו מציגים פעם אחת את הטקסט פרגמנט.
03:52
כעת, בלי קשר, אנחנו רוצים לבדוק האם אנחנו בלנסקייפ או האם אנחנו בפורטריט. למה? כי אם אנחנו בלנסקייפ, אז רק אנחנו רוצים להציג את האימג' פרגמנט. אז איך אני יודע אם אני בלנסקייפ או בפורטריט?
04:10
אז ראינו בעבר שיש לנו אפשרות לגלות את זה דרך הקוד, וכעת אנחנו הולכים לעשות את זה בשיטה קצת שונה ממה שעשינו בעבר. בעבר עשינו את זה על ידי איזה שהן פונקציות שכתבנו ב-main activity, וקיבלנו את הפונקציה get configuration, בעצם זה היה getResources.getConfiguration,
04:37
ודרכה בעצם הצלחנו לקבל את האוריינטיישן, ולפי זה ידענו מה לעשות. אבל בואו נראה איך אנחנו יכולים להוציא את זה החוצה כך שזה יהיה טיפה יותר אלגנדי כזה. במקום שזה יהיה בתוך המיין אקטיביטי, בואו נבצע את זה ב-MyUp.
04:58
מי-אפ זה בעצם מחלקה שכתבנו בעבר, שמאפשרת להגדיר קונטקסט גלובלי כזה. מי-אפ יורשת את אפליקיישן, בתוך המאניפסט הגדרנו שקובץ המאניפסט שלנו בעצם מתייחס למי-אפ שלנו בתור האפליקציה, והיא כמובן יורשת את אפליקיישן, הדבר הזה מאפשר לנו להגדיר קונטקסט גלובלי שאנחנו יכולים להשתמש איתו.
05:28
לכן באותה מחלקה בדיוק אנחנו יכולים להוסיף פונקציות סטטיות שמחזירות בוליאן והפונקציה הראשונה נקראת isPortrait ואומרת