Grid ও mediaQuery সহ টেবিলটপ পসচার লেআউট

ফোল্ডেবল ডিভাইসে টেবিলটপ পসচার একটি স্ক্রিনকে দুটি ফাংশনাল ডিসপ্লে এরিয়াতে ভাগ করে দেয় যা ফিজিক্যাল ফোল্ড (বা হিঞ্জ) দ্বারা বিভক্ত থাকে। টেবিলটপ পশ্চার আপনাকে অ্যাপের মূল কন্টেন্ট (যেমন ভিডিও প্লেয়ার বা গেম ক্যানভাস) উপরের অর্ধে এবং ইন্টার‍্যাক্টিভ এলিমেন্ট (যেমন মিডিয়া কন্ট্রোল বা কন্ট্রোল প্যাড) নিচের অর্ধে রাখতে দেয়।

ছবি ১. টেবিলটপ পসচার ফিজিক্যাল ফোল্ড জুড়ে কন্টেন্ট এবং ইন্টার‍্যাক্টিভ কন্ট্রোলকে ভাগ করে দেয়।

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

আপনার অ্যাপে টেবিলটপ সাপোর্ট যোগ করতে, দুটি সারি ও একটি কলাম সহ লেআউট ডিফাইন করতে Grid API ব্যবহার করুন এবং টেবিলটপ উইন্ডো পসচার মিডিয়া কোয়েরি প্রয়োগ করুন।

• প্রতিক্রিয়াশীলভাবে টেবিলটপ ভঙ্গি শনাক্ত করুন: ডিভাইসের অবস্থা পর্যবেক্ষণ করতে mediaQuery কম্পোজেবল ব্যবহার করুন। ডিভাইসটি টেবিলটপ ভঙ্গিতে (windowPosture == Posture.Tabletop) ভাঁজ করা হলে, অ্যাক্টিভিটি রিস্টার্ট বা জটিল লাইফসাইকেল হ্যান্ডলিং ছাড়াই আপনার লেআউট ডায়নামিকভাবে পরিবর্তন করুন।
• Grid-এর সাহায্যে লেআউট স্ট্রাকচার করা: টেবিলটপ ভঙ্গিতে থাকাকালীন, Grid API (2 rows, 1 column) ব্যবহার করে ফোল্ডের উপরে থাকা সারিতে প্রাথমিক ভিজ্যুয়াল কন্টেন্ট এবং ফোল্ডের নিচে থাকা সারিতে ইন্টার‍্যাক্টিভ কন্ট্রোল পরিষ্কারভাবে আলাদা করুন।
• ওভারলে করার জন্য ইমপ্লিসিট z-ইনডেক্সিং ব্যবহার করা: স্ট্যান্ডার্ড (নন-ট্যাবলেটপ) ভঙ্গিতে, প্লেয়ারের উপর কন্ট্রোল ওভারলে করার জন্য একই সেলে একাধিক এরিয়া আইডি অ্যাসাইন করুন। Grid অটোমেটিক আইটেমগুলিকে তাদের ঘোষণার ক্রমে পিছন থেকে সামনে রেন্ডার করে।
• স্মুথ ট্রানজিশন প্রদান করা: স্ট্যান্ডার্ড ফুল-স্ক্রিন লেআউট এবং টেবিলটপ পসচারের মধ্যে ট্রানজিশন করার সময় স্টেট এবং স্ক্রল পজিশন যাতে সংরক্ষিত থাকে তা নিশ্চিত করুন।

উপাদান

• Grid: একটি অ্যাডাপ্টিভ লেআউট কন্টেনার যা আপনাকে কনফিগার করা যায় এমন সারি এবং কলামে আইটেমগুলি রাখতে দেয়, যা বিভিন্ন স্ক্রিন অঞ্চল জুড়ে কন্টেন্ট বিভক্ত করার জন্য আদর্শ।
• mediaQuery: একটি Jetpack Compose API যা আপনার কম্পোজেবলের মধ্যে সরাসরি অ্যাপের বর্তমান উইন্ডো পসচার, সাইজ ক্লাস এবং হার্ডওয়্যার বৈশিষ্ট্যগুলি কোয়েরি করতে ব্যবহৃত হয়।

ধাপ

