สร้าง UI เชิงพื้นที่สำหรับแอปที่อิงตามมุมมองของ Android ที่มีอยู่

อุปกรณ์ XR ที่รองรับ

คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทนี้

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

การใช้เฟรมเวิร์ก Android Jetpack Compose เป็นวิธีที่ดีที่สุดในการใช้ประโยชน์จากความก้าวหน้าล่าสุดในการพัฒนา UI ของ Android และเพื่อยืนยันว่าแอปพลิเคชันของคุณยังคงเป็นไปตามแนวทางปฏิบัติแนะนำในอุตสาหกรรม

อย่างไรก็ตาม หากคุณยังไม่ได้ย้ายข้อมูลและกำลังพยายามทำให้แอปที่ใช้ Android Views เป็นเชิงมิติพื้นที่ คุณสามารถใช้วิธีการต่อไปนี้ได้

ลองใช้วิธีแบบ Compose

Jetpack Compose ที่ใช้ Jetpack XR SDK เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับการสร้าง UI เชิงมิติพื้นที่ใน Android XR

arrow_forward

ใช้ View ที่มีอยู่ซ้ำภายใน SpatialPanel

แม้ว่า SpatialPanel จะเป็นส่วนหนึ่งของไลบรารี Jetpack Compose สำหรับ XR แต่ก็ยอมรับมุมมองด้วย เมื่อใช้ Subspace ใน MainActivity ให้วางมุมมองที่มีอยู่ลงใน SpatialPanel ดังที่แสดงในตัวอย่างต่อไปนี้

setContent {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
        ) { MyCustomView(this@ActivityWithSubspaceContent) }
    }
}
Views.kt

ใช้ Android View และ API การทำงานร่วมกันของ Compose

โปรดดูคำแนะนำเกี่ยวกับความสามารถในการทำงานร่วมกันระหว่าง Views และ Compose เอกสารประกอบนี้ครอบคลุมการใช้เฟรมเวิร์กเหล่านี้ร่วมกันและมีลิงก์ไปยังตัวอย่างโค้ดที่คุณใช้ได้

ใช้ ComposeView เพื่อเพิ่มแผงเชิงพื้นที่และ Orbiter ลงใน Fragment ที่มีอยู่

ใช้ ComposeView ในเลย์เอาต์ XML เพื่อเพิ่ม Composable และสร้างเนื้อหา XR ใหม่ ใช้ View binding หรือ findViewById เพื่อค้นหา ComposeView ในฟังก์ชัน onCreateView()

อ่านข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำของ ComposeView

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    val view = inflater.inflate(R.layout.example_fragment, container, false)
    view.findViewById<ComposeView>(R.id.compose_view).apply {
        // Dispose of the Composition when the view's LifecycleOwner
        // is destroyed
        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
        setContent {
            // In Compose world
            SpatialPanel(SubspaceModifier.height(500.dp).width(500.dp)) {
                Text("Spatial Panel with Orbiter")
            }
        }
    }
    return view
}
Views.kt

ทำงานร่วมกับไลบรารี Jetpack SceneCore โดยตรง

Compose สำหรับ XR สร้างขึ้นบน Jetpack SceneCore หากคุณกำลังสร้างแอปที่อิงตาม Views ให้เป็นเชิงมิติพื้นที่ คุณสามารถใช้โค้ด UI ที่มีอยู่ภายใน Compose สำหรับ XR ต่อไป หรือเลือกทำงานกับ Session ของ Jetpack SceneCore โดยตรงแทนก็ได้

คุณสามารถสร้างแผงได้โดยตรงจาก SceneCore โดยใช้ PanelEntity กำหนดขนาดของแผงเป็นเมตรโดยใช้ dimensions หรือเป็นพิกเซลโดยใช้ pixelDimensions คุณเลือกที่จะทำให้แผงเคลื่อนย้ายหรือปรับขนาดได้โดยใช้คอมโพเนนต์ที่เกี่ยวข้อง ดูข้อมูลเพิ่มเติมได้ที่หัวข้อเพิ่มลักษณะการทำงานทั่วไปให้กับเอนทิตี

val panelContent = MyCustomView(this)
val panelEntity = PanelEntity.create(
    session = xrSession,
    view = panelContent,
    pixelDimensions = IntSize2d(500, 500),
    name = "panel entity"
)
Views.kt