Tworzenie aplikacji na Androida w 3D za pomocą XR

​​

Twoja aplikacja na urządzenia mobilne lub na duży ekran z Androidem działa domyślnie w Androidzie XR jako panel 2D w przestrzeni 3D. Możesz dodać funkcje XR, aby wzbogacić dotychczasową aplikację na Androida w wersji 2D, przekształcając ją z interfejsu płaskiego ekranu w dynamiczne środowisko 3D.

Podczas przenoszenia aplikacji na Androida do XR weź pod uwagę te ważne zasady.

  • Funkcje przestrzenne: Android XR udostępnia różne funkcje przestrzenne, z których możesz korzystać w swojej aplikacji, ale nie musisz implementować wszystkich. Wdrażaj je strategicznie, aby uzupełniały wizualną hierarchię, układy i ścieżki użytkownika w aplikacji. Rozważ dodanie niestandardowych środowisk i kilku paneli, aby stworzyć naprawdę wciągające środowisko. Aby określić optymalną integrację elementów przestrzennych, zapoznaj się z wskazówkami dotyczącymi projektowania interfejsów przestrzennych.
  • Interfejs dostosowujący się do potrzeb użytkownika: XR daje Ci możliwość zaprojektowania przestronnego interfejsu, który bezproblemowo dostosowuje się do nieskończonego płótna i okna, których rozmiar można dowolnie zmieniać. Jednym z najważniejszych aspektów jest zapoznanie się z wskazówkami dotyczącymi projektowania na duże ekrany, aby zoptymalizować układ aplikacji pod kątem tego dużego środowiska. Nawet jeśli Twoja aplikacja jest obecnie dostępna tylko na urządzenia mobilne, możesz nadal wykorzystywać w niej atrakcyjne środowiska, aby zwiększyć komfort użytkowników. Jednak interfejs użytkownika zoptymalizowany pod kątem dużych ekranów to jeden z najlepszych sposobów na optymalizację aplikacji na potrzeby Androida XR.
  • Platforma interfejsu użytkownika: zalecamy tworzenie interfejsu za pomocą Jetpack Compose for XR. Jeśli Twoja aplikacja obecnie korzysta z elementów Views, zapoznaj się z artykułem Praca z elementami Views w XR, aby dowiedzieć się więcej o korzystaniu z interoperacyjności Compose podczas pracy z elementami Views. Możesz też rozważyć bezpośrednie korzystanie z biblioteki Jetpack SceneCore.
  • Publikowanie w Sklepie Play: aby mieć pewność, że aplikacja z rozszerzoną rzeczywistością będzie widoczna w Sklepie Play:
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

Wskazówki dotyczące konwertowania 2D komponentów interfejsu na 3D

Dzięki tym wskazówkom możesz sprawić, że Twoja aplikacja będzie wyglądać na zoptymalizowaną pod kątem XR.

  • Zapewnij zgodność z dużymi ekranami: upewnij się, że interfejs użytkownika aplikacji jest zgodny z zasadami projektowania dużych ekranów, aby zapewnić optymalną czytelność tekstu i treści w rozwiniętych środowiskach XR.
  • Strategiczne korzystanie z funkcji przestrzennych: określ kluczowe momenty na ścieżce użytkownika w aplikacji, w których wdrożenie funkcji przestrzennych poprawi wrażenia użytkownika i wykorzysta unikalne możliwości platformy.
  • Umieszczaj panele przestrzenne z myślą o wygodzie użytkownika: podczas projektowania układu z panelami przestrzennymi umieść je w odpowiedniej odległości od użytkownika, aby nie przytłaczały ani nie były zbyt blisko.
  • Używanie elastycznego interfejsu użytkownika w przypadku układów przestrzennych: korzystaj z koncepcji elastycznego interfejsu użytkownika, takich jak panele i stopniowe wyświetlanie, aby skutecznie dzielić układ na wiele paneli przestrzennych i optymalizować prezentację informacji.
  • Używanie orbiterów do trwałych elementów i wzorów: zarezerwuj orbitery na potrzeby trwałych i kontekstualnych elementów UX, takich jak nawigacja i elementy sterujące. Ogranicz używanie orbiterów, aby zachować przejrzystość i uniknąć chaosu.
  • Rozsądnie stosuj wzniesienie: stosuj wzniesienie przestrzenne do tymczasowych komponentów, które pozostają nieruchome i nie przewijają się wraz z treściami. Unikaj wyróżniania dużych obszarów, aby uniknąć dyskomfortu wizualnego i zachować zrównoważoną hierarchię wizualną.
  • Tworzenie interfejsu za pomocą interfejsu Material Design: jeśli tworzysz interfejs za pomocą najnowszej wersji alfa komponentów Material Design i układów dostosowujących, możesz dodać owijacz „EnableXrComponentOverrides”, aby włączyć zmiany XR w aplikacji. Więcej informacji znajdziesz w dokumentacji Material Design dla XR.

