গ্রিড সহ UI এলিমেন্ট ওভারলে

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

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

পেশাদার পদ্ধতি

• ঘোষণার ক্রম: Grid স্ট্যান্ডার্ড zIndex ক্রম অনুসরণ করে যা Grid ব্লকের মধ্যে ঘোষণার ক্রমের উপর ভিত্তি করে তৈরি। 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 গ্রিড স্ট্রাকচারের মধ্যে প্রত্যাশিতভাবে ওভারলে করে। স্ট্যান্ডার্ড ডিক্লারেশন অর্ডারিংয়ের উপর নির্ভর করে, আপনি ক্লিন, রেসপন্সিভ লেআউট কোড বজায় রাখার পাশাপাশি জটিল নেস্টেড কন্টেনার এড়িয়ে যেতে পারবেন।

ছবি ১. Compose গ্রিডের মধ্যে UI এলিমেন্ট ওভারল্যাপ করা।