XR के लिए Jetpack Compose की मदद से यूज़र इंटरफ़ेस (यूआई) बनाना

XR के लिए Jetpack Compose की मदद से, Compose के जाने-पहचाने कॉन्सेप्ट, जैसे कि पंक्तियों और कॉलम का इस्तेमाल करके, स्पेसिएल यूआई और लेआउट को आसानी से बनाया जा सकता है. इसकी मदद से, अपने मौजूदा Android यूज़र इंटरफ़ेस (यूआई) को 3D स्पेस में बढ़ाया जा सकता है या पूरी तरह से नए इमर्सिव 3D ऐप्लिकेशन बनाए जा सकते हैं.

अगर आपको Android Views पर आधारित किसी मौजूदा ऐप्लिकेशन को स्पेसिएलाइज़ करना है, तो आपके पास डेवलपमेंट के कई विकल्प हैं. इंटरऑपरेबिलिटी एपीआई का इस्तेमाल किया जा सकता है, Compose और व्यू को एक साथ इस्तेमाल किया जा सकता है या सीधे SceneCore लाइब्रेरी के साथ काम किया जा सकता है. ज़्यादा जानकारी के लिए, व्यू के साथ काम करने के लिए गाइड देखें.

सबस्पेस और स्पेसलाइज़ किए गए कॉम्पोनेंट के बारे में जानकारी

Android XR के लिए ऐप्लिकेशन लिखते समय, सबस्पेस और स्पेशलाइज़्ड कॉम्पोनेंट के कॉन्सेप्ट को समझना ज़रूरी है.

सबस्पेस के बारे में जानकारी

Android XR के लिए डेवलप करते समय, आपको अपने ऐप्लिकेशन या लेआउट में सबस्पेस जोड़ना होगा. सबस्पेस, आपके ऐप्लिकेशन में मौजूद 3D स्पेस का एक हिस्सा होता है. इसमें 3D कॉन्टेंट डाला जा सकता है, 3D लेआउट बनाए जा सकते हैं, और 2D कॉन्टेंट में डीपथ जोड़ी जा सकती है. सबस्पेस सिर्फ़ तब रेंडर होता है, जब स्पेसलाइज़ेशन की सुविधा चालू हो. होम स्पेस या नॉन-एक्सआर डिवाइसों पर, उस सबस्पेस में मौजूद किसी भी कोड को अनदेखा कर दिया जाता है.

सबस्पेस बनाने के दो तरीके हैं:

• setSubspaceContent: यह फ़ंक्शन, ऐप्लिकेशन लेवल का सबस्पेस बनाता है. इसे MainActivity में उसी तरह से कॉल किया जा सकता है जिस तरह setContent का इस्तेमाल किया जाता है. ऐप्लिकेशन लेवल का सबस्पेस, ऊंचाई, चौड़ाई, और गहराई में अनलिमिटेड होता है. इससे स्पेसऐल कॉन्टेंट के लिए अनलिमिटेड कैनवस मिलता है.
• Subspace: इस कॉम्पोज़ेबल को आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) की हैरारकी में कहीं भी रखा जा सकता है. इससे, फ़ाइलों के बीच कॉन्टेक्स्ट खोए बिना, 2D और स्पेसिएल यूआई के लेआउट बनाए जा सकते हैं. इससे, XR और अन्य फ़ॉर्म फ़ैक्टर के बीच मौजूदा ऐप्लिकेशन आर्किटेक्चर जैसी चीज़ों को शेयर करना आसान हो जाता है. इसके लिए, आपको अपने पूरे यूज़र इंटरफ़ेस (यूआई) ट्री में स्टेटस को होस्ट करने या अपने ऐप्लिकेशन को फिर से आर्किटेक्ट करने की ज़रूरत नहीं होती.

ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन में सबस्पेस जोड़ने के बारे में पढ़ें.

स्पेसलाइज़ किए गए कॉम्पोनेंट के बारे में जानकारी

