פיתוח אפליקציות דינמיות

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

מהן אפליקציות מותאמות אישית?

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

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

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

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

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

למה כדאי ליצור ממשקי משתמש מותאמים?

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

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

Google Play

ב-Google Play יש אוספים של אפליקציות ספציפיות לטאבלטים ולמכשירים מתקפלים, וגם המלצות לאפליקציות באיכות גבוהה.

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

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

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

פיתוח אפליקציות מותאמות אישית כדי להרחיב את יכולת הגילוי שלהן ב-Google Play ולהגדיל את מספר המכשירים שבהם אפשר להוריד את האפליקציה.

איך מתחילים

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

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

  • שימוש בקטגוריות של גדלים של חלונות כדי לקבל החלטות לגבי הפריסה
  • פיתוח באמצעות ספריית Compose Material 3 Adaptive
  • תמיכה בקלט מעבר למגע
  • בדיקה בכל סוגי המכשירים

סיווגים של גודל חלון

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

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

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

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

מחשבים את הערך של WindowSizeClass של האפליקציה באמצעות הפונקציה ברמה העליונה currentWindowAdaptiveInfo() של ספריית Compose Material 3 Adaptive. הפונקציה מחזירה מופע של WindowAdaptiveInfo, שמכיל את windowSizeClass. האפליקציה מקבלת עדכונים בכל פעם ששיעור גודל החלון משתנה:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

חלוניות תוכן

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

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

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

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

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

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

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

Compose Material 3 Adaptive

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

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

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

  • ListDetailPaneScaffold: הטמעת פריסת הקנון של רשימת פרטים.

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

  • SupportingPaneScaffold: הטמעת הפריסה הקנונית של חלונית התמיכה.

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

ספריית Compose Material 3 Adaptive היא תלות חיונית לפיתוח אפליקציות מותאמות.

הגדרה והמשכיות

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

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

כברירת מחדל, שינויים בהגדרות יוצרים מחדש את הפעילות באפליקציה, וכל המצבים של הפעילות אבדו. כדי לשמור על רציפות, אפליקציות מותאמות אישית שומרות את המצב ב-method‏ onSaveInstanceState() של הפעילות או ב-ViewModel.

יציבה

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

איור 7. מכשיר מתקפל במצב 'על משטח'.

הממשק WindowInfoTracker ב-Jetpack WindowManager מאפשר לקבל רשימה של אובייקטים מסוג DisplayFeature במכשיר. בין התכונות בתצוגה מופיעה FoldingFeature.State, שמציינת אם המכשיר פתוח לגמרי או למחצה.

הספרייה Compose Material 3 Adaptive מספקת את הפונקציה ברמה העליונה currentWindowAdaptiveInfo(), שמחזירה מופע של WindowAdaptiveInfo שמכיל את windowPosture.

קלט מעבר למגע

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

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

  • Jetpack Compose 1.7 ואילך: ניווט באמצעות מקש Tab במקלדת ולחיצה, בחירה וגלילה בעכבר או בלוח מגע נתמכים כברירת מחדל.

  • הספרייה androidx.compose.material3 של Jetpack: מאפשרת למשתמשים לכתוב בכל רכיב TextField באמצעות עט stylus.

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

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

איך בודקים אפליקציות מותאמות אישית

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

הנחיות איכות לאפליקציות למסך גדול

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

הגדרות אישיות מרובות

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

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

צילומי מסך בצד המארח

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

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

יצירת תצוגות מקדימות

תצוגות מקדימות של קובצי ה-Compose מאפשרות לכם לבדוק את ממשק המשתמש של האפליקציה בתצוגת העיצוב של Android Studio. בתצוגות המקדימות נעשה שימוש בהערות, כמו @PreviewScreenSizes,‏ @PreviewFontScale ו-@PreviewLightDark, כדי לאפשר לכם לראות תוכן שאפשר ליצור ממנו קומפוזיציות בהגדרות שונות. אפשר אפילו לבצע פעולות בתצוגות המקדימות.

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

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

אמולטורים

ב-Android Studio יש מגוון של מכונות וירטואליות לבדיקה של גדלים שונים של פריסות:

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

סטרימינג ממכשיר מרוחק

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

סטרימינג של מכשיר מרוחק משולב ב-Android Studio. למידע נוסף, ראו סטרימינג ממכשירי Android שמבוסס על Firebase.

מקורות מידע נוספים