গ্রিড সহ প্রশস্ত ক্লাসিক কার্ড লেআউট

চার তারকা রেটিং আইকন

টিভি অ্যাপ ডিজাইন নির্দেশিকায় ‘ ওয়াইড ক্লাসিক কার্ড’ নামে একটি কার্ড ভ্যারিয়েন্টের সংজ্ঞা দেওয়া হয়েছে, যা একটি ছবি এবং তার বর্ণনামূলক কন্টেন্ট ব্লক পাশাপাশি প্রদর্শন করে। টিভি স্ক্রিনের জন্য জটিল দ্বি-মাত্রিক লেআউট তৈরি করার সময়, প্রচলিত স্থানাঙ্ক-ভিত্তিক পজিশনিং অথবা গভীরভাবে নেস্টেড Row এবং Column কন্টেইনার ব্যবহার করলে আপনার কোড পড়া, রক্ষণাবেক্ষণ করা এবং রিফ্যাক্টর করা কঠিন হয়ে যেতে পারে। ওয়াইড ক্লাসিক কার্ড হলো জেটপ্যাক কম্পোজ Grid এপিআই-এর একটি আদর্শ ব্যবহার, যা আপনাকে সিম্যান্টিক, ব্যবহারকারী-সংজ্ঞায়িত ২ডি লেআউট এরিয়া ব্যবহার করে পাশাপাশি থাকা এলিমেন্টগুলোকে পরিচ্ছন্নভাবে সাজাতে সাহায্য করে।

ওয়াইড ক্লাসিক কার্ড কম্পোনেন্টের স্পেসিফিকেশন, যেখানে পাঁচটি নামযুক্ত লেআউট এরিয়া দেখানো হয়েছে: ইমেজ, টাইটেল, সাবটাইটেল, ডেসক্রিপশন এবং এক্সট্রা টেক্সট।
চিত্র ১। প্রশস্ত ক্লাসিক কার্ডের পাঁচটি নামযুক্ত এলাকা: ছবির এলাকা এবং কন্টেন্ট ব্লকের মধ্যে চারটি টেক্সট এলাকা।

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

Grid ব্যবহার করে কার্ড লেআউটটি প্রয়োগ করুন। Grid কন্টেইনার ব্যবহার করলে ফিজিক্যাল লেআউটের ডাইমেনশন এবং চাইল্ড আইটেমের প্লেসমেন্টের মধ্যে সংযোগ বিচ্ছিন্ন হয়ে যায়, যা কোডের পঠনযোগ্যতা বাড়ায়। সুনির্দিষ্ট ট্র্যাক ইনডেক্সের উপর নির্ভর না করে, area ফাংশন দিয়ে অর্থপূর্ণ নামযুক্ত এলাকা নির্ধারণ করুন এবং gridItem মডিফায়ার ব্যবহার করে চাইল্ড কম্পোজেবল আইটেমগুলো স্থাপন করুন। জটিল পাশাপাশি থাকা কার্ড কম্পোনেন্টগুলোকে স্পষ্টভাবে এবং মজবুতভাবে সাজানোর জন্য, GridTrackSize.Auto এবং minmax(0.dp, 1.fr) এর মতো নমনীয় ট্র্যাক সাইজিং-এর সাথে সুনির্দিষ্ট ট্র্যাক গ্যাপ ( gap(row = 8.dp, column = 16.dp) ) একত্রিত করুন।

উপকরণ

  • Grid : জেটপ্যাক কম্পোজ-এর একটি ২ডি কন্টেইনার লেআউট, যা একটি কনফিগারেশন ল্যাম্বডার উপর ভিত্তি করে চাইল্ড কম্পোজেবলগুলোকে সারি এবং কলামে সাজায়।
  • gridItem : একটি Modifier এক্সটেনশন যা একটি Grid লেআউটের অভ্যন্তরে কোনো চাইল্ড UI এলিমেন্টকে একটি নির্দিষ্ট নামযুক্ত areaId সাথে যুক্ত করে।
  • area : GridConfigurationScope অন্তর্গত একটি কনফিগারেশন DSL ফাংশন, যা একটি সিম্যান্টিক areaId কে নির্দিষ্ট সারি এবং কলামের স্প্যান বা রেঞ্জের সাথে ম্যাপ করে।
  • Card : একটি ম্যাটেরিয়াল ডিজাইন কম্পোজেবল কন্টেইনার যা সম্পর্কিত UI এলিমেন্ট এবং স্টাইলিংকে একত্রিত করে।
  • GridTrackSize.MinMax : একটি ট্র্যাক সাইজিং প্রপার্টি যা সারি বা কলামের ডাইমেনশনের জন্য নমনীয় সীমা ( min এবং max ) নির্ধারণ করে।
  • GridTrackSize.Auto : একটি ট্র্যাক সাইজিং প্রপার্টি যা সারি বা কলাম ট্র্যাককে তার বিষয়বস্তুর সাথে মানানসই করে স্বয়ংক্রিয়ভাবে আকার দেয় ( column(GridTrackSize.Auto) )
  • gap : একটি কনফিগারেশন ফাংশন যা গ্রিড ট্র্যাকগুলির মধ্যে উল্লম্ব ( row ) এবং অনুভূমিক ( column ) ব্যবধান নির্দিষ্ট করে।