सबस्पेस कॉम्पोनेंट: इन कॉम्पोनेंट को सिर्फ़ सबस्पेस में रेंडर किया जा सकता है. इन्हें 2D लेआउट में डालने से पहले, Subspace या setSubspaceContent में डालना होगा. SubspaceModifier की मदद से, सबस्पेस कॉम्पोज़ेबल में डेप्थ, ऑफ़सेट, और पोज़िशनिंग जैसे एट्रिब्यूट जोड़े जा सकते हैं.

• सबस्पेस मॉडिफ़ायर के बारे में जानकारी: SubspaceModifier एपीआई के क्रम पर ध्यान दें.
  • ऑफ़सेट, मॉडिफ़ायर चेन में सबसे पहले होना चाहिए
  • 'मूव किया जा सकता है' और 'साइज़ बदला जा सकता है' एट्रिब्यूट आखिर में होने चाहिए
  • स्केल करने से पहले, घुमाने की सुविधा लागू करनी होगी

स्पेस में दिखाए जाने वाले अन्य कॉम्पोनेंट को सबस्पेस में कॉल करने की ज़रूरत नहीं होती. इनमें, स्पेस कंटेनर में रैप किए गए सामान्य 2D एलिमेंट होते हैं. अगर इन एलिमेंट को 2D और 3D, दोनों लेआउट के लिए तय किया गया है, तो इनका इस्तेमाल 2D या 3D लेआउट में किया जा सकता है. जब स्पेशलाइज़ेशन की सुविधा चालू नहीं होती, तो स्पेशलाइज़ की गई सुविधाओं को अनदेखा कर दिया जाता है और वे 2D वर्शन में दिखती हैं.

स्पेस पैनल बनाना

SpatialPanel एक सबस्पेस कॉम्पोज़ेबल है. इसकी मदद से, ऐप्लिकेशन का कॉन्टेंट दिखाया जा सकता है. उदाहरण के लिए, स्पेस पैनल में वीडियो चलाया जा सकता है, स्टिल इमेज दिखाई जा सकती हैं या कोई अन्य कॉन्टेंट दिखाया जा सकता है.

स्पेशल पैनल का साइज़, व्यवहार, और पोज़िशन बदलने के लिए, SubspaceModifier का इस्तेमाल किया जा सकता है. इसका उदाहरण यहां दिया गया है.

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

// 2D content placed within the spatial panel
@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
        )
    }
}

कोड के बारे में अहम जानकारी

• सबस्पेस मॉडिफ़ायर के बारे में जानकारी: SubspaceModifier एपीआई के क्रम पर ध्यान दें.
  • ऑफ़सेट, मॉडिफ़ायर चेन में सबसे पहले होना चाहिए.
  • मूव किए जा सकने वाले और साइज़ में बदले जा सकने वाले मॉडिफ़ायर आखिर में होने चाहिए.
  • स्केल करने से पहले, रोटेशन लागू करना ज़रूरी है.
• SpatialPanel एपीआई, सबस्पेस कॉम्पोज़ेबल होते हैं. इसलिए, आपको उन्हें Subspace या setSubspaceContent में कॉल करना होगा. किसी सबस्पेस के बाहर से इन्हें कॉल करने पर, अपवाद दिखेगा.
• .movable या .resizable SubspaceModifier जोड़कर, उपयोगकर्ता को पैनल का साइज़ बदलने या उसे एक जगह से दूसरी जगह ले जाने की अनुमति दें.
• साइज़ और प्लेसमेंट के बारे में जानने के लिए, स्पेशल पैनल के डिज़ाइन से जुड़े दिशा-निर्देश देखें. कोड लागू करने के बारे में ज़्यादा जानकारी के लिए, हमारा रेफ़रंस दस्तावेज़ देखें.

ऑर्बिटर बनाना

ऑर्बिटर, स्पेस यूज़र इंटरफ़ेस (यूआई) का कॉम्पोनेंट है. इसे किसी स्पेस पैनल से अटैच करने के लिए डिज़ाइन किया गया है. इसमें उस स्पेस पैनल से जुड़े नेविगेशन और संदर्भ के हिसाब से कार्रवाई करने वाले आइटम होते हैं. उदाहरण के लिए, अगर आपने वीडियो कॉन्टेंट दिखाने के लिए स्पेस पैनल बनाया है, तो ऑर्बिटर में वीडियो चलाने के कंट्रोल जोड़े जा सकते हैं.

