Przenoszenie Androidify do XR za pomocą pakietu SDK Jetpack XR

Samsung Galaxy XR jest już dostępny, dzięki Androidowi XR! Ten post na blogu jest częścią tygodnia poświęconego Androidowi XR, w którym udostępniamy materiały – posty na blogu, filmy, przykłady kodu i inne – które pomogą Ci poznać Androida XR, tworzyć aplikacje na tę platformę i przygotować je do działania na niej.

Wraz z premierą Samsunga Galaxy XR oficjalnie pojawiło się pierwsze urządzenie z Androidem XR. Użytkownicy mogą teraz korzystać z wielu ulubionych aplikacji ze Sklepu Play w zupełnie nowym wymiarze – w 3D.

Trzeci wymiar jest przestronny i zapewnia dużo miejsca również dla Twoich aplikacji. Zacznij już dziś, korzystając z narzędzi, które najlepiej pasują do Twojej aplikacji. Możesz na przykład użyć pakietu SDK Jetpack XR, aby tworzyć wciągające środowiska XR za pomocą nowoczesnych narzędzi do tworzenia aplikacji na Androida, takich jak Kotlin i Compose.

W tym poście na blogu opowiemy o naszej podróży, podczas której przenieśliśmy do XR kapryśną aplikację Androidify, oraz omówimy podstawy przenoszenia aplikacji do XR.

Przewodnik po Androidify

Androidify to aplikacja open source, która umożliwia tworzenie botów Androida za pomocą najnowszych technologii, takich jak Gemini, CameraX, Navigation 3 i oczywiście Jetpack Compose. Aplikacja Androidify została pierwotnie zaprojektowana tak, aby dobrze wyglądać na telefonach, urządzeniach składanych i tabletach dzięki tworzeniu adaptacyjnych układów.

Androidify świetnie wygląda na różnych urządzeniach

Kluczowym elementem układów adaptacyjnych są komponenty wielokrotnego użytku. Jetpack Compose pomaga tworzyć małe komponenty interfejsu, które można układać na różne sposoby, aby zapewnić intuicyjną obsługę niezależnie od typu urządzenia. Androidify jest zgodny z Androidem XR bez żadnych modyfikacji aplikacji.

Androidify dostosowuje się do XR dzięki układowi responsywnemu na dużym ekranie bez zmian w kodzie

Aplikacje, które nie mają specjalnej obsługi Androida XR, mogą być używane w trybie wielozadaniowości w oknie o odpowiednim rozmiarze i działać podobnie jak na dużym ekranie. Dzięki temu Androidify jest już w pełni funkcjonalny na Androidzie XR bez dodatkowej pracy. Nie chcieliśmy jednak na tym poprzestać, dlatego postanowiliśmy pójść o krok dalej i stworzyć aplikację dostosowaną do XR, aby zapewnić użytkownikom XR jak najlepsze wrażenia.

Orientacja w XR

Omówmy najważniejsze podstawowe pojęcia dotyczące Androida XR, zaczynając od 2 trybów, w których można uruchamiać aplikacje: przestrzeń domowa i pełna przestrzeń.

W przestrzeni domowej można uruchamiać kilka aplikacji obok siebie, dzięki czemu użytkownicy mogą wykonywać wiele zadań w różnych oknach. Pod tym względem przypomina to okna na komputerze stacjonarnym na urządzeniu z Androidem z dużym ekranem, ale w przestrzeni wirtualnej.

W pełnej przestrzeni aplikacja nie ma granic i może korzystać z pełnych funkcji przestrzennych Androida XR, takich jak przestrzenny interfejs i sterowanie środowiskiem wirtualnym.

Może się wydawać, że warto uruchamiać aplikację tylko w pełnej przestrzeni, ale użytkownicy mogą chcieć korzystać z niej w trybie wielozadaniowości, dlatego obsługa obu trybów zapewnia lepsze wrażenia.

Projektowanie dla nowego wymiaru Androidify

