พัฒนา UI สําหรับแอปที่ทำงานบน Android Views

ลองใช้ Compose

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

พัฒนาด้วย Jetpack XR SDK →

การใช้เฟรมเวิร์ก 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

ใช้ Android Views และ Compose Interoperability API

โปรดอ่านคำแนะนำเกี่ยวกับความสามารถในการทำงานร่วมกันระหว่าง 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 สำหรับ 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