नीचे दिए गए उदाहरण में दिखाया गया है कि नेविगेशन जैसे उपयोगकर्ता कंट्रोल को रैप करने के लिए, SpatialPanel में ऑर्बिटर को कॉल करें. ऐसा करने पर, उन्हें आपके 2D लेआउट से निकाला जाता है और आपके कॉन्फ़िगरेशन के हिसाब से स्पेस पैनल में जोड़ दिया जाता है.

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

//2D content inside Orbiter
@Composable
fun OrbiterExample() {
    Orbiter(
        position = OrbiterEdge.Bottom,
        offset = 96.dp,
        alignment = Alignment.CenterHorizontally
    ) {
        Surface(Modifier.clip(CircleShape)) {
            Row(
                Modifier
                    .background(color = Color.Black)
                    .height(100.dp)
                    .width(600.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Orbiter",
                    color = Color.White,
                    fontSize = 50.sp
                )
            }
        }
    }
}

कोड के बारे में अहम जानकारी

• सबस्पेस मॉडिफ़ायर के बारे में जानकारी: SubspaceModifier एपीआई के क्रम पर ध्यान दें.
  • ऑफ़सेट, मॉडिफ़ायर चेन में सबसे पहले होना चाहिए
  • 'मूव किया जा सकता है' और 'साइज़ बदला जा सकता है' एट्रिब्यूट आखिर में होने चाहिए
  • स्केल करने से पहले, घुमाने की सुविधा लागू करनी होगी
• ऑर्बिटर, स्पेस वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट होते हैं. इसलिए, इनके कोड का इस्तेमाल 2D या 3D लेआउट में फिर से किया जा सकता है. 2D लेआउट में, आपका ऐप्लिकेशन सिर्फ़ ऑर्बिटर के अंदर मौजूद कॉन्टेंट को रेंडर करता है और ऑर्बिटर को अनदेखा करता है.
• ऑर्बिटर का इस्तेमाल करने और डिज़ाइन करने के तरीके के बारे में ज़्यादा जानकारी के लिए, डिज़ाइन से जुड़े दिशा-निर्देश देखें.

स्पेसिएल लेआउट में कई स्पेसिएल पैनल जोड़ना

SpatialRow, SpatialColumn, SpatialBox, और SpatialLayoutSpacer का इस्तेमाल करके, कई स्पेस पैनल बनाए जा सकते हैं और उन्हें स्पेस लेआउट में रखा जा सकता है.

नीचे दिए गए कोड के उदाहरण में, ऐसा करने का तरीका बताया गया है.

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
        )
    }
}

कोड के बारे में अहम जानकारी

• SpatialRow, SpatialColumn, SpatialBox, और SpatialLayoutSpacer, सबस्पेस के लिए बने कॉम्पोनेंट हैं. इन्हें सबस्पेस में ही डाला जाना चाहिए.
• अपने लेआउट को पसंद के मुताबिक बनाने के लिए, SubspaceModifier का इस्तेमाल करें.
• हमारा सुझाव है कि एक पंक्ति में कई पैनल वाले लेआउट के लिए, SubspaceModifier का इस्तेमाल करके कर्व त्रिज्या को 825dp पर सेट करें, ताकि पैनल आपके उपयोगकर्ता को चारों तरफ़ से घेर सकें. ज़्यादा जानकारी के लिए, डिज़ाइन से जुड़े दिशा-निर्देश देखें.

अपने लेआउट में 3D ऑब्जेक्ट डालने के लिए, वॉल्यूम का इस्तेमाल करना

अपने लेआउट में 3D ऑब्जेक्ट डालने के लिए, आपको वॉल्यूम नाम के सबस्पेस कॉम्पोज़ेबल का इस्तेमाल करना होगा. इसका तरीका यहां देखें.

Subspace {
    SpatialPanel(
        SubspaceModifier.height(1500.dp).width(1500.dp)
            .resizable().movable()
    ) {
        ObjectInAVolume(true)
            Box(
                Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "Welcome",
                    fontSize = 50.sp,
                )
            }
        }
    }
}

