พัฒนา 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 แต่ SpatialPanel ก็ยอมรับ Views ด้วย เมื่อใช้ setSubspaceContent ใน MainActivity ให้วางมุมมองที่มีอยู่ไว้ใน SpatialPanel ดังที่แสดงในตัวอย่างต่อไปนี้

setSubspaceContent {
    SpatialPanel(
        modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
    ) { MyCustomView(this) }
}
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 หากกำลังจัดวางแอปตามมุมมองแบบ 3 มิติ คุณอาจใช้โค้ด 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