使用 XR 將 Android 應用程式轉換為 3D

​​

根據預設，您的 2D 行動或大螢幕 Android 應用程式會在 Android XR 中運作，並在 3D 空間中顯示為 2D 面板。您可以新增沉浸式 XR 功能，強化現有的 2D Android 應用程式，將其從平面螢幕體驗轉換為動態 3D 環境。

將 Android 應用程式導入 XR 時，請考量下列重要原則。

  • 空間功能：Android XR 提供多種可供應用程式使用的空間功能，但您不必實作每項功能。請策略性地實作這些元素，以補足應用程式的視覺階層、版面配置和使用者歷程。建議您加入自訂環境和多個面板，打造真正身歷其境的體驗。請參閱空間 UI 設計指南，判斷如何最佳整合空間元素。
  • 自動調整式 UI：您可以靈活設計寬敞的 UI，讓其能無縫調整為無限畫布和可自由調整大小的視窗。其中最重要的考量之一，就是遵循大螢幕設計指南，針對這個廣闊的環境最佳化應用程式的版面配置。即使應用程式目前僅支援行動裝置，您還是可以利用迷人的環境來提升使用者體驗，但針對大螢幕最佳化的使用者介面，是為 Android XR 最佳化應用程式的最佳方式之一。
  • UI 架構：建議您使用 Jetpack Compose 建構 XR 的 UI。如果您的應用程式目前依賴 View，請參閱「在 XR 中使用 View」，進一步瞭解如何在使用 View 時善用 Compose 互通性，或評估直接使用 Jetpack SceneCore 程式庫的做法。
  • 在 Play 商店中發布：如要確保 XR 強化應用程式可在 Play 商店中找到，請按照下列步驟操作： 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

將 2D UI 元件轉換為 3D 的訣竅

遵循這些提示，就能讓應用程式看起來像是針對 XR 進行最佳化。

  • 優先考量大螢幕相容性：請確保應用程式的 UI 遵循大螢幕設計原則，以便在擴增/虛擬實境環境中，確保文字和內容的最佳可讀性。
  • 策略性地使用空間功能：找出應用程式使用者歷程中的重要時刻，在這些時刻中加入空間功能，藉此提升體驗並善用平台的獨特功能。
  • 以使用者舒適度為考量來放置空間面板：設計含有空間面板的版面配置時，請將其放置在與使用者保持舒適距離的位置，避免過度擁擠或過於靠近的感受。
  • 為空間版面配置使用自適應 UI：利用分頁和漸進式揭露等自適應 UI 概念，將版面配置有效分解為多個空間分頁，以便最佳化資訊呈現方式。
  • 針對持續性元素和模式使用 Orbiter：將 Orbiter 保留給持續性和情境性的 UX 元素，例如導覽和控制項。請限制使用軌道器，以維持清晰度並避免雜亂。
  • 妥善運用升降效果：將空間升降效果套用至不會隨著內容捲動的暫時性元件。避免將大範圍區域設為突出，以免造成視覺不適，並維持平衡的視覺階層。
  • 使用 Material Design 進行建構：如果您使用的是 Material Design 元件和自適應版面配置的最新 Alpha 版，可以新增「EnableXrComponentOverrides」包裝函式，選擇在應用程式中啟用 XR 變更。請參閱 Material Design for XR 說明文件，進一步瞭解相關資訊。

XR 適用的 Jetpack Compose 推出了新的元件，可管理 XR 增強功能，讓您不必自行管理。舉例來說，您可以使用 SpatialPopup 和 SpatialDialog 取代 2D 對應項目。在無法使用空間 UI 時，這些元件會顯示為一般 2D UI，並在可用時顯示應用程式的空間 UI。使用方式非常簡單，只需進行一行變更即可取代相應的 2D UI 元素。

將對話方塊轉換為 SpatialDialog

// Previous approach
Dialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
   onDismissRequest = onDismissRequest
) {
   MyDialogContent()
}

將彈出式視窗轉換為 SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
   MyPopupContent()
}

提升 2D UI 元素

如要提升 UI 並進一步掌控細節，我們提供 SpatialElevation，讓您將應用程式中的任何可組合項提升至使用 SpatialElevationLevel 所設定 Z 軸上方空間面板的層級。這有助於吸引使用者注意、建立更完善的階層，並改善可讀性，如以下範例所示。

//  Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
   ComposableThatShouldElevateInXr()
}

程式碼的重點

  • 請勿將大型區域和平面 (例如底部資訊卡和側邊資訊卡) 空間化或提升。
  • 請勿提升可與內容捲動的 UI 元素。

將 2D 元件遷移至 Orbiter

Orbiter 是浮動元素，包含空間面板內內容的控制項。可讓內容有更多空間，讓使用者快速存取功能，且不會阻礙主要內容。

非空間化導覽邊欄
空間化 (適應 XR) 導覽邊欄

以下程式碼範例說明如何將 2D UI 元件遷移至 Orbiter。

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Start
) {
    NavigationRail()
}

