অরবিটার

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

Orbiter হল একটি স্পেশিয়ালাইজড কম্পোনেন্ট যা আপনি SpatialColumn, SpatialRow বা SpatialBox-এর মতো সংশ্লিষ্ট স্পেশিয়াল প্যানেল বা স্পেশিয়াল লেআউট কম্পোনেন্টের সাথে অ্যাটাচ করতে পারবেন। একটি অরবিটারে সাধারণত নেভিগেশন এবং প্রাসঙ্গিক অ্যাকশন আইটেম থাকে যা এন্টিটির সাথে সম্পর্কিত এটি অ্যাঙ্কর করা হয়। যেমন, আপনি ভিডিও কন্টেন্ট দেখানোর জন্য স্পেশিয়াল প্যানেল তৈরি করলে, অরবিটারের মধ্যে ভিডিও প্লেব্যাক কন্ট্রোল যোগ করতে পারবেন।

ছবি ১.: অরবিটারের উদাহরণ।

অরবিটার তৈরি করুন

নিচের উদাহরণে যেমন দেখানো হয়েছে, নেভিগেশনের মতো ব্যবহারকারীর কন্ট্রোল র‍্যাপ করতে SpatialPanel-এ 2D লেআউটের মধ্যে একটি অরবিটার কল করুন। এটি করলে, আপনার 2D লেআউট থেকে সেগুলি এক্সট্র্যাক্ট করা হয় এবং আপনার কনফিগারেশন অনুযায়ী স্পেশিয়াল প্যানেলে অ্যাটাচ করা হয়।

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

@Composable
fun OrbiterExample() {
    Orbiter(
        position = OrbiterPosition.BottomCenter(
            verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
            offset = DpVolumeOffset(y = 96.dp)
        ),
    ) {
        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
                )
            }
        }
    }
}

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

  • অরবিটার হল স্পেশাল UI কম্পোনেন্ট, তাই কোডটি 2D বা 3D লেআউটে আবার ব্যবহার করা যেতে পারে। 2D লেআউটে, আপনার অ্যাপ শুধুমাত্র অরবিটারের মধ্যে থাকা কন্টেন্ট রেন্ডার করে এবং অরবিটারকে উপেক্ষা করে।
  • অরবিটার কীভাবে ব্যবহার ও ডিজাইন করবেন সেই সম্পর্কে আরও তথ্য পেতে আমাদের ডিজাইন সংক্রান্ত নির্দেশিকা চেক করুন।

স্পেশিয়াল প্যানেল ও লেআউটে অরবিটার অ্যাঙ্কর করুন

আপনি Compose-এ ঘোষিত SpatialPanel এবং স্পেশিয়াল লেআউট কম্পোনেন্টে অরবিটার অ্যাঙ্কর করতে পারবেন। এর মধ্যে SpatialRow, SpatialColumn বা SpatialBox-এর মতো UI এলিমেন্টের স্পেশিয়াল লেআউটে অরবিটার ঘোষণা করা অন্তর্ভুক্ত। আপনি যেখানে এটি ঘোষণা করেছেন তার সবচেয়ে কাছের পেরেন্টকে অরবিটার অ্যাঙ্কর করে।

আপনি কোথায় এটি ঘোষণা করছেন তার উপর ভিত্তি করে অরবিটারের আচরণ নির্ধারণ করা হয়:

  • SpatialPanel-এ র‍্যাপ করা 2D লেআউটে (যেমন আগের কোড স্নিপেটে দেখানো হয়েছে), অরবিটার সেই SpatialPanel-এ অ্যাঙ্কর করে।
  • Subspace-এ, অরবিটার সবচেয়ে কাছের পেরেন্ট এন্টিটির সাথে অ্যাঙ্কর করে, যা হল অরবিটার যে স্পেশিয়াল লেআউটে ঘোষণা করা হয়েছে।

নিম্নলিখিত উদাহরণে দেখানো হয়েছে কীভাবে স্পেশিয়াল রোতে অরবিটার অ্যাঙ্কর করতে হয়:

Subspace {
    SpatialRow {
        Orbiter(
            position = OrbiterPosition.TopCenter(
                verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
                offset = DpVolumeOffset(y = 8.dp)
            ),
            shape = SpatialRoundedCornerShape(size = CornerSize(50))
        ) {
            Text(
                "Hello World!",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .background(Color.White)
                    .padding(16.dp)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Red)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
            )
        }
    }
}

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

  • আপনি যখন 2D লেআউটের বাইরে কোনও অরবিটার ঘোষণা করেন, তখন অরবিটারটি তার নিকটতম মূল এন্টিটির সাথে অ্যাঙ্কর করে। এই ক্ষেত্রে, অরবিটারটি SpatialRow-এর উপরে অ্যাঙ্কর করে যেখানে এটি ঘোষণা করা হয়েছে।
  • SpatialRow, SpatialColumn, SpatialBox-এর মতো স্পেশিয়াল লেআউটের সাথে কন্টেন্টহীন এন্টিটি যুক্ত থাকে। তাই, স্পেশিয়াল লেআউটে ঘোষণা করা অরবিটার সেই লেআউটে অ্যাঙ্কর করে।