Dobra aplikacja zaczyna się od świetnego projektu. Ivy Knight, starsza specjalistka ds. projektowania w zespole Android DevRel, podjęła się zadania stworzenia nowego projektu dla XR na podstawie istniejących projektów Androidify. Ivy, oddajemy Ci głos!

Projektowanie dla XR wymagało unikalnego podejścia, ale w rzeczywistości miało wiele wspólnego z projektowaniem mobilnym. Zaczęliśmy od zastanowienia się nad tym, jak zorganizować i pogrupować elementy interfejsu w podprzestrzeni, albo przez wyraźne pokazanie granic, albo przez subtelne ich zasugerowanie. Nauczyliśmy się też korzystać z różnych rozmiarów przestrzennych elementów interfejsu, które mają się dostosowywać i przesuwać w odpowiedzi na działania użytkownika. Podobnie jak w przypadku Androidify, twórz układy adaptacyjne, aby dzielić je na części na potrzeby przestrzennego interfejsu.

Rozpoczęcie projektowania od przestrzeni domowej

Na szczęście Android XR umożliwia rozpoczęcie pracy z aplikacją w jej obecnej postaci w przestrzeni domowej, dzięki czemu mogliśmy przejść do rozszerzonych projektów XR, dodając tylko pasek narzędzi okna i przycisk przejścia do pełnej przestrzeni.

Wzięliśmy też pod uwagę możliwe funkcje sprzętowe i sposób, w jaki użytkownik będzie z nich korzystać. Układy mobilne Androidify dostosowują się do różnych pozycji, rozmiarów klas i liczby aparatów, aby zapewnić więcej opcji zdjęć. Zgodnie z tym modelem musieliśmy też dostosować układ aparatu do gogli. Musieliśmy też wprowadzić zmiany w tekście, aby uwzględnić bliskość interfejsu do użytkownika.

Projektowanie z myślą o większej zmianie w pełnej przestrzeni

Pełna przestrzeń była największą zmianą, ale dała nam najwięcej swobody w dostosowywaniu projektu. 

Androidify używa wizualnego ograniczenia, czyli paneli, do grupowania funkcji z tłem i konturem, takich jak panel „Zrób lub wybierz zdjęcie”. Użyliśmy też komponentów, takich jak górny pasek aplikacji, aby stworzyć naturalne ograniczenie przez obramowanie innych paneli. Wreszcie, ograniczenie wewnętrzne jest sugerowane przez bliskość niektórych elementów do innych, np. przycisku „Rozpocznij transformację” u dołu, który znajduje się w pobliżu panelu „Wybierz kolor bota”.

Panele przestrzenne ułatwiają oddzielanie. Aby zdecydować, jak dostosować projekty mobilne do paneli przestrzennych, spróbuj usunąć powierzchnie, zaczynając od powierzchni najbardziej oddalonej, a następnie przesuwając się do przodu. Sprawdź, ile tła możesz usunąć i co pozostanie. Po wykonaniu tego ćwiczenia w przypadku Androidify pozostał duży zielony zygzak Androida. Zygzak nie tylko pełnił funkcję elementu brandingowego i tła, ale też kotwicy dla treści w przestrzeni 3D.

Ustanowienie tej kotwicy ułatwiło wyobrażenie sobie, jak elementy mogą się wokół niej poruszać i jak możemy wykorzystać bliskość, aby wyjść z ograniczeń i przenieść resztę wrażeń użytkownika.

Inne wskazówki dotyczące projektowania, które pomogą Ci stworzyć aplikację przestrzenną

• Pozwól, aby elementy nie były ograniczone: wyodrębnij komponenty i daj im trochę prawdziwej (przestrzennej) przestrzeni. Czas dać tym elementom interfejsu trochę miejsca.
• Usuń powierzchnie: ukryj tło i zobacz, co to zrobi z Twoimi projektami.
• Motywuj ruchem: jak używasz przejść w aplikacji? Użyj tej postaci, aby wyobrazić sobie, jak Twoja aplikacja przenosi się do VR.
• Wybierz kotwicę: nie pozwól, aby użytkownicy zgubili się w przestrzeni. Użyj elementu, który pomoże zebrać lub uziemić interfejs.

