XR ile Android uygulamanızı 3D'ye dönüştürme

​​

2D mobil veya büyük ekran Android uygulamanız, varsayılan olarak Android XR'de çalışır ve 3D alanda 2D panel olarak gösterilir. Mevcut 2D Android uygulamanızı düz ekran deneyiminden dinamik bir 3D ortama geçirerek geliştirmek için etkileyici XR özellikleri ekleyebilirsiniz.

Android uygulamanızı XR'ye taşırken bu önemli ilkeleri göz önünde bulundurun.

  • Uzamsal özellikler: Android XR, uygulamanızda kullanabileceğiniz çeşitli uzamsal özellikler sunar ancak her bir özelliği uygulamanız gerekmez. Uygulamanızın görsel hiyerarşisini, düzenlerini ve kullanıcı yolculuklarını tamamlayan öğeleri stratejik bir şekilde uygulayın. Gerçekten sürükleyici bir deneyim oluşturmak için özel ortamlar ve birden fazla panel ekleyebilirsiniz. Mekansal öğelerin en uygun entegrasyonunu belirlemek için uzamsal kullanıcı arayüzü tasarımı kılavuzuna bakın.
  • Uyarlanabilir kullanıcı arayüzü: XR, sonsuz bir kanvas ve özgürce yeniden boyutlandırılabilen pencerelere sorunsuz bir şekilde uyum sağlayan geniş bir kullanıcı arayüzü tasarlama esnekliği sunar. En önemli hususlardan biri, uygulamanızın düzenini bu geniş ortam için optimize etmek amacıyla büyük ekran tasarımı kılavuzumuzu kullanmaktır. Uygulamanız şu anda yalnızca mobil cihazlarda kullanılıyor olsa bile kullanıcı deneyimini iyileştirmek için etkileyici ortamlardan yararlanabilirsiniz. Ancak uygulamanızı Android XR için optimize etmenin en iyi yollarından biri büyük ekranlar için optimize edilmiş bir kullanıcı arayüzü kullanmaktır.
  • Kullanıcı arayüzü çerçevesi: Kullanıcı arayüzünüzü XR için Jetpack Compose ile oluşturmanızı öneririz. Uygulamanız şu anda Görünümler'i kullanıyorsa Görünümler ile çalışırken Compose birlikte çalışabilirliğinden yararlanma hakkında daha fazla bilgi edinmek için XR'de Görünümler ile çalışma başlıklı makaleyi inceleyin veya doğrudan Jetpack SceneCore kitaplığıyla çalışmayı değerlendirin.
  • Play Store'da yayınlama: XR ile geliştirilmiş uygulamanızın Play Store'da bulunabilir olmasını sağlamak için: 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

2D kullanıcı arayüzü bileşenlerini 3D'ye dönüştürmeyle ilgili ipuçları