Jetpack Compose dla XR wprowadza nowe komponenty, które zarządzają ulepszeniami XR, aby nie musieć tego robić samodzielnie. Możesz na przykład użyć właściwości SpatialPopup i SpatialDialog, aby zastąpić ich odpowiedniki 2D. Te komponenty są wyświetlane jako typowy interfejs 2D, gdy interfejs przestrzenny jest niedostępny, a gdy jest dostępny, wyświetlają interfejs przestrzenny aplikacji. Ich używanie jest tak proste, jak wprowadzenie jednowierszowej zmiany, aby zastąpić odpowiedni element interfejsu 2D.

Przekształcanie dialogu w SpatialDialog

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

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

Przekształcanie wyskakującego okienka w SpatialPopup

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

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

Ulepszenie elementów interfejsu 2D

Jeśli chcesz uzyskać większą kontrolę nad interfejsem, możesz użyć funkcji SpatialElevation, aby podnieść dowolną kompozycję w aplikacji do poziomu powyżej panelu przestrzennego na osi Z, który ustawisz za pomocą funkcji SpatialElevationLevel. Pomaga to zwracać uwagę użytkowników, tworzy lepszą hierarchię i zwiększa czytelność, jak widać w następującym przykładzie.

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

Najważniejsze informacje o kodzie

  • Nie stosuj przestrzennego dźwięku ani nie podwyższaj głośności dużych obszarów i płaszczyzn, takich jak dolne i boczne warstwy.
  • Nie wyróżniaj elementów interfejsu użytkownika, które można przewijać razem z treścią.

Przenoszenie komponentów 2D do orbiterów

Orbitery to ruchome elementy zawierające elementy sterujące treściami w panelach przestrzennych. Pozwalają one na większą ilość miejsca na treści i dają użytkownikom szybki dostęp do funkcji bez zasłaniania głównej treści.

Kolumna nawigacji bez lokalizacji przestrzennej
Kolumna nawigacji z przestrzennym dźwigiem (dostosowana do rzeczywistości rozszerzonej)

Poniższy przykładowy kod pokazuje, jak przenieść komponent interfejsu 2D do orbitera.

// Previous approach
NavigationRail()

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

Najważniejsze informacje o orbiterach

  • Orbitery to komponenty przeznaczone do dołączania dotychczasowych elementów interfejsu do panelu przestrzennego.
  • Aby dowiedzieć się, które elementy należy przenieść na orbitery i których wzorców unikać, zapoznaj się z wskazówkami dotyczącymi projektowania aplikacji na Androida XR.
  • Zalecamy dostosowanie tylko kilku elementów nawigacji, takich jak pasek nawigacyjny, górny pasek aplikacji lub dolny pasek aplikacji.
  • Orbitery nie są widoczne, gdy nie jest włączone 3D. Na przykład nie będą wyświetlane w obszarze Home Space ani na urządzeniach takich jak telefony, tablety i urządzenia składane.

Migracja komponentów 2D do paneli przestrzennych

Panele przestrzenne to podstawowe elementy składowe interfejsu aplikacji na Androida XR.

Panele służą jako kontenery dla elementów interfejsu, interaktywnych komponentów i przestrzennych treści. Podczas projektowania możesz dodawać komponenty, takie jak orbitery dla elementów sterujących, oraz wyróżniać elementy interfejsu, aby zwracać uwagę na konkretne interakcje.

Najważniejsze informacje o kodzie

  • Aby sprawdzić, które elementy należy przenieść do paneli, a których schematów unikać, zapoznaj się ze wskazówkami dotyczącymi projektowania aplikacji na Androida XR.
  • Stosuj sprawdzone metody dotyczące umieszczania panelu przestrzennego:
    • Panele powinny pojawiać się w odległości 1,5 m od oczu użytkownika.
    • Treści powinny być widoczne w centralnej części pola widzenia o rozmiarach 41°.
  • Panele pozostają na miejscu, gdy użytkownik się przemieszcza. Ankerzy są dostępni tylko w przypadku przesyłania dalej.
  • Stosuj zaokrąglone rogi o szerokości 32 dp zalecane przez system.
  • Docelowe elementy dotykowe powinny mieć wymiary 56 dp i nie mogą być mniejsze niż 48 dp.
  • Zachowaj odpowiednie proporcje kontrastu, aby zapewnić czytelność, zwłaszcza jeśli używasz przezroczystych tła.
  • Stosuj się do zasad dotyczących kolorów w projektowaniu aplikacji na Androida i użyj systemu kolorów Material Design, aby wdrożyć motywy ciemny i jasny w aplikacji.
  • Używanie interfejsu API paneli przestrzennych z dotychczasowymi elementami interfejsu użytkownika.

Migracja interfejsu 2D do pojedynczego panelu przestrzennego

