פיתוח ממשק משתמש באמצעות תצוגות

הטמעה של Jetpack Compose

‫Layout Editor הוא כלי לעריכת פריסות שמאפשר ליצור פריסות מבוססות-View במהירות. במקום לכתוב את ה-XML של הפריסה באופן ידני, רק צריך לגרור רכיבי ממשק משתמש לתוך הכלי. בעורך הפריסה אפשר לראות תצוגה מקדימה של הפריסה במכשירי Android ובגרסאות שונות, ואפשר לשנות את גודל הפריסה באופן דינמי כדי לוודא שהיא פועלת כמו שצריך בגדלים שונים של מסכים.

ה-Layout Editor שימושי במיוחד כשיוצרים פריסה באמצעות ConstraintLayout.

בדף הזה יש סקירה כללית על Layout Editor. מידע נוסף על היסודות של פריסות זמין במאמר פריסות.

מבוא לכלי לעריכת פריסות

Layout Editor מופיע כשפותחים קובץ פריסה ב-XML.

כלי לעריכת פריסות
איור 1. הכלי לעריכת פריסות.
  1. לוח תצוגות: מכיל תצוגות שונות וקבוצות תצוגות שאפשר לגרור לפריסה.
  2. עץ הרכיבים: מציג את ההיררכיה של הרכיבים בפריסה.
  3. סרגל הכלים: כולל לחצנים להגדרת המראה של הפריסה בכלי העריכה ולשינוי מאפייני הפריסה.
  4. עורך עיצוב: מאפשר לערוך את הפריסה בתצוגת עיצוב, בתצוגת שרטוט או בשתיהן.
  5. מאפיינים: יש אמצעי בקרה למאפיינים של התצוגה שנבחרה.
  6. מצב תצוגה: מאפשר לכם לראות את הפריסה במצבים קוד סמל מצב הקוד, פיצול סמל המצב המפוצל או עיצוב סמל של מצב עיצוב. במצב פיצול מוצגים החלונות קוד ועיצוב בו-זמנית.
  7. אמצעי בקרה לזום ולהזזה: שליטה בגודל ובמיקום של התצוגה המקדימה בתוך העורך.

כשפותחים קובץ פריסת XML, עורך העיצוב נפתח כברירת מחדל, כמו שמוצג באיור 1. כדי לערוך את קובץ ה-XML של הפריסה בכלי לעריכת טקסט, לוחצים על הלחצן קוד סמל מצב הקוד בפינה השמאלית העליונה של החלון. שימו לב: החלוניות Palette,‏ Component Tree ו-Attributes לא זמינות כשעורכים את הפריסה בתצוגת Code.

טיפ: כדי לעבור בין עורך העיצוב לבין עורך הטקסט, מקישים על Alt (Control ב-macOS) בתוספת Shift ומקש החץ ימינה או שמאלה.

שינוי המראה של התצוגה המקדימה

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

כפתורים בסרגל הכלים של Layout Editor שמשמשים להגדרת המראה של הפריסה
איור 2. לחצנים בסרגל הכלים של Layout Editor שמשמשים להגדרת המראה של הפריסה.
  1. עיצוב ותוכנית: בוחרים את אופן הצגת הפריסה בכלי העריכה. אפשר גם להקיש על B כדי לעבור בין סוגי התצוגה האלה.
    • בוחרים באפשרות עיצוב כדי לראות תצוגה מקדימה של הפריסה.
    • בוחרים באפשרות תוכנית כדי לראות רק את המתאר של כל תצוגה.
    • בוחרים באפשרות עיצוב + תוכנית כדי לראות את שתי התצוגות זו לצד זו.
  2. כיוון המסך ופריסות חלופיות: אפשר לבחור בין כיוון מסך לרוחב או לאורך, או לבחור מצבי מסך אחרים שבהם האפליקציה מספקת פריסות חלופיות, כמו מצב לילה. התפריט הזה כולל גם פקודות ליצירת וריאציה חדשה של פריסה, כמו שמתואר בקטע בדף הזה. אפשר גם להקיש על האות O במקלדת כדי לשנות את הכיוון.

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

  4. סוג המכשיר וגודל המסך: בוחרים את סוג המכשיר (טלפון/טאבלט, Android TV או Wear OS) ואת הגדרת תצורה של מסך (גודל וצפיפות). אפשר לבחור מתוך כמה סוגי מכשירים שהוגדרו מראש ומתוך הגדרות AVD משלכם, ואפשר ליצור AVD חדש על ידי בחירה באפשרות הוספת הגדרת מכשיר מהרשימה, כמו שמוצג באיור 3.

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

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

    תפריט רשימת המכשירים עם מכשירים להתייחסות
    איור 3. רשימת המכשירים שכוללת מכשירים להתייחסות.

  5. גרסת ה-API: בוחרים את גרסת Android כדי לראות תצוגה מקדימה של הפריסה. רשימת הגרסאות הזמינות של Android תלויה בגרסאות של פלטפורמת ה-SDK שהתקנתם באמצעות SDK Manager.

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

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

