רשתות ויחידות

פיקסלים שאינם תלויים בצפיפות (dp) ופיקסלים שניתן לשנות (sp) חיוניים לבניית פריסות ולהצגת גופנים שמגיבים באופן אחיד למגוון הרחב של צפיפויות מסך, גדלים, גורמי צורה ויחסי גובה-רוחב שמרכיבים את מכשירי Android.

חטיפות דסקית

  • אם משתמשים ברשת בסיסית, כדאי להשתמש במידות של 4 ו-8.
  • לציין את המפרטים ב-dp וב-sp, במקום בפיקסלים.
  • ייצוא גרפיקה של מפת סיביות (רסטר) לכל הדליים.
  • כשמעצבים, צריך לחשוב על רספונסיביות ולקחת בחשבון גדלים שונים, רזולוציות ויחסי גובה-רוחב.
  • פיקסלים שלא תלויים בדחיסות (dp): פיקסלים שלא תלויים בדחיסות הם יחידות גמישות שניתנות להגדלה כדי לקבל מידות אחידות בכל מסך. הם מבוססים על הדחיסות הפיזית של המסך. היחידות האלה הן יחסיות למסך של 160 dpi (נקודות לאינץ'), שבו 1 dp שווה בערך ל-1 px.
  • פיקסלים שניתנים לשינוי גודל (sp): פיקסלים שניתנים לשינוי גודל ממלאים את אותה פונקציה כמו dp, אבל הם מיועדים לגופנים. ערך ברירת המחדל של sp זהה לערך ברירת המחדל של dp. מערכת Android מחשבת את גודל הגופן בפועל שבו יש להשתמש על סמך המכשיר וההעדפה של המשתמש שהוגדרה בהגדרות המכשיר.
ההבדל בין dp ל-sp

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

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

קטגוריות של צפיפות

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

מערכת Android מקבצת טווחים של רמות דחיסות מסך ל'דליים' ומשתמשת בהם כדי לספק למכשיר את קבוצת הנכסים האופטימלית. הדליים הנפוצים ביותר הם mdpi,‏ hdpi,‏ xhdpi,‏ xxhdpi ו-xxxhdpi (nodpi ו-anydpi מתייחסים לדלי שלא משתנה בהתאם לרזולוציה של המכשיר, ומשמש בדרך כלל לציור וקטורי). כל אחד מהם תואם לקובץ משאבים של האפליקציה.

ל-mdpi יש צפיפות של x1, ל-hdpi יש צפיפות של x1.5,
            ל-xhdpi יש צפיפות של x2, ל-xxhdpi יש צפיפות של x3, ול-xxxhdpi יש צפיפות של x4
מלון קנטלופ חתוך לקוביות בצפיפות שונה

כדי לחשב את dp:

‫dp = (width in pixels * 160) / screen density

רשת בסיס

שימוש ברשת בסיסית עוזר ליצור ריווח והתאמה עקביים בממשק המשתמש. ממשק המשתמש של Android משתמש ברשת של 8dp לפריסה, לרכיבים ולריווח.

הצגת רשת של 8dp עם הדגשה של מרווחים של 8dp

רצוי ליישר רכיבים קטנים יותר כמו סמלים, סוגים ורכיבים מסוימים בתוך רכיבים אחרים לרשת של 4dp.

רשתות של 8dp מתאימות לרוב רכיבי ממשק המשתמש, ואילו רשת של 4dp מתאימה יותר לרכיבים קטנים כמו סמלים

פריסות רשת

רשתות הן הבסיס לכל פריסה. כדאי לשקול את ההיררכיה, הכמות ואפילו את המסר של התוכן.

רשת היררכית

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

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

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

רשת מודולרית

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

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

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

רשת עמודות

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

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

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

רשת עם ארבע עמודות

סיווג גודל

סיווגים של גודל חלון הם קבוצה של נקודות עצירה (breakpoints) של אזור התצוגה, שנועדו לעזור לכם לעצב, לפתח ולבדוק פריסות רספונסיביות ודינמיות של אפליקציות. ב-Android, גדלי החלונות מחולקים ל-3 קטגוריות: קומפקטי, בינוני ורחב. מידע נוסף על סיווגים של גודל החלון

יחסי גובה-רוחב

יחס גובה-רוחב הוא היחס בין רוחב הרכיב לגובה שלו. יחסי גובה-רוחב נכתבים כרוחב:גובה.

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

יחסי הגובה-רוחב המומלצים לשימוש בממשק המשתמש:

  • 16:9
  • ‎3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3