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

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

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

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

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

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

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

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

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

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

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

Google Play

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

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

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

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

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

איך מתחילים

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

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

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

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

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

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

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

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

חלוניות תוכן

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

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

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

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

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

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

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

יצירת רכיבים של 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.

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