@Composable
fun ObjectInAVolume(show3DObject: Boolean) {
    val xrCoreSession = checkNotNull(LocalSession.current)
    val scope = rememberCoroutineScope()
    if (show3DObject) {
        Subspace {
            Volume(
                modifier = SubspaceModifier
                    .offset(volumeXOffset, volumeYOffset, volumeZOffset) //
Relative position
                    .scale(1.2f) // Scale to 120% of the size

            ) { parent ->
                scope.launch {
                   // Load your 3D Object here
                }
            }
        }
    }
}

कोड के बारे में अहम जानकारी

• सबस्पेस मॉडिफ़ायर के बारे में जानकारी: SubspaceModifier एपीआई के क्रम पर ध्यान दें.
  • ऑफ़सेट, मॉडिफ़ायर चेन में सबसे पहले होना चाहिए
  • 'मूव किया जा सकता है' और 'साइज़ बदला जा सकता है' एट्रिब्यूट आखिर में होने चाहिए
  • स्केल करने से पहले, घुमाने की सुविधा लागू करनी होगी
• वॉल्यूम में 3D कॉन्टेंट लोड करने का तरीका बेहतर तरीके से समझने के लिए, 3D कॉन्टेंट जोड़ना लेख पढ़ें.

स्पेस वाले अन्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट जोड़ना

स्पेस वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को आपके ऐप्लिकेशन के यूआई हैरारकी में कहीं भी रखा जा सकता है. इन एलिमेंट का इस्तेमाल, आपके 2D यूज़र इंटरफ़ेस (यूआई) में फिर से किया जा सकता है. साथ ही, इनके स्पेस एट्रिब्यूट सिर्फ़ तब दिखेंगे, जब स्पेस की सुविधाएं चालू होंगी. इससे, कोड को दो बार लिखे बिना ही, मेन्यू, डायलॉग, और अन्य कॉम्पोनेंट में ऊंचाई जोड़ी जा सकती है. इन एलिमेंट को इस्तेमाल करने का तरीका बेहतर तरीके से समझने के लिए, स्पेसिएल यूज़र इंटरफ़ेस के ये उदाहरण देखें.

SpatialDialog

यह ऐसे डायलॉग का उदाहरण है जो कुछ देर बाद खुलता है. SpatialDialog का इस्तेमाल करने पर, डायलॉग बॉक्स स्पेस पैनल के ज़ी-डेप्थ पर दिखता है. साथ ही, स्पेसलाइज़ेशन की सुविधा चालू होने पर, पैनल को 125dp पीछे धकेल दिया जाता है. स्पेसिएलाइज़ेशन की सुविधा चालू न होने पर भी, SpatialDialog का इस्तेमाल किया जा सकता है. ऐसा करने पर, यह 2D वर्शन: Dialog पर स्विच हो जाता है.

@Composable
fun DelayedDialog() {
   var showDialog by remember { mutableStateOf(false) }
   LaunchedEffect(Unit) {
       Handler(Looper.getMainLooper()).postDelayed({
           showDialog = true
       }, 3000)
   }
   if (showDialog) {
       SpatialDialog (
           onDismissRequest = { showDialog = false },
           SpatialDialogProperties(
               dismissOnBackPress = true)
       ){
           Box(Modifier
               .height(150.dp)
               .width(150.dp)
           ) {
               Button(onClick = { showDialog = false }) {
                   Text("OK")
               }
           }
       }
   }
}

कोड के बारे में अहम जानकारी

• यह SpatialDialog का उदाहरण है. SpatialPopUp और SpatialElevation का इस्तेमाल करने का तरीका काफ़ी हद तक एक जैसा होगा. ज़्यादा जानकारी के लिए, हमारा एपीआई रेफ़रंस देखें.

कस्टम पैनल और लेआउट बनाना

Compose for XR में काम न करने वाले कस्टम पैनल बनाने के लिए, SceneCore एपीआई का इस्तेमाल करके, सीधे PanelEntities और सीन ग्राफ़ के साथ काम किया जा सकता है.

यह भी देखें:

• 3D मॉडल जोड़ना
• व्यू की मदद से, एक्सआर के लिए यूज़र इंटरफ़ेस (यूआई) बनाना
• एक्सआर के लिए मटीरियल डिज़ाइन