Üç boyutlu paneller

Uygun XR cihazlar
Bu kılavuz, bu tür XR cihazları için deneyimler geliştirmenize yardımcı olur.
XR cihaz türleri hakkında bilgi edinin →
XR Kulaklığı
Kablolu XR Gözlükleri
XR cihaz türleri hakkında bilgi edinin →

SpatialPanel, uygulamanızın içeriğini görüntülemenize olanak tanıyan bir alt alan oluşturulabiliridir. Örneğin, video oynatmayı, sabit görüntüleri veya diğer içerikleri uzamsal bir panelde görüntüleyebilirsiniz.

Şekil 1.: Üç boyutlu kullanıcı arayüzü paneli örneği.

Üç boyutlu panelin boyutunu, davranışını ve konumunu değiştirmek için SubspaceModifier simgesini kullanabilirsiniz.

Üç boyutlu panel oluşturma

Aşağıdaki örnekte, uzamsal panelin nasıl oluşturulacağı gösterilmektedir.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .movable()
            .resizable(),
    ) {
        SpatialPanelContent()
    }
}

@Composable
fun SpatialPanelContent() {
    Box(
        Modifier
            .background(color = Color.Black)
            .height(500.dp)
            .width(500.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Spatial Panel",
            color = Color.White,
            fontSize = 25.sp
        )
    }
}

Kodla ilgili önemli noktalar

  • SpatialPanel API'leri alt uzayda birleştirilebilir öğeler olduğundan bunları Subspace içinde çağırmanız gerekir. Bu yöntemleri alt uzay dışında çağırmak istisna oluşturur.
  • SpatialPanel boyutu, SubspaceModifier üzerindeki height ve width spesifikasyonları kullanılarak ayarlanmıştır. Bu özelliklerin belirtilmemesi, panel boyutunun içeriğinin ölçümlerine göre belirlenmesine olanak tanır.
  • movable alt uzay değiştiricisi ekleyerek kullanıcının paneli taşımasına izin verin.
  • resizable alt uzay değiştiricisi ekleyerek kullanıcının paneli yeniden boyutlandırmasına izin verin.
  • Boyutlandırma ve konumlandırma ile ilgili ayrıntılar için spatial panel tasarımı kılavuzumuzu inceleyin. Kod uygulamayla ilgili daha ayrıntılı bilgi için referans dokümanlarımızı inceleyin.

movable değiştiricisinin işleyiş şekli

Kullanıcı bir paneli kendisinden uzaklaştırdığında, movable değiştiricisi varsayılan olarak paneli, ana alanda sistem tarafından yeniden boyutlandırılan panellere benzer şekilde ölçeklendirir. Tüm alt içerikler bu davranışı devralır. Bu özelliği devre dışı bırakmak için shouldScaleWithDistance parametresini false olarak ayarlayın.

Üç boyutlu düzene birden fazla üç boyutlu panel ekleme

SpatialRow, SpatialColumn, SpatialBox ve SpatialSpacer kullanarak birden fazla üç boyutlu panel oluşturabilir ve bunları üç boyutlu bir düzene yerleştirebilirsiniz.

Şekil 2.: Üç boyutlu düzende birden fazla üç boyutlu panel örneği.

Aşağıdaki kod örneğinde bunun nasıl yapılacağı gösterilmektedir.

Subspace {
    SpatialRow {
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Left")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Left")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Left")
            }
        }
        SpatialColumn {
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Top Right")
            }
            SpatialPanel(SubspaceModifier.height(200.dp).width(400.dp)) {
                SpatialPanelContent("Middle Right")
            }
            SpatialPanel(SubspaceModifier.height(250.dp).width(400.dp)) {
                SpatialPanelContent("Bottom Right")
            }
        }
    }
}

@Composable
fun SpatialPanelContent(text: String) {
    Column(
        Modifier
            .background(color = Color.Black)
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Panel",
            color = Color.White,
            fontSize = 15.sp
        )
        Text(
            text = text,
            color = Color.White,
            fontSize = 25.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

Kodla ilgili önemli noktalar

  • SpatialRow, SpatialColumn, SpatialBox ve SpatialSpacer, alt uzayda birleştirilebilir öğelerdir ve bir alt uzaya yerleştirilmelidir.
  • Düzeninizi özelleştirmek için SubspaceModifier simgesini kullanın.
  • Bir satırda birden fazla panel içeren düzenlerde, panellerin kullanıcıyı çevrelemesi için SubspaceModifier kullanarak 825 dp'lik bir eğri yarıçapı ayarlamanızı öneririz. Ayrıntılı bilgi için tasarım kılavuzumuzu inceleyin.

Özel paneller ve düzenler oluşturma

XR için Compose tarafından desteklenmeyen özel paneller oluşturmak istiyorsanız SceneCore API'lerini kullanarak doğrudan PanelEntity örnekleri ve sahne grafiğiyle çalışabilirsiniz.