PracticU

Layout Designer

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › Layout Designer
מילון מושגים:
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
XML - שפת סימון לייצוג נתונים מובְנים בעזרת תגיות, המשמשת להחלפת מידע בין מערכות ולקובצי הגדרות.
API - ממשק תכנותי שמגדיר כיצד תוכנה אחת פונה לאחרת ומחליפה איתה נתונים ופעולות.
Android - מערכת הפעלה מבוססת Linux לטלפונים ולמכשירים ניידים, שפותחה על ידי גוגל.
SDK - ערכת כלים לפיתוח: אוסף ספריות, כלים ותיעוד שמאפשרים לבנות תוכנה לפלטפורמה או שירות מסוימים.
Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.
Activity - ב-Android, רכיב שמייצג מסך יחיד של האפליקציה שאיתו המשתמש מתקשר.
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
Layout Designer
בחלונית ה-Layout Designer יש שורת לחצנים שמשפיעים על איך מוצגת האפליקציה בעורך. ההרצאה עוברת עליהם אחד אחד.
הלחצנים והאפשרויות
1. תצוגה: Zoom In, Zoom Out, תצוגה ב-100% והתאמה לחלון.
2. מעבר ל-XML: לחצן שקופץ לקוד ה-XML. שינוי בקוד, למשל הוספת סימני קריאה לטקסט, מתעדכן מיד בעורך ובתצוגה המקדימה.
3. Refresh: לרענון כשהשינוי לא התקבל.
4. הגדרות:
- Preferred XML Editor: לחיצה כפולה על הקובץ תפתח את ה-XML במקום העורך.
- Include Device Frames: מציג מסגרת מכשיר.
- Show Lighting Effects: מציג הצללה ואפקט אור.
5. API Level: כברירת מחדל מותקן רק API level 23 (Android 6, Marshmallow). אם מתקינים עוד גרסאות דרך ה-SDK אפשר לבחור אחרת ולראות איך האפליקציה נראית בה.
6. Translation: לתרגום האפליקציה לשפות אחרות. יוסבר בהמשך.
7. MainActivity: קופץ מיד למחלקת ה-Java שמאחורי המסך (Code Behind). Activity הוא מסך, קובץ ה-Layout נקרא activity_main ומאחוריו מחלקה ב-Java.
8. Theme: ערכת הנושא קובעת גופנים, אייקונים, רקעים, צבעים וגדלים. בעורך אפשר להחליף אותה, למשל ל-Holo Dark, ולחזור ל-AppTheme (ברירת המחדל).
9. כיוון: Landscape (אופקי) או Portrait (אנכי).
10. דגם מכשיר: בדוגמה Nexus 4 והוחלף ל-Nexus 6P.
11. Preview All Screen Sizes: מציג בבת אחת את האפליקציה בגדלים שונים, כדי לבדוק אם הקוד מתאים לכולם. Preview Representative Sample מציג מדגם קטן יותר.
12. Right to Left: תצוגה למצב right to left בשפות כמו עברית וערבית.
13. רוחב וגובה: לחצנים שמותחים את הרכיב הנבחר על כל הגובה או הרוחב.
14. Screenshot: המצלמה ב-XML Preview מצלמת את התצוגה (עם מסגרת ואפקט אור לפי הבחירה) ושומרת כתמונה. בדוגמה נשמרה בשם My App Screenshot לשימוש במסמכי אפיון או לשליחה ללקוח.
אחרי ההרצאה אפשר להשתמש בלחצנים של ה-Layout Designer כדי לבדוק איך המסך נראה בגרסאות, בגדלים ובכיוונים שונים.

פרקי ההרצאה: Layout Designer

  1. 00:00

    חלונית Layout Designer

  2. 00:42

    כפתורי Zoom בדיזיינר

  3. 01:21

    מעבר לקוד ה-XML

  4. 01:58

    הגדרת Prefer XML Editor

  5. 02:35

    מסגרת מכשיר ואפקט תאורה

  6. 03:10

    בחירת API Level בדיזיינר

  7. 04:28

    קפיצה ל-MainActivity

  8. 05:06

    ערכת נושא - Theme

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

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

  1. 00:02

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

  2. 00:15

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

  3. 00:37

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

  4. 01:05

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

  5. 01:37

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

  6. 02:07

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

  7. 02:38

    שאנחנו רוצים לראות את ה-XML דבר ראשון. בואו נחזיר את זה בחזרה לדיזיינר. Include Device Frames מראה את המסגרת של המכשיר.

  8. 02:50

    כרגע הורדתי את זה ואנחנו רואים בפריוויו הזה שאין שום מסגרת. בואו נחזיר את זה בחזרה. יש לנו אפשרות to show or to hide the lighting effect.

  9. 03:02

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

  10. 03:24

    מייצגים כאן יש לנו אפשרות לקבוע איזה api level אנחנו רוצים להריץ כאשר התקנו את android studio by default הותקן לנו רק API Level 23 שזה אנדרואיד 6 הכוונה מרשמלו אם היינו מתקינים עוד דרך חלון ה-SDK אז היינו יכולים לראות כאן עוד אפשרויות לבחירת גרסאות

  11. 03:52

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

  12. 04:17

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

  13. 04:30

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

  14. 04:47

    אם אנחנו מסתכלים על זה אנחנו רואים שזה סך הכל מסך. מסך באנדרואיד זה Activity, Activity זה השם של מסך. קובץ ה-Layout נקרא ActivityMain אבל מאחורי כל מסך יושבת מחלקה ב-Java שמכילה מה שנקרא את ה-Code Behind, את הקוד ב-Java שראינו כאן.

  15. 05:08

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

  16. 05:24

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

  17. 05:37

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

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

ההרצאה הקודמת: ממשק גרפי וחלוניות של Android Studio

ההרצאה הבאה: הרצת Emulator ב-Android Studio

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

  • יצירת Layout
  • יצירת קומפוננטה של Layout ב-React
  • Page Layout - Float - CSS
  • מבנה אתר אינטרנט - Grid Layout - חלק 1

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

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