PracticU

Orientation Based Layout

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Orientation Based Layout
מילון מושגים:
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
Activity - ב-Android, רכיב שמייצג מסך יחיד של האפליקציה שאיתו המשתמש מתקשר.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
תיקייה - מכל במערכת הקבצים שמשמש לארגון קבצים ותיקיות אחרות בתוך מבנה היררכי.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
אמולטור - תוכנה שמחקה מכשיר או סביבה אחרת, למשל כדי להריץ ולבדוק אפליקציית מובייל על המחשב.

Orientation Based Layout
לפעמים רוצים שהאפליקציה תציג למשתמש מסך שונה כשהמכשיר עובר מ-Portrait ל-Landscape. ההרצאה מזכירה איך מכינים layout נפרד לכל אוריינטציה, כי נשתמש בזה בסרטונים הבאים.
בניית הדוגמה
1. ה-layout הרגיל: ב-activity_main יש TextView עם match_parent לרוחב ולגובה, גודל טקסט 20SP, ובתוכו טקסט ארוך מתוך ה-strings בשם goldfish. הוא עטוף ב-ScrollView כדי שאפשר יהיה לגלול.
2. המטרה ב-Landscape: הטקסט בצד אחד והתמונה של דג הזהב בצד השני.
שתי דרכים ליצור layout ל-Landscape
1. קובץ חדש ידנית: לחיצה ימנית על תיקיית ה-layout, ואז New layout resource file. השם חייב להיות זהה לקובץ המקורי, כלומר activity_main. מוסיפים את ה-qualifier בשם Orientation ובוחרים Landscape. נוצרת תיקייה בשם layout-land, והקובץ שבה נכנס לתוקף במקום המקורי כשהמכשיר ב-Landscape.
2. מהמעצב: בכפתור של ה-Design בוחרים Create Landscape Version. התיקייה והקובץ נוצרים אוטומטית עם עותק של התוכן, ורק אחר כך משנים אותו. זו הדרך הנוחה יותר.
השינויים ב-layout של Landscape
1. כיוון: מורידים את ה-orientation האנכי, כך שנשאר ברירת המחדל, אופקי.
2. ה-ScrollView: רוחב 0dp, גובה match_parent ו-layout_weight של 1. מוסיפים גם scrollbars אנכי, ושווה לעשות זאת גם ב-layout הרגיל.
3. ה-ImageView: רוחב 0dp, גובה match_parent, layout_weight של 1 ו-src מתוך drawable. כל רכיב תופס 50% מהרוחב.
בדיקה
באמולטור, Ctrl+F12 מחליף בין ה-layout הרגיל ל-layout של Landscape. במכשיר אמיתי נראה אותו דבר בסיבוב. ל-Reverse Portrait ול-Reverse Landscape אפשר להגדיר layouts נוספים, אבל כאן לא היה בכך צורך.
כך מציגים layouts שונים לפי האוריינטציה של המכשיר.
השיעור הבא בקורס: The Activity State Problem

פרקי ההרצאה: Orientation Based Layout

  1. 00:00

    Layout שונה לפי אוריינטציה

  2. 00:40

    טקסט ארוך בתוך ScrollView

  3. 01:43

    תכנון תצוגה אופקית עם תמונה

  4. 02:19

    קובץ Layout עם Qualifier של Orientation

  5. 03:15

    התיקיות layout ו-layout-land

  6. 04:13

    מחיקת הקובץ ומעבר לשיטה השנייה

  7. 04:53

    Create Landscape Version בדיזיינר

  8. 05:49

    עריכת ה-Layout האופקי