Więcej informacji o wzorcach projektowania interfejsu XR znajdziesz w artykule Projektowanie dla Androida XR w Android Developers.

Podstawy przestrzennego interfejsu

Teraz, gdy omówiliśmy doświadczenia Ivy związane z dostosowywaniem sposobu myślenia podczas projektowania Androidify dla XR, porozmawiajmy o tworzeniu przestrzennego interfejsu. Tworzenie przestrzennego interfejsu za pomocą pakietu SDK Jetpack XR powinno być znajome, jeśli masz doświadczenie w pracy z nowoczesnymi narzędziami i bibliotekami Androida. Znajdziesz tu znane Ci koncepcje, takie jak tworzenie układów za pomocą Compose. Układy przestrzenne są bardzo podobne do układów 2D z użyciem wierszy, kolumn i odstępów:

Te elementy są ułożone w SpatialRows i SpatialColumns

Wyświetlane tu elementy przestrzenne to SpatialPanel komponenty, które umożliwiają wyświetlanie treści 2D, takich jak tekst, przyciski i filmy.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

SpatialPanel to komponent podprzestrzeni. Komponenty podprzestrzeni muszą znajdować się w podprzestrzeni i są modyfikowane przez obiekty SubspaceModifier. Podprzestrzenie można umieszczać w dowolnym miejscu w hierarchii interfejsu aplikacji i mogą one zawierać tylko komponenty podprzestrzeni.Obiekty SubspaceModifier są też bardzo podobne do obiektów Modifier: kontrolują parametry takie jak rozmiar i położenie.

Do SpatialPanel można dołączyć Orbiter i przesuwać go razem z treścią, do której jest dołączony. Służą one często do udostępniania kontekstowych elementów sterujących dotyczących treści, do których są dołączone, dzięki czemu treść jest głównym elementem. Można je umieszczać po dowolnej z 4 stron treści w konfigurowalnej odległości.

Jest wiele innych elementów przestrzennego interfejsu, ale to główne elementy, których użyliśmy do tworzenia układów przestrzennych dla Androidify.

Pierwsze kroki z tworzeniem aplikacji na XR

Zacznijmy od konfiguracji projektu. Dodaliśmy zależność Jetpack XR Compose, którą znajdziesz na stronie zależności Jetpack XR.

Dodaliśmy kod przycisku, który przenosi użytkownika do pełnej przestrzeni, zaczynając od wykrycia możliwości wykonania tej czynności:

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

Następnie dodaliśmy do istniejących układów nowy komponent przycisku, który używa ikony Rozwiń treść, i przypisaliśmy mu działanie onClick:

@Composable

fun 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"),
       )
   }
}

Teraz kliknięcie tego przycisku powoduje wyświetlenie układu średniego w pełnej przestrzeni. Możemy sprawdzić możliwości przestrzenne i określić, czy można wyświetlić przestrzenny interfejs. W takim przypadku wyświetlimy nowy układ przestrzenny:

@Composable

fun 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(...)
   }
}

Implementowanie projektu na ekranie głównym

Wróćmy do projektu przestrzennego na ekranie głównym w pełnej przestrzeni, aby zrozumieć, jak został zaimplementowany.

Zidentyfikowaliśmy tu 2 elementy SpatialPanel: jeden panel, w którym znajduje się karta filmu po prawej stronie, i jeden, który zawiera główny interfejs. Na koniec do góry dołączony jest Orbiter. Zacznijmy od panelu odtwarzacza wideo:

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

Po prostu użyliśmy komponentu 2D VideoPlayer ze zwykłych układów w SpatialPanel bez dodatkowych zmian. Oto jak wygląda samodzielnie:

Panel głównych treści działał tak samo: użyliśmy treści panelu średniego w SpatialPanel.

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