Bu ipuçlarını uygulamak, uygulamanızın XR için optimize edilmiş gibi görünmesini sağlama konusunda büyük bir fark yaratabilir.

  • Büyük ekran uyumluluğuna öncelik verin: Geniş XR ortamlarında metin ve içeriğin okunaklılığını en üst düzeye çıkarmak için uygulamanızın kullanıcı arayüzünün büyük ekran tasarım ilkelerine uyduğundan emin olun.
  • Uzamsal özellikleri stratejik olarak kullanın: Uygulamanızın kullanıcı yolculuğunda, uzamsal özelliklerin dahil edilmesinin deneyimi iyileştireceği önemli anları belirleyin ve platformun benzersiz özelliklerinden yararlanın.
  • Uzamsal panelleri kullanıcı konforunu göz önünde bulundurarak yerleştirin: Uzamsal panellerle düzeninizi tasarlarken, kullanıcının bunalmasını veya çok yakın hissetmesini önlemek için panelleri kullanıcıdan rahat bir mesafede konumlandırın.
  • Uzamsal düzenler için uyarlanabilir kullanıcı arayüzü kullanın: Bilgi sunumunu optimize etmek amacıyla düzeninizi birden fazla uzamsal panele etkili bir şekilde ayırmak için paneller ve aşamalı olarak gösterme gibi uyarlanabilir kullanıcı arayüzü kavramlarından yararlanın.
  • Kalıcı öğeler ve kalıplar için yörüngeleri kullanın: Gezinme ve kontroller gibi kalıcı ve bağlama dayalı kullanıcı deneyimi öğeleri için yörüngeleri kullanın. Netliği korumak ve dağınıklığı önlemek için yörünge araçlarının kullanımını sınırlayın.
  • Yükseklik özelliğini bilinçli bir şekilde kullanın: Sabit kalan ve içerikle birlikte kaydırılmayan geçici bileşenlere mekansal yükseklik uygulayın. Görsel rahatsızlığı önlemek ve dengeli bir görsel hiyerarşi sağlamak için büyük alanları öne çıkarmamaya çalışın.
  • Materyal Tasarım ile oluşturma: Materyal Tasarım bileşenlerinin ve uyarlanabilir düzenlerin en son alfa sürümünü kullanarak oluşturma işlemi yapıyorsanız uygulamanızda XR değişikliklerini etkinleştirmek için "EnableXrComponentOverrides" sarmalayıcısını ekleyebilirsiniz. Daha fazla bilgi edinmek için XR için Materyal Tasarım dokümanlarımızı inceleyin.

XR için Jetpack Compose, XR geliştirmelerini sizin yerinize yöneten yeni bileşenler sunar. Örneğin, 2D eşdeğerlerinin yerine SpatialPopup ve SpatialDialog kullanabilirsiniz. Bu bileşenler, mekansal kullanıcı arayüzü kullanılamadığında tipik 2D kullanıcı arayüzü olarak görünür ve mümkün olduğunda uygulamanızın mekansal kullanıcı arayüzünü gösterir. Bunları kullanmak, ilgili 2D kullanıcı arayüzü öğesini değiştirmek için tek satırlık bir değişiklik yapmak kadar kolaydır.

Bir iletişim kutusunu SpatialDialog'a dönüştürme

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

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

Pop-up'ı SpatialPopup'a dönüştürme

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

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

2D kullanıcı arayüzü öğelerini geliştirme

Kullanıcı arayüzünü daha ayrıntılı bir denetimle geliştirmek istediğinizde, uygulamanızdaki tüm derlenebilir öğeleri SpatialElevationLevel ile ayarladığınız Z eksenindeki mekansal panelin üstündeki bir seviyeye yükseltmenize olanak tanıyan SpatialElevation işlevini sunarız. Bu, kullanıcının dikkatini çekmeye yardımcı olur, daha iyi bir hiyerarşi oluşturur ve aşağıdaki örnekte gösterildiği gibi okunabilirliği artırır.

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

Kodla ilgili önemli noktalar

  • Alt sayfalar ve yan sayfalar gibi büyük alanları ve düzlemleri uzamsallaştırmayın veya yükseltmeyin.
  • İçerikle birlikte kaydırılabilir kullanıcı arayüzü öğelerini öne çıkarmayın.

2D bileşenleri yörüngedeki araçlara taşıma

Yörüngeciler, mekansal panellerdeki içeriğin kontrollerini içeren yüzen öğelerdir. Bu öğeler, içeriğin daha fazla alana sahip olmasına olanak tanır ve ana içeriği engellemeden kullanıcılara özelliklere hızlı erişim sağlar.

