Orientation Based Fragment in XML

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

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

1. 00:00

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

2. 00:20

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

3. 00:49

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

4. 01:14

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

5. 01:33

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

6. 01:59

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

7. 02:11

   נגדיר בלאאוט שאנחנו, בעצם frame layout זה בסדר. ומה שאנחנו רוצים לעשות זה להגדיר לעצמנו פה איזשהו scroll view. נגדיר אותו כ-match parent, בתוכו אנחנו רוצים text view, יש לנו פה גם כן match parent, אנחנו רוצים להציג text size 20, ובואו ניקח text דומה למשהו שעשינו בעבר, כאשר היינו דוגמה ממש דומה לדוגמה הזאת,

8. 02:52

   והצגנו שם דג זהב, נתונים לגבי דג זהב ותמונה של דג זהב יש לנו עכשיו את הפרגמנט הראשונה שמציגה אך ורק טקסט הפרגמנט השנייה תציג לנו תמונה, בואו נצרף אותה ונקרא לה ImageFragment נבצע Finish, נסדר טיפה את הקוד, אותו הדבר כמו מקודם למעשה נגדיר את זה בצורה כזאת, בצורה כזאת, good, ניגש

9. 03:30

   לפרגמנט layout ונוריד פה את כל מה שאנחנו לא צריכים ובמקום הטקסט view הזה נציג כאן image view, הimage view מגדירה לנו כmatch parent, מוגדרת כmatch parent ו-SRC, בתוך דרובל יש לנו את הגולד פיש.

10. 04:00

    מאול עכשיו, בואו רק נזיז את זה טיפה, עם tab, ואנחנו רוצים עכשיו לראות איך אנחנו יכולים להציג את זה על האקטיביטי. אז מה שאנחנו יכולים לעשות זה באקטיביטי הראשונה, Activity Main, אנחנו רוצים שזאת תהיה האקטיביטי הדפולט עבור Portrait, כאשר הטלפון הוא במעונח.

11. 04:24

    ומה שאנחנו רוצים לבצע זה פשוט מאוד תגית פרגמנט, בואו נתחיל פשוט עם תגית פרגמנט פשוטה, אז ניקח את התגית פרגמנט, נגדיר match parent, ונגדיר לעצמנו את הדברים שהיינו אמורים להגדיר בתגית id, נקרא לזה text fragment, ויש לנו כאן את ה-name, ה-name היה text fragment גם כן, ולאחר מכן יש לנו את

12. 04:58

    ה-Layout, ה-Layout נמצא בתוך Tools, נקודותיים, Layout, ובואו ניתן לו, נגדיר רק את ה-Namespace פה למעלה, ויש לנו בתוך תקיית ה-Layout את ה-Fragment Text בצורה כזאת, והנה כבר אנחנו רואים שאם ה-User מריץ ומציג את הטלפון שלו בצורת פורטריט, זה מה שהוא רואה.

13. 05:26

    מה שאנחנו רוצים לעשות זה לשכפל את זה כך שיהיה לנו עוד main activity, אבל main activity השנייה היא תהיה בשביל landscape. איך עשינו את זה בעבר?

14. 05:38

    יש לנו פה את הדיזיינר, ואנחנו יכולים to create landscape version בצורה הזאת, והוא כמובן משכפל לנו את זה, ומציג לנו את הכל אותו הדבר.