יצירת פריסה חדשה

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

אפשר ליצור פריסה חדשה באחת מהדרכים הבאות:

שימוש בתפריט הראשי של Android Studio

  1. בחלון Project (פרויקט), לוחצים על המודול שאליו רוצים להוסיף פריסה.
  2. בתפריט הראשי, בוחרים באפשרות קובץ > חדש > XML > קובץ XML של פריסה.
  3. בתיבת הדו-שיח שמופיעה, מציינים את שם הקובץ, את תג פריסת השורש ואת קבוצת המקור שאליה שייכת הפריסה.
  4. לוחצים על סיום כדי ליצור את הפריסה.

שימוש בתצוגת הפרויקט

  1. בחלון Project, בוחרים בתצוגה Project.
  2. לוחצים לחיצה ימנית על ספריית הפריסה שרוצים להוסיף לה את הפריסה.
  3. בתפריט ההקשר שמופיע, לוחצים על חדש > קובץ משאב פריסה.

שימוש בתצוגת Android

  1. בחלון Project, בוחרים בתצוגה Android.
  2. לוחצים לחיצה ימנית על התיקייה layout.
  3. בתפריט ההקשר שמופיע, בוחרים באפשרות חדש > קובץ משאב פריסה.

שימוש במנהל המשאבים

  1. ב-מנהל המשאבים, בוחרים בכרטיסייה Layout.
  2. לוחצים על הלחצן + ואז על קובץ משאבי פריסה.

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

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

שימוש בווריאציה מוצעת של פריסה

‫Android Studio כולל וריאציות נפוצות של פריסות שאפשר להשתמש בהן בפרויקט. כדי להשתמש בווריאציה מוצעת של פריסה:

  1. פותחים את קובץ הפריסה שמוגדר כברירת מחדל.
  2. לוחצים על סמל העיצוב סמל של מצב עיצוב בפינה השמאלית העליונה של החלון.
  3. שם קובץ הפריסה מופיע בתפריט הנפתח פעולה למעבר וליצירת מסווגים לקובצי פריסה. לוחצים על התפריט הנפתח.
  4. בתפריט הנפתח, בוחרים וריאציה כמו Create Landscape Qualifier (יצירת מסנן לשימוש במצב לרוחב) או Create Tablet Qualifier (יצירת מסנן לשימוש בטאבלט).
    התפריט הנפתח 'יצירת מסננים'
    איור 4. רשימה נפתחת של מסנני פריסה.

נוצרת ספריית פריסה חדשה.

יצירת וריאנט פריסה משלכם

כדי ליצור וריאציה משלכם של פריסת הערוץ:

  1. פותחים את קובץ הפריסה שמוגדר כברירת מחדל.
  2. לוחצים על סמל העיצוב סמל של מצב עיצוב בפינה השמאלית העליונה של החלון.
  3. שם קובץ הפריסה מופיע בתפריט הנפתח Action to switch and create qualifiers for layout files. לוחצים על התפריט הנפתח.

  4. ברשימה הנפתחת, בוחרים באפשרות הוספת מזהה משאב. (ראו איור 4 למעלה).

    מופיעה תיבת הדו-שיח Select Resource Directory.

  5. בתיבת הדו-שיח בחירת ספריית משאבים, מגדירים את המאפיינים של המשאב לגרסה:

    1. בוחרים תנאי מתוך הרשימה תנאים זמינים.
    2. לוחצים על הלחצן הוספה כפתור להוספת תנאי.
    3. מזינים את הערכים הנדרשים.
    4. חוזרים על השלבים האלה כדי להוסיף עוד מסננים.

  6. אחרי שמוסיפים את כל התנאים, לוחצים על אישור.

