為現有以 Android View 為基礎的應用程式建構空間 UI

適用的 XR 裝置

本指南可協助您為這類 XR 裝置打造體驗。

瞭解 XR 裝置類型 →

XR 頭戴式裝置

有線 XR 眼鏡

瞭解 XR 裝置類型 →

使用 Android Jetpack Compose 架構，是充分運用 Android UI 開發最新進展的最佳方式，也能確保應用程式符合業界最佳做法。

不過，如果您尚未遷移，且正在努力將以 Android View 為基礎的應用程式空間化，可以採取幾種做法。

試試 Compose

如要在 Android XR 上建構空間 UI，建議使用 Jetpack Compose 搭配 Jetpack XR SDK。

在 SpatialPanel 中重複使用現有 View

雖然 SpatialPanel 是 Jetpack Compose for XR 程式庫的一部分，但也接受 View。在 MainActivity 中使用 Subspace 時，請將現有檢視畫面放入 SpatialPanel，如以下範例所示。

setContent {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
        ) { MyCustomView(this@ActivityWithSubspaceContent) }
    }
}
Views.kt

使用 Android View 和 Compose 互通性 API

請參閱檢視畫面和 Compose 互通性指南。本文件說明如何搭配使用這些架構，並提供可用的程式碼範例連結。

使用 ComposeView 將空間面板和軌道器新增至現有片段

在 XML 版面配置中使用 ComposeView，即可新增可組合項並建立新的 XR 內容。使用檢視繫結或 findViewById，在 onCreateView() 函式中尋找 ComposeView。

進一步瞭解 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 for XR 是以 Jetpack SceneCore 為基礎建構而成。如果您要將以 View 為基礎的應用程式空間化，可以繼續在 Compose for XR 中使用現有的 UI 程式碼，也可以選擇直接使用 Jetpack SceneCore 的 Session。

您可以使用 PanelEntity，直接從 SceneCore 建構面板。使用 dimensions 以公尺為單位設定面板大小，或使用 pixelDimensions 以像素為單位設定面板大小。您可以使用對應的元件，選擇讓面板可移動或調整大小。詳情請參閱「為實體新增常見行為」。

val panelContent = MyCustomView(this)
val panelEntity = PanelEntity.create(
    session = xrSession,
    view = panelContent,
    pixelDimensions = IntSize2d(500, 500),
    name = "panel entity"
)
Views.kt