Mekansal olmayan gezinme çubuğu
Üç boyutlu (XR'ye uyarlanmış) gezinme çubuğu

Aşağıdaki örnek kodda, bir 2D kullanıcı arayüzü bileşenini nasıl bir yörünge aracına taşıyacağınız gösterilmektedir.

// Previous approach
NavigationRail()

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

Yörüngedeki uydularla ilgili önemli noktalar

  • Yörünge bileşenleri, mevcut kullanıcı arayüzü öğelerini bir mekansal panele eklemek için tasarlanmış bileşenlerdir.
  • Yörüngedekiler için hangi öğelerin taşınacağını ve hangi kalıpların kaçınılması gerektiğini doğrulamak üzere Android XR uygulama tasarımı kılavuzumuza bakın.
  • Gezinme çubuğu, üst uygulama çubuğu veya alt uygulama çubuğu gibi yalnızca birkaç gezinme bileşenini uyarlamanızı öneririz.
  • Uzaysal kullanıcı arayüzü etkinleştirilmemişse yörüngedeki araçlar gösterilmez. Örneğin, bu içerikler Ana Alan'da veya telefon, tablet ve katlanabilir cihazlar gibi cihazlarda gösterilmez.

2D bileşenleri mekansal panellere taşıma

Uzamsal paneller, Android XR uygulamalarının kullanıcı arayüzünün temel yapı taşlarıdır.

Paneller, kullanıcı arayüzü öğeleri, etkileşimli bileşenler ve tam sayfa içerikler için kapsayıcı görevi görür. Tasarım yaparken kullanıcı kontrolleri için yörüngeleyiciler gibi bileşenler ekleyebilir ve belirli etkileşimlere dikkat çekmek için kullanıcı arayüzü öğelerini mekânsal olarak yükseltebilirsiniz.

Kodla ilgili önemli noktalar

  • Panellere taşınacak öğeleri doğrulamak ve kaçınılması gereken kalıplar için Android XR uygulama tasarımı yönergeleri başlıklı makaleyi inceleyin.
  • Mekansal panel yerleşimi için en iyi uygulamaları takip edin:
    • Paneller, kullanıcının gözlerinden 1,5 m uzaklıkta ortada oluşturulmalıdır.
    • İçerik, kullanıcının görüş alanının 41° ortasında görünmelidir.
  • Kullanıcı hareket ederken paneller sabit kalır. Sabitleme yalnızca geçiş için kullanılabilir.
  • Paneller için sistem tarafından önerilen 32 dp yuvarlatılmış köşeleri kullanın.
  • Dokunma hedefleri 56 dp'den büyük ve 48 dp'den küçük olmamalıdır.
  • Özellikle şeffaf arka planlar kullanıyorsanız okunabilirlik için kontrast oranlarını koruyun.
  • Uygulamanızda koyu ve açık temalar uygulamak için Android tasarımı renk ilkeleri'ni takip edin ve Materyal Tasarım renk sistemini kullanın.
  • Spatial Panels API'yi mevcut kullanıcı arayüzü öğeleriyle kullanın.

2D kullanıcı arayüzünü tek bir mekansal panele taşıma

Uygulamanız, varsayılan olarak Home Space'te tek bir panelle gösterilir. Ev alanı ile tam alan arasında nasıl geçiş yapacağınızı öğrenin. Bu içeriği tam alana getirmek için SpatialPanel simgesini kullanabilirsiniz.

Aşağıda bunu nasıl yapabileceğinize dair bir örnek verilmiştir.

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

2D kullanıcı arayüzünüzü birden fazla mekansal panele taşıma

Uygulamanızın kullanıcı arayüzü için tek bir mekansal panel kullanabilir veya 2D kullanıcı arayüzünüzü birden fazla mekansal panele taşıyabilirsiniz. Uygulamanızın kullanıcı arayüzü için birden fazla panel kullanmayı seçerseniz panelleri konumlandırabilir ve döndürebilirsiniz (kullanıcı arayüzünüzü 2D olarak düzenlediğinize benzer). Başlangıçta, ulaşmak istediğiniz hedefe dair net bir tasarım vizyonuyla yola çıkarsınız. Ardından, panelleri konumlandırmak ve döndürmek için Spatial UI Layout API'lerini (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) ve alt alan değiştiricileri kullanabilirsiniz. Birden fazla panel uygularken kaçınmanız gereken bazı temel kalıplar vardır.

  • Kullanıcının kritik bilgileri görmesini engelleyecek şekilde örtüşen paneller kullanmayın.
  • Kullanıcıyı panellerle bunaltmayın.
  • Panelleri rahatsız edici veya fark edilmeyen yerlere yerleştirmekten kaçının. Örnek: Kullanıcının arkasına yerleştirilen panellerin fark edilmesi zordur.
  • Mekansal kullanıcı arayüzünüzü geliştirme hakkında daha fazla bilgi için kılavuzumuzun tamamını inceleyin.
Uzamsal olmayan içerik
Bir yörünge aracındaki uzamsallaştırılmış (XR'ye uyarlanmış) medya kontrolleri ve birden fazla uzamsal panele bölünmüş içerik
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()
    }
}