אם יש לכם כמה וריאציות של אותו פריסה, אתם יכולים לעבור ביניהן על ידי בחירת וריאציה מהתפריט הנפתח Action to switch and create qualifiers for layout files.

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

המרת תצוגה או פריסה

אפשר להמיר תצוגה לסוג אחר של תצוגה, ואפשר להמיר פריסה לסוג אחר של פריסה:

  1. לוחצים על הלחצן עיצוב בפינה הימנית העליונה של חלון העריכה.
  2. בעץ הרכיבים, לוחצים לחיצה ימנית על התצוגה או על הפריסה, ואז לוחצים על המרת התצוגה.
  3. בתיבת הדו-שיח שמופיעה, בוחרים את סוג התצוגה או הפריסה החדשים ולוחצים על אישור.

המרת פריסה ל-ConstraintLayout

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

כדי להמיר פריסה קיימת לConstraintLayout:

  1. פותחים פריסה קיימת ב-Android Studio.
  2. לוחצים על הסמל עיצוב סמל של מצב עיצוב בפינה השמאלית העליונה של חלון העריכה.
  3. בעץ הרכיבים, לוחצים לחיצה ימנית על הפריסה ואז על המרת your-layout-type ל-ConstraintLayout.

מידע נוסף על ConstraintLayout זמין במאמר יצירת ממשק משתמש רספונסיבי באמצעות ConstraintLayout.

חיפוש פריטים בלוח הצבעים

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

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

פתיחת תיעוד מלוח הצבעים

כדי לפתוח את מסמכי העזר של Android Developers לתצוגה או לקבוצת תצוגות, בוחרים את רכיב ממשק המשתמש בלוח הצבעים ומקישים על Shift+F1.

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

הוספת תצוגות לפריסה

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

אם אתם משתמשים ב-ConstraintLayout, אתם יכולים ליצור אילוצים באופן אוטומטי באמצעות התכונות Infer Constraints ו-Autoconnect.

עריכת מאפיינים של תצוגת עריכה

הטיסה
איור 5. החלונית מאפיינים.

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

כשבוחרים תצוגה, בין אם לוחצים על התצוגה בעץ הרכיבים או בעורך העיצוב, בחלונית מאפיינים מוצגים הפרטים הבאים, כמו שמוצג באיור 5:

  1. מאפיינים מוצהרים: רשימה של מאפיינים שצוינו בקובץ הפריסה. כדי להוסיף מאפיין, לוחצים על לחצן הוספה לחצן להוספת מאפיין בראש הקטע.
  2. פריסה: מכיל אמצעי בקרה לרוחב ולגובה של התצוגה. אם התצוגה היא ConstraintLayout, בקטע הזה מוצגים גם הטיה של אילוצים ורשימה של האילוצים שבהם נעשה שימוש בתצוגה. למידע נוסף על שליטה בגודל התצוגות באמצעות ConstraintLayout, אפשר לקרוא את המאמר שינוי גודל התצוגה.
  3. מאפיינים נפוצים: רשימה של מאפיינים נפוצים לתצוגה שנבחרה. כדי לראות את כל המאפיינים הזמינים, מרחיבים את הקטע כל המאפיינים בתחתית החלון.
  4. חיפוש: מאפשר לחפש מאפיין ספציפי של תצוגה.

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

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

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

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

הוספת נתונים לדוגמה לתצוגה

מכיוון שפריסות רבות של Android מסתמכות על נתונים בזמן ריצה, יכול להיות שיהיה קשה לכם לדמיין איך הפריסה תיראה בזמן שאתם מעצבים את האפליקציה. אתם יכולים להוסיף נתוני תצוגה מקדימה לדוגמה ל-TextView, ל-ImageView או ל-RecyclerView מתוך Layout Editor.

