谷歌分享：Android应用XR适配开发案例
使用Jetpack XR SDK，借助Kotlin和Compose等现代Android开发工具构建沉浸式XR体验
（映维网Nweon 2025年10月23日）随着三星Galaxy XR的发布，首款搭载Android XR的设备正式到来。用户现在可以从Play商店以全新的维度——第三维度，来体验自己喜爱的应用。
第三维度是一个广阔的空间，同时为你的应用提供了充足的用武之地。立即开始，使用适合的工具进行开发。例如，你可以使用Jetpack XR SDK，借助Kotlin和Compose等现代Android开发工具构建沉浸式XR体验。
在这篇博文中，谷歌分享了如何将备受喜爱的Androidify的带入XR世界，并介绍将你的应用引入XR所需了解的基础知识。
Androidify之旅
Androidify是一款开源应用，允许你使用最新技术（如Gemini、CameraX、Navigation 3，当然还有Jetpack Compose）来创建Android bot。Androidify最初通过创建自适应布局，旨在手机、可折叠设备和平板电脑上都能呈现出色的视觉效果。
自适应布局的一个关键支柱是可复用的Composable组件。Jetpack Compose帮助你创建小巧的UI组件，这些组件可以通过不同的方式布局，以创建直观的用户体验，无论用户使用何种类型的设备。事实上，Androidify无需对应用进行任何修改，即可兼容Android XR。
对于没有为Android XR做特殊处理的应用，它们可以在适当大小的窗口中进行多任务处理，其工作方式与在大屏幕上非常相似。正因如此，Androidify在Android XR上已经功能完备，无需额外工作。但我们并不想止步于此，所以我们决定更进一步，创建一个具有XR差异化的应用，为我们的XR用户带来愉悦的体验。
熟悉XR环境
我们回顾一下Android XR的关键基本概念，首先从应用可以运行的两种模式开始：主空间和完整空间。
在主空间中，可以并排运行多个应用，因此用户可以在不同窗口之间进行多任务处理。从这个意义上说，它很像大型屏幕Android设备上的桌面窗口管理，但这是在虚拟空间中。
在完整空间中，应用没有空间边界，可以利用Android XR的全部空间特性，例如空间UI和控制虚拟环境。
尽管允许你的应用仅在完整空间中运行似乎很诱人，但你的用户可能希望与你的应用进行多任务处理，所以同时支持这两种模式可以带来更好的用户体验。
为Androidify的新维度设计
一个令人愉悦的应用始于出色的设计。Android开发者关系团队的高级设计倡导者Ivy Knight承担了这项任务：基于Androidify的现有设计，为XR构思新的设计。接下来交给Ivy了。
为XR设计需要一种独特的方法，但实际上与移动设计仍有很多共同之处。我们首先考虑的是“容器”概念：如何在子空间内组织和分组UI元素，可以通过清晰地显示边界，也可以通过微妙地暗示边界。我们同时学会了接纳各种尺寸的空间UI元素，以响应用户而调整和移动。正如Androidify所做的那样，使用自适应布局进行构建，这样你就可以将布局分解成若干部分，用于你的空间UI。
从主空间开始设计
幸运的是，Android XR允许你从应用的当前状态开始为主空间进行适配，所以只需添加一个窗口工具栏和完整空间切换按钮，即可过渡到扩展的XR设计。
我们同时考虑了可能的硬件特性以及用户将如何与它们交互。Androidify的移动端布局适应各种设备形态、屏幕尺寸和摄像头数量，以提供更多照片选项。遵循这种模式，我们必须为头戴式设备调整camera布局。我们同时需要对文本进行调整，以考虑UI与用户的接近程度。
为向完整空间的更大转变进行设计
向完整空间的转变是最大的挑战，但也给了我们最大的创意空间来调整设计。
Androidify使用视觉容器（或窗格）通过背景和轮廓来对功能进行分组，例如拍摄或选择照片窗格。我们使用了顶部应用栏等组件，通过框住其他窗格来创建自然的容器。最后，通过特定元素彼此之间的接近性来暗示内在的容器关系，例如靠近“选择我的bot颜色”窗格的开始转换底部按钮。
空间面板便于实现轻松分离。要决定如何使你的移动设计适应空间面板，请尝试从最远的表面开始移除表面，然后向前移动。看看你可以移除多少背景，以及剩下什么。当我们为Androidify完成这个练习后，剩下的是那个巨大的绿色Android波浪形图案。这个波浪形图案不仅起到了品牌标识和背景的作用，还成为了3D空间中内容的锚点。
建立这个锚点既让我们更容易想象元素如何围绕它移动，也让我们能够利用接近性来突破并转化用户体验的其余部分。
帮助你的应用实现空间化的其他设计技巧
让元素突破容器限制：将组件分离出来，给它们一些真正的（空间）空间。是时候给那些UI元素一些呼吸空间了。
移除表面：隐藏背景，看看这会对你的设计产生什么影响。
用动效激发活力：你在应用中如何使用过渡效果？利用这种特性来想象你的应用如何突破到VR中。
选择一个锚点：不要让你的用户在空间中迷失。设置一个有助于汇集或固定UI的元素。
有关XR UI设计模式的更多信息，请查阅这个页面。
空间UI基础
既然我们已经了解了Ivy在为XR设计Androidify时调整思维方式的经验，现在我们谈谈开发空间UI。如果你习惯于使用现代Android工具和库，那么使用Jetpack XR SDK开发空间UI应该会感觉很熟悉。你会发现你已经熟悉的概念，例如使用Compose创建布局。实际上，空间布局与使用行、列和间隔物的2D布局非常相似：
这里显示的空间元素是SpatialPanel Composable，它允许你显示文本、按钮和视频等2D内容。
Subspace { SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) ) { Text("I'm a panel!") }}SpatialPanel是一个子空间Composable。子空间Composable必须包含在Subspace内，并由SubspaceModifier对象修饰。Subspace可以放置在应用UI层次结构中的任何位置，并且只能包含子空间Composable。SubspaceModifier对象也与Modifier对象非常相似：它们控制大小和位置等参数。
一个Orbiter可以附加到SpatialPanel上，并随其附着的内容一起移动。它们通常用于提供关于所附着内容的上下文控件，使内容成为主要焦点。它们可以放置在内容四个边中的任何一边，距离可配置。
还有更多的空间UI元素，但这是我们为Androidify创建空间布局时使用的主要元素。
开始XR开发
我们从项目设置开始。我们添加了Jetpack XR Compose依赖项，你可以在Jetpack XR依赖项页面上找到它。
我们添加了一个按钮的代码，该按钮用于将用户切换到完整空间，首先检测是否具有此功能：
@Composablefun couldRequestFullSpace(): Boolean = LocalSpatialConfiguration.current.hasXrSpatialFeature && !LocalSpatialCapabilities.current.isSpatialUiEnabled}
然后，我们制作了一个新的按钮组件，将”扩展内容”图标添加到我们现有的布局中，并为其设置了onClick行为：
@Composablefun RequestFullSpaceIconButton() { if (!couldRequestFullSpace()) return val session = LocalSession.current ?: return IconButton( onClick = { session.scene.requestFullSpaceMode() }, ) { Icon( imageVector = vectorResource(R.drawable.expand_content_24px), contentDescription = stringResource("To Full Space"), ) }}现在，点击该按钮只是在完整空间中显示中等布局。我们可以检查空间能力并确定是否可以显示空间UI——在这种情况下，我们将显示新的空间布局：
@Composablefun HomeScreenContents(layoutType: HomeScreenLayoutType) { val layoutType = when { LocalSpatialCapabilities.current.isSpatialUiEnabled -> HomeScreenLayoutType.Spatial isAtLeastMedium() -> HomeScreenLayoutType.Medium else -> HomeScreenLayoutType.Compact } when (layoutType) { HomeScreenLayoutType.Compact -> HomeScreenCompactPager(...) HomeScreenLayoutType.Medium -> HomeScreenMediumContents(...) HomeScreenLayoutType.Spatial -> HomeScreenContentsSpatial(...) }}实现主屏幕的设计
我们回到完整空间中主屏幕的空间设计，了解它是如何实现的。
我们在这里确定了两个SpatialPanel元素：右侧一个包含视频卡的面板，以及一个包含主UI的面板。最后，顶部附加了一个Orbiter。让我们从视频播放器面板开始：
@Composablefun HomeScreenContentsSpatial(...) { Subspace { SpatialPanel(SubspaceModifier .fillMaxWidth(0.2f) .fillMaxHeight(0.8f) .aspectRatio(0.77f) .rotate(0f, 0f, 5f), ) { VideoPlayer(videoLink) } }}我们直接将常规布局中的2D VideoPlayer组件复用到SpatialPanel中，无需任何额外更改。
主要内容面板的情况类似：我们在SpatialPanel中复用了中等面板的内容。
SpatialPanel(SubspaceModifier.fillMaxSize(), resizePolicy = ResizePolicy( shouldMaintainAspectRatio = true ), dragPolicy = MovePolicy()) { Box { FillBackground(R.drawable.squiggle_full) HomeScreenSpatialMainContent(...) }}我们给这个面板设置了一个ResizePolicy，它会在面板边缘附近提供一些手柄，让用户可以调整面板大小。它还有一个MovePolicy，允许用户拖动它。
将它们放在同一个Subspace中会使它们彼此独立，因此我们将VideoPlayer面板设为主要内容面板的子级。这样，当主要内容面板被拖动时，VideoPlayer面板会通过父子关系随之移动。
@Composablefun HomeScreenContentsSpatial(...) { Subspace { SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) { Box { FillBackground(R.drawable.squiggle_full) HomeScreenSpatialMainContent(...) } Subspace { SpatialPanel(SubspaceModifier...) { VideoPlayer(videoLink) } } } }}我们就是这样完成第一个屏幕的。
继续其他屏幕
我将简要介绍其他一些屏幕，重点说明为每个屏幕所做的具体考虑。
在这里，我们使用SpatialRow和SpatialColumn Composable来创建适合推荐观看区域的布局，再次复用了中等布局中的组件。
完整空间中的结果屏幕：生成的机器人，描述为：红色棒球帽、飞行员太阳镜、浅蓝色T恤、红白格子短裤、绿色人字拖，并拿着一个网球拍。
结果屏幕使用羽化效果显示赞美词，使它们在屏幕边缘附近逐渐淡出。在查看所使用的输入时，它还使用了真正的3D过渡效果，将图片在空间中翻转过来。
发布到Google Play商店
现在，应用已经通过空间布局为XR做好了准备，我们继续将其发布到Play商店。我们对应用的AndroidManifest.xml文件进行了一项最终的重要更改：
这可以让Play商店知道此应用具有XR差异化功能，显示一个徽章，让用户知道该应用是考虑到XR而制作的：
上传版本时，我们不需要为XR发布执行任何特殊步骤：同一个应用会像分发给移动端用户一样，正常分发给XR设备上的用户！但是，你可以选择添加应用的XR特定截图，甚至可以使用空间视频资源上传应用的沉浸式预览。在Android XR设备上，Play商店会自动将其显示为沉浸式3D预览，让用户在安装应用之前就能体验内容的深度和规模。
立即开始构建
Androidify是一个如何将现有2D Jetpack Compose应用空间化的绝佳示例。今天，我们展示了为Androidify开发空间UI的完整过程，从设计到编码再到发布。我们修改了现有设计以适应空间范式，使用SpatialPanel和Orbiter Composable创建了在用户进入完整空间时显示的空间布局，最后将新版本的应用发布到Play商店。
希望这篇博文能帮助你了解如何将你自己的应用带入Android XR。