關於衛星的要點

  • Orbiter 是用於將現有 UI 元素附加至空間面板的元件
  • 請參閱 Android XR 應用程式設計指南，確認應為 Orbiter 遷移哪些元素，以及應避免哪些模式。
  • 建議您只調整少數導覽元件，例如導覽邊欄、頂端應用程式列或底部應用程式列。
  • 未啟用空間 UI 時，不會顯示 Orbiter。舉例來說，這些內容不會顯示在主畫面或手機、平板電腦和折疊式裝置等裝置上。

將 2D 元件遷移至空間面板

空間面板是 Android XR 應用程式 UI 的基本構成元素。

面板可做為 UI 元素、互動式元件和沉浸式內容的容器。設計時，您可以為使用者控制項新增 orbiter 等元件，並在空間上提升 UI 元素，以吸引使用者注意特定互動。

程式碼的重點

  • 請參閱 Android XR 應用程式設計指南，瞭解應將哪些元素遷移至面板，以及應避免採用的模式。
  • 遵循空間面板放置的最佳做法：
    • 面板應在距離使用者眼睛 1.5 公尺處產生。
    • 內容應顯示在使用者視野中心的 41° 範圍內。
  • 面板會在使用者移動時保持原位。錨定功能僅適用於透視模式。
  • 請遵循系統建議的 32 dp 圓角面板。
  • 觸控目標應為 56 dp，且不得小於 48 dp。
  • 維持對比率，讓文字更易於閱讀，尤其是在使用透明背景時。
  • 遵循 Android 設計顏色原則，並使用 Material Design 色彩系統為應用程式實作深色和淺色主題。
  • 使用空間面板 API 搭配現有的 UI 元素。

將 2D UI 遷移至單一空間面板

根據預設，應用程式會在住家空間中顯示單一面板。瞭解如何在居家空間和全螢幕模式之間切換。如要將該內容帶入 Full Space，您可以使用 SpatialPanel。

以下提供範例說明如何執行這項操作。

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {    
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
         ) {
            AppContent(appContainer, widthSizeClass)
        }
    }
} else {
    AppContent(appContainer, widthSizeClass)
}

將 2D UI 遷移至多個空間面板

您可以為應用程式的 UI 使用單一空間面板，也可以將 2D UI 遷移至多個空間面板。如果您選擇為應用程式的 UI 使用多個面板，可以定位及旋轉面板 (類似於在 2D 中排版 UI)。您可以先針對想要達成的目標，擬定明確的設計願景，然後使用 Spatial UI Layout API (SpatialBox、SpatialRow、SpatialColumn、SpatialLayoutSpacer、SpatialAlignment) 和子區域修飾符，設定面板位置和旋轉角度。實作多個面板時，請避免採用某些重要模式。

  • 避免重疊面板，以免使用者無法查看重要資訊。
  • 避免使用者因資訊過多而感到不堪負荷。
  • 避免將面板放置在令人不適或不易察覺的位置。範例：放置在使用者後方的面板很難察覺。
  • 如要進一步瞭解如何開發空間 UI，請參閱完整的指南。
非空間化內容
在軌道器中提供空間化 (XR 專用) 媒體控制選項，並將內容分割成多個空間化面板
SpatialRow(curveRadius = 825.dp) {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

檢查空間功能

決定是否要顯示特定 UI 元素時，請勿檢查特定 XR 裝置或模式。檢查裝置或模式 (而非功能) 可能會在特定裝置的功能隨時間變動時造成問題。請改用 LocalSpatialCapabilities.current.isSpatialUiEnabled 直接檢查是否有必要的空間化功能，如以下範例所示。這種做法可確保應用程式正確調整至各種 XR 體驗，而不需要每次有新裝置推出或功能變更時就需要更新。

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

//Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

使用環境變更使用者的周遭環境

如要透過變更使用者的周遭環境，營造應用程式沉浸感，您可以使用環境。在程式碼中新增環境是簡單的變更，您可以進行這項變更，而不會對應用程式現有的 UI 造成重大影響。如要進一步瞭解如何設定環境，請務必參閱完整的指南。

新增 3D 模型

3D 內容有助於打造更身歷其境的體驗，並增進空間理解能力。如同其他空間和 3D 功能，應用程式只能在啟用 3D 內容時顯示 3D 模型，因此您必須確保應用程式在未加入 3D 物件時，仍能提供絕佳體驗。

使用 SceneViewer 新增 3D 模型

如要向使用者呈現 3D 模型，可以透過多種方式解決問題。當您準備好在伺服器上使用的 glTF 時，最簡單的方法就是使用 SceneViewer XR。您可以建立明確的意圖，在裝置上啟動 SceneViewer XR 應用程式。這樣一來，使用者就能在周遭環境中查看物件，並自由移動及調整物件大小。

使用實體 Volume 直接新增 3D 模型

如果您想進一步控管 3D 模型的位置、相對大小或精細動畫等項目，可以直接在應用程式中載入 glTF 資源。載入 3D 模型後，您可以使用 Volume 可組合項包裝 glTF 模型實體，並套用子區域修飾符來控管其呈現方式。使用 Volume 可讓您以宣告方式將 3D 模型放置在相對於空間 UI 的位置。如要進一步瞭解如何在應用程式中顯示 3D 模型，請參閱「建立、控制及管理實體」。