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

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

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

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

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

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

setSubspaceContent {
   SpatialPanel(
       view = MyCustomView(this),
       modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
   )
}

ใช้ 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.fragment_first, container, false)
   val composeView = view.findViewById<ComposeView>(R.id.compose_view)
   composeView.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
        }
    }
}

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

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

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

val panelContent = MyCustomView(this)
val panelEntity = xrSession.createPanelEntity(
   view = panelContent,
   surfaceDimensionsPx = Dimensions(500f,500f),
   dimensions = Dimensions(1f,1f,1f),
   name = "panel entity"
)