חלוניות מרחביות

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

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

איור 1.: דוגמה לחלונית ממשק משתמש מרחבי.

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

יצירת חלונית מרחבית

בדוגמה הבאה מוסבר איך ליצור חלונית מרחבית.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .movable()
            .resizable(),
    ) {
        SpatialPanelContent()
    }
}

@Composable
fun SpatialPanelContent() {
    Box(
        Modifier
            .background(color = Color.Black)
            .height(500.dp)
            .width(500.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Spatial Panel",
            color = Color.White,
            fontSize = 25.sp
        )
    }
}

מידע חשוב על הקוד

  • ממשקי ה-API של SpatialPanel הם פונקציות קומפוזביליות של Subspace, ולכן צריך לקרוא להם בתוך Subspace. אם קוראים להם מחוץ למרחב משנה, נזרקת חריגה.
  • הגודל של SpatialPanel הוגדר באמצעות המפרטים height ו-width ב-SubspaceModifier. אם לא תציינו את המאפיינים האלה, גודל החלונית ייקבע לפי המידות של התוכן שלה.
  • המשתמשים יכולים להזיז חלונית על ידי הוספת משנה מרחב משנה movable.
  • המשתמשים יכולים לשנות את הגודל של חלונית על ידי הוספת משתנה משנה resizable.
  • בהנחיות לעיצוב חלוניות מרחביות מוסבר איך לשנות את הגודל והמיקום שלהן. במאמרי העזרה שלנו מפורט מידע נוסף על הטמעת קוד.

איך פועל המאפיין movable

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

הוספת כמה חלוניות מרחביות לפריסה מרחבית

אפשר ליצור כמה חלוניות מרחביות ולמקם אותן בפריסה מרחבית באמצעות SpatialRow,‏ SpatialColumn,‏ SpatialBox ו-SpatialSpacer.

איור 2.: דוגמה לכמה חלוניות מרחביות בפריסה מרחבית.

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

Subspace {
    SpatialRow {
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Left")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Left")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Left")
            }
        }
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Right")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Right")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Right")
            }
        }
    }
}

@Composable
fun SpatialPanelContent(text: String) {
    Column(
        Modifier
            .background(color = Color.Black)
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Panel",
            color = Color.White,
            fontSize = 15.sp
        )
        Text(
            text = text,
            color = Color.White,
            fontSize = 25.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

מידע חשוב על הקוד

  • ‫SpatialRow,‏ SpatialColumn,‏ SpatialBox ו-SpatialSpacer הם כולם רכיבים קומפוזביליים של מרחב משנה, וצריך למקם אותם בתוך מרחב משנה.
  • משתמשים בSubspaceModifier כדי להתאים אישית את הפריסה.
  • בפריסות עם כמה חלוניות בשורה, מומלץ להגדיר רדיוס עקמומיות של 825dp באמצעות SubspaceModifier כדי שהחלוניות יקיפו את המשתמש. לפרטים נוספים, אפשר לעיין בהנחיות העיצוב שלנו.

יצירת לוחות ופריסות בהתאמה אישית

כדי ליצור חלוניות בהתאמה אישית שלא נתמכות ב-Compose for XR, אתם יכולים לעבוד ישירות עם מופעי PanelEntity ועם תרשים הסצנה באמצעות ממשקי ה-API של SceneCore.