স্পেশিয়াল প্যানেল

প্রযোজ্য XR ডিভাইস
এই নির্দেশিকা আপনাকে এই ধরনের XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে সাহায্য করে।
XR হেডসেট
তারযুক্ত XR গ্লাস

SpatialPanel হল একটি সাবস্পেস কম্পোজেবল যা আপনাকে অ্যাপের কন্টেন্ট দেখাতে দেয়–যেমন, আপনি ভিডিও প্লেব্যাক, স্থির ছবি বা স্পেশাল প্যানেলে অন্য কোনও কন্টেন্ট দেখাতে পারেন।

ছবি ১.: স্পেশিয়াল UI প্যানেলের উদাহরণ।

আপনি SubspaceModifier ব্যবহার করে স্পেশিয়াল প্যানেলের সাইজ, আচরণ ও পজিশন পরিবর্তন করতে পারবেন

স্পেশিয়াল প্যানেল তৈরি করুন

স্পেশিয়াল প্যানেল কীভাবে তৈরি করতে হয় তা নিম্নলিখিত উদাহরণ থেকে দেখুন।

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

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • SpatialPanel API হল সাবস্পেস কম্পোজেবল, তাই আপনাকে অবশ্যই Subspace-এর মধ্যে সেগুলিকে কল করতে হবে। সাবস্পেসের বাইরে তাদের কল করলে একটি ব্যতিক্রম দেখায়।
  • SubspaceModifier-এ height এবং width স্পেসিফিকেশন ব্যবহার করে SpatialPanel-এর সাইজ সেট করা হয়েছে। এইসব স্পেসিফিকেশন বাদ দিলে, প্যানেলের সাইজ তার কন্টেন্টের পরিমাপের ভিত্তিতে নির্ধারণ করা হয়।
  • movable সাবস্পেস মডিফায়ার যোগ করে ব্যবহারকারীকে প্যানেল সরানোর অনুমতি দিন।
  • resizable সাবস্পেস মডিফায়ার যোগ করে ব্যবহারকারীকে প্যানেলের সাইজ পরিবর্তন করার অনুমতি দিন।
  • সাইজ ও পজিশন সম্পর্কে বিস্তারিত জানতে আমাদের স্পেশিয়াল প্যানেল ডিজাইন সংক্রান্ত নির্দেশিকা দেখুন। কোড প্রয়োগ করার বিষয়ে আরও নির্দিষ্টভাবে জানতে আমাদের রেফারেন্স ডকুমেন্টেশন দেখুন।

movable মডিফায়ার কীভাবে কাজ করে

ব্যবহারকারী কোনও প্যানেলকে নিজের থেকে দূরে সরিয়ে দিলে, ডিফল্ট হিসেবে, movable মডিফায়ার প্যানেলকে এমনভাবে স্কেল করে যেভাবে সিস্টেম হোম স্পেসে প্যানেলের সাইজ পরিবর্তন করে। সব চাইল্ড কন্টেন্ট এই আচরণ ইনহেরিট করে। এটি বন্ধ করতে, shouldScaleWithDistance প্যারামিটার false-এ সেট করুন।

স্পেশিয়াল লেআউটে একাধিক স্পেশিয়াল প্যানেল যোগ করা

আপনি একাধিক স্পেশিয়াল প্যানেল তৈরি করতে এবং SpatialRow, SpatialColumn, SpatialBox এবং SpatialSpacer ব্যবহার করে সেগুলিকে স্পেশিয়াল লেআউটের মধ্যে রাখতে পারবেন।

ছবি ২.: স্পেশিয়াল লেআউটে একাধিক স্পেশিয়াল প্যানেলের উদাহরণ।

এটি কীভাবে করতে হয় তা নিম্নলিখিত কোডের উদাহরণ থেকে জানতে পারবেন।

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 এবং SpatialSpacer হল সাবস্পেস কম্পোজেবল এবং এগুলি সাবস্পেসের মধ্যে রাখতে হবে।
  • আপনার লেআউট কাস্টমাইজ করতে SubspaceModifier ব্যবহার করুন।
  • একটি সারিতে একাধিক প্যানেল সহ লেআউটের জন্য, আমরা SubspaceModifier ব্যবহার করে ৮২৫ডিপি-এর কার্ভ রেডিয়াস সেট করার সাজেশন দিই যাতে প্যানেলগুলি আপনার ব্যবহারকারীকে ঘিরে থাকে। বিস্তারিত জানতে আমাদের ডিজাইন সংক্রান্ত নির্দেশিকা দেখুন।

কাস্টম প্যানেল ও লেআউট তৈরি করা

Compose for XR-এর মাধ্যমে কাজ করে না এমন কাস্টম প্যানেল তৈরি করতে, আপনি সরাসরি PanelEntity ইনস্ট্যান্স এবং SceneCore API ব্যবহার করে সিন গ্রাফের সাথে কাজ করতে পারেন।