ב-Material Design יש רכיבים ופריסות ל-XR. בעזרת ספריית Material 3, פריסות דינמיות וספריית XR Compose Material 3, אתם יכולים להוסיף לאפליקציית Compose התנהגויות של ממשק משתמש מרחבי.
מוסיפים את ספריית XR Compose Material 3 ליחסי התלות של האפליקציה כדי להשתמש ברכיבי Material 3 ל-XR, או ממקמים רכיבי Material 3 רגילים ישירות בתוך קונטיינרים של Jetpack Compose ל-XR, כמו Orbiter, SpatialDialog ו-SpatialPanel.
שימוש ברכיבי Material 3 ל-XR
הספרייה androidx.xr.compose.material3 מספקת רכיבי Material 3 ל-XR בשביל דפוסי ממשק משתמש מרחביים נפוצים – כולל סרגלי ניווט, סרגלי אפליקציות עליונים, סרגלי כלים צפים, תיבות דו-שיח, פריסות של רשימות עם פרטים וכפתור להחלפה בין "מרחב הבית" ל"מרחב מלא". הרכיבים הניתנים לשילוב (composables) של Spatial* בספרייה הזו הם ניסיוניים וצריך להביע הסכמה לשימוש בהם באמצעות @OptIn(ExperimentalMaterial3XrApi::class).
מסמנים את האפשרות LocalSpatialCapabilities.current.isSpatialUiEnabled כדי לעבד רכיבי Material 3 ל-XR כשממשק המשתמש המרחבי מופעל, ורכיבי Material 3 רגילים כשממשק המשתמש המרחבי לא מופעל. מידע נוסף זמין במאמר בדיקת יכולות מרחביות.
פס ניווט
אפשר להשתמש ב-SpatialNavigationRail או ב-SpatialWideNavigationRail כדי להציג סרגל ניווט של Material 3 ב-Orbiter שמיושר להתחלה כשממשק המשתמש המרחבי מופעל. מידע נוסף זמין בהנחיות של Material Design.
סרגל ניווט לא מרחבי
סרגל ניווט מרחבי (מותאם ל-XR)
סרגל הניווט
משתמשים ב-SpatialNavigationBar או ב-SpatialShortNavigationBar כדי להציג סרגל ניווט של Material 3 ב-Orbiter שמיושר לתחתית, כשממשק המשתמש המרחבי מופעל. מידע נוסף זמין בהנחיות של Material Design.
סרגל ניווט לא מרחבי
סרגל ניווט מרחבי (מותאם ל-XR)
תיבות דו-שיח
משתמשים ב-SpatialBasicAlertDialog כדי להציג תיבת דו-שיח בסיסית של התראה בתוך SpatialDialog עם הגבהה מרחבית, או עוטפים את התוכן הרגיל של תיבת הדו-שיח של Material 3 ישירות ב-SpatialDialog.
מידע נוסף זמין במאמר תיבות דו-שיח ובהנחיות לעיצוב רספונסיבי.
דיאלוג לא מרחבי
דיאלוג מרחבי (מותאם ל-XR)
סרגלי האפליקציה העליונים
משתמשים ב-SpatialTopAppBar או ב-SpatialTwoRowsTopAppBar כדי להציג סרגל אפליקציה עליון של Material 3 בתוך Orbiter שמיושר למעלה, כשממשק המשתמש המרחבי מופעל.
מידע נוסף זמין במאמר סרגלי אפליקציות עליונים ובהנחיות לעיצוב רספונסיבי.
סרגל האפליקציה העליון ללא אודיו מרחבי
סרגל האפליקציה העליון המרחבי (מותאם ל-XR)
פריסה של רשימה ופירוט ל-XR
משתמשים ב-SpatialListDetailPaneScaffold כשהממשק המרחבי מופעל כדי להציג פריסה של רשימה ופרטים של Material 3 adaptive, שבה כל חלונית ממוקמת בתוך SpatialPanel משלה. כשממשק המשתמש המרחבי לא מופעל, משתמשים ב-ListDetailPaneScaffold. מידע נוסף זמין במאמר פריסת רשימה-פרטים ובהנחיות לעיצוב רספונסיבי.
ListDetailPaneScaffold לא מרחבי
ListDetailPaneScaffold מרחבי (מותאם ל-XR)
פריסת חלונית התמיכה ב-XR
כשהממשק המרחבי מופעל, ממקמים את החלונית הראשית ואת החלונית המשנית במאגרי SpatialPanel נפרדים בתוך SpatialRow בתוך Subspace. כשממשק המשתמש המרחבי לא מופעל, משתמשים ב-SupportingPaneScaffold. מידע נוסף זמין במאמר חלונית תמיכה ובהנחיות לעיצוב רספונסיבי.
SupportingPaneScaffold לא מרחבי
SupportingPaneScaffold מרחבי (מותאם ל-XR)
מתחילים לעצב באמצעות ערכת העיצוב Material 3 ל-Figma
כדי להתחיל, הורידו את ערכת העיצוב של Material 3
עוד באותו הקשר
- פיתוח ממשק משתמש באמצעות Jetpack Compose for XR
- מעבר ממרחב הבית למרחב מלא
- הנחיות לעיצוב ממשק משתמש מרחבי