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

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

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

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

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

แม้ว่า SpatialPanel จะเป็นส่วนหนึ่งของไลบรารี Jetpack Compose สำหรับ XR แต่ SpatialPanel ก็ยอมรับ 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 ใหม่ ใช้ [ViewBinding][ViewBinding] เพื่อเรียกใช้ 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
           Orbiter(
               position = Edge.Top,
               offset = 10.dp,
               alignment = Alignment.End
           ) {
               SpatialPanel(SubspaceModifier.height(500.dp).width(500.dp)) {
                   Text("Spatial Panel with Orbiter")
               }
           }
       }
       return view
   }
}

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

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

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

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