תמלול ההרצאה: Orientation Based Layout

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

  1. 00:02

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

  2. 00:22

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

  3. 00:40

    בואו ניקח כאן איזשהו Text View ופשוט נציג לו טקסט רגיל. ניקח Match Parent, ניקח Match Parent גם ל-Height, נגדיר שה-Text Size שלנו הוא 20 SP וניתן לו טקסט רב שהכנתי מבעוד מועד והוא נמצא בתוך ה-Stream.

  4. 01:08

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

  5. 01:22

    יש לנו פה match parent, match parent, ובתוך ה-Scroll View אנחנו רוצים להציג את הטקסט, וכך היוזר יכול to scroll down ולראות את כל הטקסט.

  6. 01:41

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

  7. 02:04

    שאנחנו צריכים לעשות זה לשכפל את הלאוט הזה ולהוסיף תמונה או להגדיר כל מיני הגדרות נוספות יש שתי שיטות לעשות את זה בואו נראה את שיטה ראשונה פשוט מקש ימני על תיקיית הלאי-אאוט – New – Layout Resource File ואז להגדיר את ההגדרות הדרושות עבור הלאי-אאוט

  8. 02:26

    הנוסף. השם של הלאי-אאוט חייב להיות אותו השם בדיוק של הלאי-אאוט הקודם שזה Activity Main בואו נרשום כאן Activity_Main לאחר מכן נשאיר את הרוט אלמנט, נשאיר את ה-Resource Set, דירקטורי לאאוט ואנחנו רוצים ב-Available Qualifier להגדיר אוריינטיישן ואז להגדיר שאנחנו רוצים במקום פורטרייט לאנסקייפ ואז אנחנו רואים

  9. 02:57

    שהדירקטורי name הופכת להיות לאאוט land במקום לאאוט ואומר שאם אנחנו נמצאים ב-Layout Landscape אוטומטית הקובץ הזה שאנחנו הולכים לבנות עכשיו נכנס לתוקף במקום הקובץ הקודם.

  10. 03:13

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

  11. 03:43

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

  12. 04:05

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

  13. 04:30

    ונמחק לגמרי את התיקייה layout-landscape שכרגע כמובן אין בכלום כי מחקתי את הקובץ ממנה, ויש לנו כרגע שוב פעם תמונה דיפולטית של רק layout אחד.

  14. 04:44

    אז מה היא השיטה השנייה והקצת יותר נוחה לביצוע של layout נוסף, עבור landscape אז בעצם מה שאנחנו צריכים לעשות זה להציג את הדיזיינר ולהגיש את ללחצן הזה ובלחצן הזה אנחנו רוצים לבחור ב-create landscape version למעשה יש לנו את זה גם כאן אפילו לא היינו צריכים לעבור לדיזיינר בחלונית הדיזיין create landscape version

  15. 05:13

    והיתרון של השיטה הזאת ואוטומטית לא רק נוצרת לנו תיקייה ונוצר בתוכה קובץ Landscape אנחנו יכולים לראות את זה ממש אם אנחנו נציג את זה באקספלורר.

  16. 05:29

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

  17. 05:51

    אז מה שאנחנו רוצים זה קודם כל ב-Landscape Layout, שימו לב שאנחנו גם רואים את זה כאן בצורת Landscape, אנחנו רוצים להוריד את התצוגה הוורטיקלית ולהציג את ה-Layout הזה ב-Default שלו שזה הוריזונטל.

  18. 06:06

    לאחר מכן אנחנו רוצים שה-Scroll View שעוטף לנו את ה-Text View, אנחנו רוצים שה-Weed שלו יהיה 0DP, כלומר כבר אנחנו רואים שיש פה כל מיני שינויים שאנחנו מבצעים.

  19. 06:22

    אנחנו רוצים שה-height שלו עדיין יהיה match parent אבל שיהיה לו weight של 1 כי אנחנו רוצים גם לתמונה לתת weight 1 ושכל

לקורס המלא: קורס פיתוח אפליקציות לאנדרואיד

ההרצאה הקודמת: Get Activity Orientation

ההרצאה הבאה: The Activity State Problem

הרצאות קשורות מקורסים אחרים

  • יצירת Layout
  • מבוא ל-Risk Based Testing ב-QA
  • יצירת קומפוננטה של Layout ב-React
  • Page Layout - Float - CSS

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון