既存の Android の View ベースアプリ用の空間 UI を構築する

対象となる XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
XR ヘッドセット
有線 XR グラス
XR デバイスのタイプについて →

Android Jetpack Compose フレームワークを使用することは、Android UI 開発の最新の進歩を活用し、アプリケーションが業界のベスト プラクティスに沿って最新の状態に保たれていることを確認するための最適な方法です。

ただし、まだ移行しておらず、Android ビューベースのアプリを空間化しようとしている場合は、いくつかのアプローチがあります。

SpatialPanel 内で既存のビューを再利用する

SpatialPanel は Jetpack Compose for XR ライブラリの一部ですが、ビューも受け入れます。MainActivity で Subspace を使用する場合は、次の例に示すように、既存のビューを SpatialPanel に配置します。

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

Android ビューと 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
}

Jetpack SceneCore ライブラリを直接操作する

Compose for XR は Jetpack SceneCore 上に構築されています。ビューベースのアプリを空間化する場合は、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"
)