গ্রিড সহ UI উপাদানের ওভারলে

Jetpack Compose Grid API-টি কাঠামোগত, দ্বি-মাত্রিক স্ক্রিন লেআউটের জন্য ডিজাইন করা হয়েছে। লেজি গ্রিডের মতো নয়, যা বড় ডেটা সেটের জন্য অপ্টিমাইজ করা হয়েছে, Grid আপনাকে ট্র্যাক (সারি এবং কলাম), গ্যাপ এবং গ্রিড এরিয়া ব্যবহার করে একটি স্থির বা রেসপন্সিভ লেআউট কাঠামো সংজ্ঞায়িত করতে দেয়। আপনি Modifier.gridItem ব্যবহার করে এই কাঠামোর মধ্যে আইটেম স্থাপন করেন, যা আপনাকে গ্রিড কন্টেইনারের মধ্যে পজিশনিং এবং স্প্যানিংয়ের উপর সুস্পষ্ট নিয়ন্ত্রণ দেয়।

যখন আপনার UI-তে একই গ্রিড এলাকায় একাধিক আইটেম বা ওভারল্যাপিং এলাকার প্রয়োজন হয়—যেমন ব্যাজ ওভারলে, স্ট্যাটাস ইন্ডিকেটর বা লেয়ার্ড কার্ড—তখন স্থানাঙ্কের অস্পষ্টতা লেআউটের আচরণকে অপ্রত্যাশিত করে তুলতে পারে। জটিল Box নেস্টিং বা ম্যানুয়াল কোঅর্ডিনেট অফসেট ব্যবহার না করে ওভারল্যাপিং কম্পোনেন্টগুলোর গভীরতা নিয়ন্ত্রণ করা, পরিচ্ছন্ন ও পাঠযোগ্য লেআউট কোড বজায় রাখার জন্য অপরিহার্য।

সর্বোত্তম অনুশীলন

• ঘোষণার ক্রম: Grid ব্লকের মধ্যে ঘোষণার ক্রম অনুসারে Grid স্ট্যান্ডার্ড zIndex ক্রম অনুসরণ করে। Grid কন্টেন্ট ব্লকে পরে ঘোষিত আইটেমগুলো আগে ঘোষিত আইটেমগুলোর উপরে রেন্ডার করা হয়।
• সুস্পষ্ট z-সূচক নিয়ন্ত্রণ: ওভারল্যাপিং এলিমেন্টগুলোর ডিফল্ট অঙ্কন ক্রম সুস্পষ্টভাবে নিয়ন্ত্রণ বা ওভাররাইড করার প্রয়োজন হলে Modifier.zIndex ব্যবহার করুন।
• নামযুক্ত এলাকা বনাম আইটেম ওভারলে: আপনার লেআউটের কাঠামো নির্ধারণ করতে Grid এবং নামযুক্ত এলাকা ব্যবহার করুন, কিন্তু যদি ওভারলেগুলি যৌক্তিকভাবে কোনো গ্রিড সেলের সাথে যুক্ত থাকে, তবে জটিল ওভারলে লজিক নির্দিষ্ট gridItem ভিতরে রাখুন।
• ওভারলে-এর জন্য উদ্দেশ্যমূলক স্প্যান: ওভারলে করার সময়, ওভারল্যাপিং এলিমেন্টগুলোর জন্য rowSpan এবং columnSpan প্যারামিটারগুলো উদ্দেশ্যমূলক কিনা তা নিশ্চিত করুন, যাতে নিচের কন্টেন্টের কতটুকু অংশ আড়াল হবে তা নিয়ন্ত্রণ করা যায়।

উপকরণ

• Grid : একটি কাঠামোগত, দ্বিমাত্রিক বিন্যাস ধারক
• GridConfigurationScope.area : গ্রিড ট্র্যাক জুড়ে নামযুক্ত অঞ্চল এবং ওভারলে এলাকা সংজ্ঞায়িত করতে ব্যবহৃত স্কোপ ফাংশন।
• Modifier.gridItem : গ্রিড ট্র্যাক জুড়ে বা নামযুক্ত গ্রিড এলাকায় কম্পোজেবল স্থাপন ও বিস্তৃত করতে ব্যবহৃত মডিফায়ার।
• Modifier.zIndex : ড্রয়িং এবং লেয়ারের উচ্চতার ক্রম সুস্পষ্টভাবে নিয়ন্ত্রণ করতে ব্যবহৃত মডিফায়ার।

পদক্ষেপ

আপনার গ্রিড লেআউট এবং নামযুক্ত এলাকাগুলো কনফিগার করুন, টার্গেট গ্রিড স্থানাঙ্কের মধ্যে বেস লেয়ারের কন্টেন্ট স্থাপন করুন, এবং শেয়ার করা গ্রিড সেল বা ওভারল্যাপিং এলাকাগুলোতে ওভারলে এলিমেন্টগুলো রাখুন।

১. গ্রিড কনফিগারেশন নির্ধারণ করুন

সারি ও কলাম ট্র্যাকের পাশাপাশি ওভারলে অঞ্চল নির্ধারণের জন্য সেল জুড়ে বিস্তৃত নামযুক্ত এলাকা নির্দিষ্ট করে একটি Grid কম্পোজেবল কনফিগারেশন তৈরি করুন:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

২. মূল বিষয়বস্তু স্থাপন করুন এবং ওভারলে ঘোষণা করুন

Modifier.gridItem ব্যবহার করে আপনার বেস কম্পোজেবলগুলো গ্রিড সেলের মধ্যে রাখুন। Grid তার গঠনের ক্রম অনুসারে স্ট্যান্ডার্ড zIndex ক্রম অনুসরণ করে, তাই Grid ব্লকের মধ্যে পরে ঘোষিত আইটেমগুলো আগের আইটেমগুলোর উপরে আঁকা হয়। একই সেলে বা একটি ওভারল্যাপিং এলাকায় কোনো ওভারলে স্থাপন করার সময়, ওভারলে কম্পোজেবলটি বেস এলিমেন্টের পরে ঘোষণা করুন, অথবা একটি নামযুক্ত এলাকা রেফারেন্স করুন। এই ডিফল্ট অঙ্কন ক্রমকে স্পষ্টভাবে নিয়ন্ত্রণ বা ওভাররাইড করার প্রয়োজন হলে আপনি Modifier.zIndex ব্যবহার করতে পারেন।

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

ফলাফল

আপনার UI এলিমেন্টগুলো 2D গ্রিড কাঠামোর মধ্যে অনুমানযোগ্যভাবে ওভারলে হয়। স্ট্যান্ডার্ড ডিক্লারেশন অর্ডারিং ব্যবহার করে, আপনি জটিল নেস্টেড কন্টেইনার এড়িয়ে চলেন এবং একই সাথে পরিচ্ছন্ন ও রেসপন্সিভ লেআউট কোড বজায় রাখেন।