Mekansal özellikleri kontrol etme

Belirli bir kullanıcı arayüzü öğesini gösterecek misiniz? Karar verirken belirli XR cihazları veya modlarını kontrol etmeyin. Özellikler yerine cihazları veya modları kontrol etmek, belirli bir cihazdaki özellikler zaman içinde değiştiğinde sorunlara neden olabilir. Bunun yerine, aşağıdaki örnekte gösterildiği gibi gerekli uzamsallaştırma özelliklerini doğrudan kontrol etmek için LocalSpatialCapabilities.current.isSpatialUiEnabled kullanın. Bu yaklaşım, uygulamanızın her yeni cihaz çıktığında veya özellik değiştiğinde güncellemeye ihtiyaç duymadan geniş bir XR deneyim yelpazesine doğru şekilde uyum sağlamasını sağlar.

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

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

Kullanıcının çevresini değiştirmek için ortamları kullanma

Kullanıcınızın çevresini değiştirerek uygulamanızda sürükleyici bir deneyim oluşturmak istediğinizde bunu ortamlar ile yapabilirsiniz. Kodda ortam eklemek, uygulamanızın mevcut kullanıcı arayüzünü önemli ölçüde etkilemeden yapabileceğiniz basit bir değişikliktir. Ortam ayarları hakkında daha fazla bilgi için kılavuzumuzun tamamını inceleyin.

3D model ekleme

3D içerikler, daha sürükleyici bir deneyim oluşturmanıza ve mekansal anlayışa katkıda bulunmanıza yardımcı olabilir. Diğer mekansal ve 3D özellikler gibi, uygulamanız da 3D modelleri yalnızca 3D içerik etkinleştirildiğinde gösterebilir. Bu nedenle, uygulamanızın eklediğiniz 3D nesneler olmadan da mükemmel bir deneyim sunmasını sağlamalısınız.

SceneViewer ile 3D model ekleme

Kullanıcılarınıza 3D modeller sunmak istediğinizde soruna yaklaşmanın birden fazla yolu vardır. Sunucunuzda kullanılmaya hazır bir glTF'niz varsa en basit yöntem SceneViewer XR'yi kullanmaktır. Bunu, cihazda SceneViewer XR uygulamasını başlatacak açık bir Intent oluşturarak yapabilirsiniz. Bu sayede kullanıcı, nesneyi görüntüleyebilir ve çevresinde özgürce taşıyıp yeniden boyutlandırabilir.

Öğeler hacmi ile doğrudan 3D model ekleme

3D modelin konumu, göreli boyut veya ayrıntılı animasyonlar gibi öğeler üzerinde daha fazla kontrol sahibi olmak istediğinizde doğrudan uygulamanıza bir glTF kaynağı yükleyebilirsiniz. 3D model yüklendikten sonra, bir glTF model öğesini sarmalamak için Hacim bileşenini kullanabilir ve nasıl sunulacağını kontrol etmek için alt alan değiştiricileri uygulayabilirsiniz. Hacim özelliğini kullanarak 3D modelleri uzamsal kullanıcı arayüzünüze göre açık bir şekilde yerleştirebilirsiniz. Uygulamanızda 3D modelleri gösterme hakkında daha fazla bilgi için Öğe oluşturma, kontrol etme ve yönetme başlıklı makaleyi inceleyin.