Layout

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

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

1. 00:03

   אנחנו מגיעים לנושא חדש שנקרא Layouts. Layout זה בעצם תגית שמגדירה איך הרכיבים שנמצאים בתוכה מסודרים אחד יחסית לשני או ביחס למסך עצמו.

2. 00:20

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

3. 00:37

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

4. 00:57

   נניח שאנחנו רוצים בראש המסך לשים איזושהי טקסט view כזה של רג'יסטר ולהגדיר שמתחתיו כמעט באמצע יושב לנו אדיט טקסט, משמאלו יושב עוד טקסט view שכתוב עליו full name, מתחת לטקסט view הזה יש עוד טקסט view שנקרא e-mail ומימינו אדיט טקסט נוסף וככה להתחיל לסדר את הרכיבים אחד ביחס לשני.

5. 01:27

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

6. 02:03

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

7. 02:22

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

8. 02:40

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

9. 03:03

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

10. 03:16

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

11. 03:31

    השגית הבאה נקראת Absolute Layout. Absolute Layout מאפשרת להגדיר רכיבים יחסית למסך מבחינת X ו-Y. כאן אנחנו יכולים להגדיר שהיוזרניים נמצא לדוגמה ב-X 50, Y 50, שהאדי טקסט נמצאת ב-X לדוגמה 150 וב-Y 50 וכן הלאה.

12. 03:55

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

13. 04:23

    מהפרופרטיז תקפים ללייאוט ספציפיים חלק תקפים לכל הלייאוטס ומה מה שפשוט תצטרכו לעשות זה א' להיות מודעים לזה שקיימים הפרופרטיז האלה ומה פשוט הם מציינים ואם אתם מנסים אז תראו פשוט איזה פרופרטי שייך לאיזה לייאוט יכול להיות שתראו פה איזשהו פרופרטי מסוים שפשוט לא יהיה

14. 04:45

    קיים בלייאוט ספציפי ואי אפשר להשתמש איתו באותו הלייאוט אז כאן אתם צריכים טיפה לשחק עם זה ולראות איזה פרופרטי שייך לאיזה לייאוט בואו נתחיל יש לנו פרופרטי שנקרא layout-width.

15. 05:01

    layout-width זה פשוט הרוחב של הרכיב יחסית ל-layout. אנחנו יכולים פשוט לקחת לדוגמה לחצן ולתת לו 200 dp והוא יתפוס 200 dp. יש לנו אפשרות ב-layout-width להגדיר גם wrap-content וזה אומר שאנחנו רוצים שהרוחב שלו יתפוס בדיוק לפי התוכן שלו.

16. 05:23

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

17. 05:39

    הלחצן נמצא באיזשהו Layout, והוא תופס כרגע את כל רוחב ה-Layout. כמו שיש לנו Layout Wid, יש לנו גם Layout Height. כאן אנחנו יכולים לתת גובה לרכיב, פה נתנו 200 dp כגובה של הלחצן, כאן נתנו Wrap Content ואז הוא תופס בדיוק לפי המילה Button שבתוכו וכאן נתנו Match Parent והוא תופס את כל הגובה של ה-Layout שמקיף אותו.

18. 06:07

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

19. 06:21

    במקרים יותר נדירים אנחנו לא נצטרך לתת Layout Weed ונוכל לתת פשוט וויד רגיל אם הלחצן לא נמצא ישירות בתוך לאי-אאוט אלא נמצא בתוך רכיב אחר שלא נחשב כלאי-אאוט כאן אנחנו יכולים לתת לו וויד לדוגמה 200 dp אבל אנחנו לא יכולים לתת לו ראפ קונטנט או מאצ' פרנק כנ"ל יש לנו הייט שוב אנחנו יכולים לתת הייט אם

20. 06:34

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

21. 07:03

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

22. 07:24

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

23. 07:54

    שוליים שווים מסביב לרכיב שקיבל את התכונה הזאת. התכונה הבאה שקשורה לזה נקראת padding. padding בעברית זה ריפוד או לנפח משהו, יותר לרפד אותו.

24. 08:09

    padding left אומר כמה המרווח בין התוכן של הרכיב לשוליים השמאליים שלו. ושימו לב שבאמת נהיה לנו פה איזשהו מרווח בין המילה לבין הגבול השמאלי של הלחצן אותו הדבר יש לנו אפשרות להגדיר padding right ואז הריפוד כביכול הופך להיות מימין יש לנו אפשרות להגדיר padding top padding bottom או פשוט padding אחד שווה

25. 08:42

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

26. 09:24

    התכונה הבאה שקיימת לנו היא Align Parent Top. כאן אנחנו רואים שיש לנו אפשרות להגדיר שהרכיב מוצמד לאחד הצדדים של הפרנט שלו.

27. 09:35

    פה אנחנו רואים שהוא מוצמד למעלה. יש לנו את Align Parent Bottom שמוצמד למטה, יש לנו את Align Parent Left שמוצמד שמאלה, במקרה בגלל שהוא הראשון אז גם הוא למעלה, ו-Align Parent Right מוצמד ימינה.

28. 09:52

    יש לנו אפשרות להגדיר משהו שנקרא Layout Gravity ויש לנו אפשרות להגדיר תכונה שנקראת פשוט Gravity. תכף נבין מה ההבדל ביניהם. Layout Gravity מציינת מה היחס של הרכיב או מה המיקום של הרכיב יחסית ל-Parent שלו מבחינת Left, Right, Top,

29. 10:15

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

30. 10:32

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

31. 10:43

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

32. 10:59

    אז אתם יכולים לבחור מה שהכי נוח לכם, העיקר שהוא יעשה את העבודה. אז Layout Gravity Center Horizontal פשוט שם את הרכיב באמצע מבחינה אופקית. Layout Gravity Center Vertical שם את הרכיב באמצע מבחינה אנכית.

33. 11:16

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

34. 11:26

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