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

ลองใช้วิธีเขียน

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

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

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

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

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

แม้ว่า SpatialPanel จะเป็นส่วนหนึ่งของไลบรารี Jetpack Compose สำหรับ XR แต่ก็ยังยอมรับ Views ได้ด้วย เมื่อใช้ 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 เพื่อเพิ่มแผงเชิงพื้นที่และภาพโคจรไปยังส่วนที่อยู่แล้ว

ใช้ ComposeView ในเลย์เอาต์ XML เพื่อเพิ่ม Composable และสร้างเนื้อหา XR ใหม่ ใช้การเชื่อมโยงมุมมองหรือ 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 = PixelDimensions(500, 500),
    name = "panel entity"
)
Views.kt