mediaQuery() ব্যবহার করে ডিভাইসের পোস্টার কোয়েরি করুন। ডিভাইসটি টেবিলটপ ভঙ্গিতে থাকলে, আপনার অ্যাপের কন্টেন্ট দুটি সারি এবং একটি কলাম সহ একটি উল্লম্ব গ্রিডে সাজান, যাতে প্রাথমিক কন্টেন্ট উপরে থাকে এবং কন্ট্রোলগুলি নিচে অ্যাক্সেসযোগ্য থাকে।

১. টেবিলটপ মোডের জন্য গ্রিড কনফিগারেশন নির্ধারণ করুন

কম্পোজেবল ফাংশনের মধ্যে, enum ব্যবহার করে লেআউট এরিয়া আইডি নির্ধারণ করুন এবং ডিফল্ট ও টেবিলটপ পোস্টারের জন্য GridConfigurationScope ব্লক সেট-আপ করুন।

defaultConfig-এ, দুটি অংশই একই সেলে (row = 1, column = 1) অ্যাসাইন করা হয়েছে। Grid ইমপ্লিসিট z-ইনডেক্সিং ব্যবহার করে যেখানে লেআউটে পরে ডিক্লেয়ার করা কম্পোজেবল আগেরগুলির উপরে রেন্ডার করা হয়, যার ফলে কন্ট্রোলার অতিরিক্ত কন্টেনার নেস্টিং ছাড়াই প্লেয়ারকে ওভারলে করতে পারে (আরও বিবরণের জন্য গ্রিডের সাথে UI এলিমেন্ট ওভারলে দেখুন)।

enum class VideoPlayerArea { Player, Controller }

object PlayerGridConfig {
    // Default: Single area layout with overlay (controls on top of player)
    val defaultConfig: GridConfigurationScope.() -> Unit = {
        row(1f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1)
        area(areaId = VideoPlayerArea.Controller, row = 1, column = 1)
    }

    // Tabletop: Two rows splitting content across the fold
    val tabletopConfig: GridConfigurationScope.() -> Unit = {
        row(0.5f)
        row(0.5f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1) // Top half above fold
        area(areaId = VideoPlayerArea.Controller, row = 2, column = 1) // Bottom half below fold
    }
}
GridByExamples.kt

২. টেবিলটপ পসচার শনাক্ত করে গ্রিডে কনফিগারেশন প্রয়োগ করা

windowPosture-এর উপর ভিত্তি করে অ্যাক্টিভ কনফিগারেশন বেছে নিতে mediaQuery ব্যবহার করুন, config-কে Grid-এ পাস করুন এবং কম্পোজেবল কন্টেন্টকে এরিয়া আইডিতে বাইন্ড করুন। VideoPlayerArea.Controller-এর আগে VideoPlayerArea.Player ঘোষণা করলে এটি নিশ্চিত হয় যে, দুটিই যখন defaultConfig-এ একটি সেল শেয়ার করে, তখন কন্ট্রোলগুলি প্লেয়ারের উপরে রেন্ডার হয়:

val config = mediaQuery {
    when (windowPosture) {
        Posture.Tabletop -> PlayerGridConfig.tabletopConfig
        else -> PlayerGridConfig.defaultConfig
    }
}

Grid(config = config) {
    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Player)
    ) {
        // VideoPlayerContent
    }

    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Controller)
    ) {
        // PlaybackControlsContent
    }
}
GridByExamples.kt

ফলাফল

mediaQuery এবং Grid একত্রিত করে, আপনার অ্যাপ ডায়নামিকভাবে শনাক্ত করে যে কখন কোনও ফোল্ডেবল ডিভাইস আংশিকভাবে টেবিলটপ ভঙ্গিতে ফোল্ড করা হয় এবং অটোমেটিক এর UI-কে ফোল্ড দ্বারা বিভক্ত দুটি ফাংশনাল ডিসপ্লে এরিয়াতে অ্যাডজাস্ট করে।

অতিরিক্ত রিসোর্স

• অ্যাডাপ্টিভ অ্যাপ ব্যবহার শুরু করা
• ফোল্ডেবল ডিসপ্লে মোড সাপোর্ট করে
• গ্রিডের সাথে UI এলিমেন্ট ওভারলে