Przypisaliśmy do tego panelu ResizePolicy, który dodaje do panelu uchwyty w pobliżu krawędzi, umożliwiające użytkownikowi zmianę rozmiaru panelu. Ma też MovePolicy, który umożliwia użytkownikowi przeciąganie go.

Umieszczenie ich w tej samej podprzestrzeni sprawia, że są od siebie niezależne, dlatego panel VideoPlayer został podrzędnym elementem panelu głównych treści. Dzięki temu panel VideoPlayer przesuwa się, gdy panel głównych treści jest przeciągany w relacji nadrzędny-podrzędny.

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

W ten sposób stworzyliśmy pierwszy ekran.

Przechodzenie do innych ekranów

Krótko omówię też inne ekrany, zwracając uwagę na konkretne kwestie, które zostały wzięte pod uwagę w przypadku każdego z nich.

Użyliśmy tu komponentów SpatialRow i SpatialColumn, aby utworzyć układ pasujący do zalecanej przestrzeni wyświetlania, ponownie używając komponentów z układu średniego.

Ekran wyników w pełnej przestrzeni: bot wygenerowany na podstawie prompta: czerwona czapka baseballowa, okulary przeciwsłoneczne, jasnoniebieska koszulka, czerwono-białe szorty w kratkę, zielone klapki i rakieta tenisowa.

Na ekranie wyników wyświetlają się bezpłatne cytaty z efektem rozmycia, dzięki czemu znikają w pobliżu krawędzi ekranu. Podczas wyświetlania użytego wejścia używa też rzeczywistego przejścia 3D, które obraca obraz w przestrzeni.

Publikowanie w Sklepie Google Play

Gdy aplikacja była już gotowa do XR z układami przestrzennymi, opublikowaliśmy ją w Sklepie Play. W pliku AndroidManifest.xml aplikacji wprowadziliśmy jeszcze jedną ważną zmianę:

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

Dzięki temu Sklep Play wie, że ta aplikacja ma funkcje dostosowane do XR, i wyświetla plakietkę informującą użytkowników, że aplikacja została stworzona z myślą o XR:

Podczas przesyłania wersji nie musimy wykonywać żadnych specjalnych czynności, aby opublikować aplikację na XR: ta sama aplikacja jest rozpowszechniana w normalny sposób wśród użytkowników na ścieżce mobilnej i na urządzeniu z XR. Możesz jednak dodać zrzuty ekranu aplikacji przeznaczone na XR lub przesłać wciągającą prezentację aplikacji za pomocą przestrzennego pliku wideo. Na urządzeniach z Androidem XR Sklep Play automatycznie wyświetla ją jako wciągającą prezentację 3D, dzięki czemu użytkownicy mogą poznać głębię i skalę Twoich treści przed zainstalowaniem aplikacji.

Zacznij tworzyć własne środowiska już dziś

Androidify to świetny przykład tego, jak można przestrzennie dostosować istniejącą aplikację 2D Jetpack Compose. Dziś pokazaliśmy cały proces tworzenia przestrzennego interfejsu dla Androidify – od projektu przez kod po publikację. Zmodyfikowaliśmy istniejące projekty, aby działały z paradygmatami przestrzennymi, użyliśmy komponentów SpatialPanel i Orbiter do tworzenia układów przestrzennych, które wyświetlają się, gdy użytkownik przechodzi do pełnej przestrzeni, a na koniec opublikowaliśmy nową wersję aplikacji w Sklepie Play.

Mamy nadzieję, że ten post na blogu pomógł Ci zrozumieć, jak możesz przenieść swoje aplikacje na Androida XR. Oto kilka dodatkowych linków, które mogą Ci pomóc:

• Sprawdź kod źródłowy Androidify i stwórz własnego bota za pomocą Androidify w Google Play.
• Zapoznaj się z dokumentacją dla deweloperów i dowiedz się więcej o Jetpack Compose dla XR.
• Pobierz emulator Androida XR i wypróbuj własną aplikację.