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

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

חטיפות דסקית

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

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

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

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

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

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

לצפיפות של mdpi יש ערך x1, לצפיפות של hdpi יש ערך x1.5, לצפיפות של xhdpi יש ערך x2, לצפיפות של xxhdpi יש ערך x3 ולצפיפות של xxxhdpi יש ערך x4
איור 2: דלעת קנטלופ לאירועים בצפיפויות השונות

כדי לחשב את dp:

dp = (רוחב בפיקסלים * 160) / צפיפות המסך

רשתות

רשת בסיס

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

סרטון 1: הצגת רשת של 8dp עם הדגשה של הגדלות של 8dp

רכיבים קטנים יותר, כמו סמלים, טקסט ורכיבים מסוימים בתוך רכיבים, מומלץ ליישר לרשת של 4dp.

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

רשת עמודות

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

איור 4: רשת של ארבע עמודות

בדף פריסות קנוניות של Material 3 מוסבר איך יוצרים פריסות גמישות במגוון פורמטים.

קטגוריות גודל

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

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

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

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

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

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