Android ビューベースのアプリの UI を開発する

Compose の方法を試す
Jetpack XR SDK を使用する Jetpack Compose は、Android XR に推奨される UI ツールキットです。

Android Jetpack Compose フレームワークを使用することは、Android UI 開発の最新の進歩を活用し、アプリが業界のベスト プラクティスに準拠していることを確認する最良の方法です。

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

SpatialPanel 内で既存の View を再利用する

SpatialPanels は 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) }
    }
}

Android ビューと Compose の相互運用 API を使用する

View と 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 XRJetpack 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"
)