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

อุปกรณ์ XR ที่ใช้ได้
คำแนะนำนี้จะช่วยให้คุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ เหล่านี้ได้
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →
ชุดหูฟัง XR
แว่นตา XR แบบมีสาย
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

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

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

นำมุมมองที่มีอยู่มาใช้ซ้ำภายใน SpatialPanels

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

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

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

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

ใช้ ComposeView เพื่อเพิ่มแผงเชิงพื้นที่และโคจรไปยัง Fragment ที่มีอยู่

ใช้ ComposeView ในเลย์เอาต์ XML เพื่อเพิ่ม Composables และสร้างเนื้อหา 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 for XR สร้างขึ้นบน Jetpack SceneCore หากคุณกำลัง สร้างแอปที่อิงตาม Views ให้รองรับพื้นที่ คุณอาจใช้โค้ด UI ที่มีอยู่ต่อไป ภายใน Compose for 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