পদক্ষেপ

এলাকা শনাক্তকারী নির্ধারণ করুন, গ্রিড ট্র্যাক ও এলাকাগুলো কনফিগার করুন, তারপর চাইল্ড কম্পোজেবলগুলো স্থাপন করুন।

১. শব্দার্থিক এলাকা শনাক্তকারী সংজ্ঞায়িত করুন

প্রথমে, আপনার ওয়াইড ক্লাসিক কার্ড লেআউটের ভেতরের অঞ্চলগুলোর একটি টাইপ-সেফ উপস্থাপনা তৈরি করুন। একটি enum ক্লাস স্ট্রিং টাইপের ভুল এড়ায় এবং ট্র্যাক ম্যাপ করার ও চাইল্ড আইটেম স্থাপন করার সময় কম্পাইল-টাইম সুরক্ষা প্রদান করে। 

enum class CardArea {
    Image,
    Title,
    Subtitle,
    Description,
    ExtraText,
}

২. 2D গ্রিড ট্র্যাক এবং নামযুক্ত এলাকাগুলি কনফিগার করুন

আপনার Grid কম্পোজেবলের config ল্যাম্বডার ভিতরে, কার্ডের কাঠামো তৈরি করে এমন কলাম এবং সারিগুলো সংজ্ঞায়িত করুন। ইমেজ কলামের জন্য GridTrackSize.Auto ব্যবহার করুন, যাতে এটি থাম্বনেইলের প্রস্থকে সুন্দরভাবে আবৃত করে। কন্টেন্ট কলামের জন্য minmax(0.dp, 1.fr) ব্যবহার করুন, যাতে এটি কার্ডের বাকি প্রস্থ জুড়ে নমনীয়ভাবে প্রসারিত হতে পারে। gap(row = 8.dp, column = 16.dp) দিয়ে ট্র্যাক স্পেসিং নির্দিষ্ট করুন। area ফাংশন ব্যবহার করে আপনার CardArea আইডেন্টিফায়ারগুলোকে তাদের ফিজিক্যাল ট্র্যাক কোঅর্ডিনেটে ম্যাপ করুন। 

Grid(
    config = {
        // Define columns: left column for image, right for content
        column(GridTrackSize.Auto)
        column(minmax(0.dp, 1.fr))

        // Define row tracks for the vertical content stack
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)

        // Map semantic identifiers to grid coordinates and spans
        area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
        area(CardArea.Title, row = 1, column = 2)
        area(CardArea.Subtitle, row = 2, column = 2)
        area(CardArea.Description, row = 3, column = 2)
        area(CardArea.ExtraText, row = 4, column = 2)

        gap(row = 8.dp, column = 16.dp)
    }
) {
    // Child elements placed in Step 3
}

৩. gridItem মডিফায়ার ব্যবহার করে চাইল্ড কম্পোজেবলগুলো স্থাপন করুন।

আপনার ট্র্যাক এবং এলাকাগুলো কনফিগার করা হয়ে গেলে, gridItem মডিফায়ার ব্যবহার করে প্রতিটি চাইল্ড UI এলিমেন্টকে শুধুমাত্র অর্থগত উদ্দেশ্য অনুসারে স্থাপন করুন। আপনি যেকোনো ক্রমে চাইল্ড কম্পোজেবলগুলো ঘোষণা করতে পারেন। Grid কন্টেইনার প্রতিটি এলিমেন্টকে স্বয়ংক্রিয়ভাবে সরাসরি তার নির্ধারিত 2D অঞ্চলে স্থাপন করে। 

@Composable
fun WideClassicCard(
    imageContent: @Composable () -> Unit,
    title: String,
    subtitle: String,
    description: String,
    extraText: String,
    modifier: Modifier = Modifier,
) {
    Card(modifier = modifier) {
        Grid(
            config = {
                // Define columns: left column for image, right for content
                column(GridTrackSize.Auto)
                column(minmax(0.dp, 1.fr))

                // Define row tracks for the vertical content stack
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)

                // Map semantic identifiers to grid coordinates and spans
                area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
                area(CardArea.Title, row = 1, column = 2)
                area(CardArea.Subtitle, row = 2, column = 2)
                area(CardArea.Description, row = 3, column = 2)
                area(CardArea.ExtraText, row = 4, column = 2)

                gap(row = 8.dp, column = 16.dp)
            },
        ) {
            Box(modifier = Modifier.gridItem(CardArea.Image)) {
                imageContent()
            }
            Text(
                text = title,
                style = MaterialTheme.typography.titleLarge,
                modifier = Modifier
                    .gridItem(CardArea.Title)
                    .padding(top = 16.dp, end = 16.dp),
            )

            Text(
                text = subtitle,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .gridItem(CardArea.Subtitle)
                    .padding(end = 16.dp),
            )

            Text(
                text = description,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier
                    .gridItem(CardArea.Description)
                    .padding(end = 16.dp),
            )

            Text(
                text = extraText,
                style = MaterialTheme.typography.labelSmall,
                modifier = Modifier
                    .gridItem(CardArea.ExtraText)
                    .padding(bottom = 16.dp, end = 16.dp),
            )
        }
    }
}

ফলাফল

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

অতিরিক্ত সম্পদ