Domyślnie aplikacja jest wyświetlana w jednym panelu w obszarze Home Space. Dowiedz się, jak przełączać się między trybem Home Space i Full Space Aby przenieść te treści do pełnego miejsca, możesz użyć SpatialPanel.

Oto przykład, jak to zrobić.

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

Przenoszenie interfejsu 2D do wielu paneli przestrzennych

Możesz użyć jednego panelu przestrzennego dla interfejsu aplikacji lub przenieść interfejs 2D do wielu paneli przestrzennych. Jeśli zdecydujesz się użyć w interfejsie aplikacji kilku paneli, możesz je ustawić i obrócić (podobnie jak w przypadku układu interfejsu 2D). Najpierw musisz mieć jasną wizję tego, co chcesz osiągnąć. Następnie możesz użyć interfejsów API do tworzenia układów przestrzennych (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) i modyfikatorów przestrzeni podrzędnej, aby umieszczać i obracać panele. Podczas wdrażania wielu paneli należy unikać pewnych kluczowych wzorców.

  • Unikaj nakładania się paneli, które uniemożliwiałyby użytkownikowi wyświetlanie ważnych informacji.
  • Nie zasypuj użytkownika panelami.
  • Unikaj umieszczania paneli w niedogodnych lub niezauważalnych miejscach docelowych. Przykład: panele umieszczone za użytkownikiem są trudne do zauważenia.
  • Więcej informacji o rozwijaniu interfejsu 3D znajdziesz w naszych wskazówkach.
Treści nieprzestrzenne
Sterowanie multimediami w przestrzeni (przystosowane do XR) w ramach orbitera oraz treści podzielonych na kilka paneli przestrzennych
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()
    }
}

Sprawdzanie możliwości dźwięku przestrzennego

Decydując, czy wyświetlać konkretny element interfejsu, nie zaznaczaj opcji dotyczących konkretnych urządzeń lub trybów XR. Sprawdzanie urządzeń lub trybów zamiast możliwości może powodować problemy, gdy możliwości danego urządzenia zmieniają się z czasem. Zamiast tego użyj funkcji LocalSpatialCapabilities.current.isSpatialUiEnabled, aby bezpośrednio sprawdzić, czy urządzenie ma niezbędne możliwości przestrzenne, jak pokazano w poniższym przykładzie. Dzięki temu Twoja aplikacja będzie się prawidłowo dostosowywać do różnych doświadczeń XR bez konieczności aktualizowania jej za każdym razem, gdy pojawią się nowe urządzenia lub zmienią się możliwości.

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

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

Używanie środowisk do zmiany otoczenia użytkownika

Jeśli chcesz stworzyć w aplikacji poczucie zanurzenia, zmieniając otoczenie użytkownika, możesz to zrobić za pomocą środowisk. Dodanie środowiska w kodzie jest prostą zmianą, którą możesz wprowadzić bez znacznego wpływu na istniejący interfejs aplikacji. Więcej informacji o konfigurowaniu środowisk znajdziesz w naszych wskazówkach.

Dodawanie modeli 3D

Treści 3D mogą pomóc w stworzeniu bardziej wciągającego wrażenia i zrozumieniu przestrzeni. Podobnie jak w przypadku innych funkcji przestrzennych i 3D, Twoja aplikacja może wyświetlać modele 3D tylko wtedy, gdy włączona jest opcja treści 3D. Dlatego musisz zadbać o to, aby aplikacja zapewniała użytkownikom wygodę także bez dodanych obiektów 3D.

Dodawanie modeli 3D za pomocą narzędzia SceneViewer

Jeśli chcesz zaprezentować użytkownikom modele 3D, możesz to zrobić na kilka sposobów. Gdy masz plik glTF gotowy do użycia na serwerze, najprostszym sposobem jest użycie narzędzia SceneViewer XR. Aby to zrobić, utwórz jawny zamiar, który uruchomi aplikację XR SceneViewer na urządzeniu. Dzięki temu użytkownik będzie mógł wyświetlić obiekt i bez ograniczeń przesuwać go w przestrzeni.

Dodawanie modeli 3D bezpośrednio z poziomu encji Volume

Jeśli chcesz mieć większą kontrolę nad pozycją modelu 3D, jego względną wielkością lub szczegółowymi animacjami, możesz załadować zasób glTF bezpośrednio w aplikacji. Po załadowaniu modelu 3D możesz użyć komponentu Volume, aby owinąć obiekt modelu glTF i zastosować modyfikatory podprzestrzeni, aby kontrolować sposób jego wyświetlania. Za pomocą Volume możesz deklaratywnie umieszczać modele 3D względem interfejsu przestrzennego. Więcej informacji o wyświetlaniu modeli 3D w aplikacji znajdziesz w artykule Tworzenie, kontrolowanie i zarządzanie elementami.