כדי להציג את החלון Design-time View Attributes, לוחצים לחיצה ימנית על אחד מסוגי התצוגה האלה ובוחרים באפשרות Set Sample Data (הגדרת נתוני דוגמה), כמו שמוצג באיור 6.

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

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

תצוגת טקסט עם נתונים לדוגמה
איור 7. ‫TextView עם נתונים לדוגמה.

במקרה של ImageView, אפשר לבחור בין תמונות לדוגמה שונות. כשבוחרים תמונה לדוגמה, Android Studio מאכלס את מאפיין tools:src של ImageView (או tools:srcCompat אם משתמשים ב-AndroidX).

תצוגת תמונה עם נתונים לדוגמה
איור 8. ‫ImageView עם נתונים לדוגמה.

כשיוצרים RecyclerView, אפשר לבחור מתוך קבוצה של תבניות שמכילות תמונות וטקסטים לדוגמה. כשמשתמשים בתבניות האלה, Android Studio מוסיף קובץ לתיקייה res/layout, ‏ recycler_view_item.xml, שמכיל את הפריסה של נתוני הדוגמה. בנוסף, Android Studio מוסיף מטא-נתונים ל-RecyclerView כדי להציג את נתוני הדוגמה בצורה נכונה.

תצוגת רשימה עם נתונים לדוגמה
איור 9. ‫RecyclerView עם נתונים לדוגמה.

הצגת אזהרות ושגיאות לגבי פריסת המודעות

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

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

הורדת גופנים והחלתם על הטקסט

כשמשתמשים ב-Android 8.0 (רמת API‏ 26) או בספריית Jetpack Core, אפשר לבחור מתוך מאות גופנים באמצעות השלבים הבאים:

  1. ב-Layout Editor, לוחצים על סמל העיצוב סמל של מצב עיצוב כדי לראות את הפריסה בכלי לעריכת עיצובים.
  2. בוחרים תצוגת טקסט.
  3. בחלונית מאפיינים, מרחיבים את textAppearance ואז את התיבה fontFamily.
  4. גוללים לתחתית הרשימה ולוחצים על גופנים נוספים כדי לפתוח את תיבת הדו-שיח משאבים.
  5. בתיבת הדו-שיח Resources (משאבים), כדי לבחור גופן, מעיינים ברשימה או מקלידים את שם הגופן בסרגל החיפוש שלמעלה. אם בוחרים גופן בקטע ניתן להורדה, אפשר ללחוץ על יצירת גופן להורדה כדי לטעון את הגופן בזמן הריצה כגופן להורדה, או ללחוץ על הוספת גופן לפרויקט כדי לארוז את קובץ הגופן TTF ב-APK. הגופנים שמופיעים בקטע Android מסופקים על ידי מערכת Android, ולכן אין צורך להוריד אותם או לצרף אותם ל-APK.
  6. לסיום, לוחצים על אישור.

אימות פריסה

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

צילום מסך של הכרטיסייה 'אימות פריסה'

איור 10. הכרטיסייה 'ולידציית פריסה'.

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

  • מכשירים להתייחסות
  • בהתאמה אישית
  • עיוורון צבעים
  • גודל הגופן

צילום מסך של תפריט נפתח בכלי לאימות פריסה

איור 11. התפריט הנפתח 'מכשירים להתייחסות'.

מכשירים להתייחסות

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

צילום מסך של תצוגות מקדימות של פריסות למכשירי הפניה שונים

איור 12. תצוגה מקדימה של מכשיר לדוגמה בכלי לאימות פריסה.

בהתאמה אישית

כדי להתאים אישית תצורת תצוגה לתצוגה מקדימה, בוחרים מתוך מגוון הגדרות, כולל שפה, מכשיר או כיוון מסך:

התאמה אישית של תצוגת מכשיר בכלי לאימות פריסה

איור 16. מגדירים תצוגה בהתאמה אישית בכלי לאימות פריסה.

עיוורון צבעים

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

צילום מסך של תצוגות מקדימות של סימולציות לסוגים שונים של עיוורון צבעים

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

גודל הגופן

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

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

איור 14. תצוגות מקדימות של גודל גופן משתנה בכלי לאימות פריסה.