গ্রিড টেবিল লেআউট, গ্রিড টেবিল লেআউট

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

এই রেসিপিতে, আপনি Grid এপিআই ব্যবহার করে একটি টেবিল তৈরি করবেন।

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

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

উপকরণ

• Grid : একটি কম্পোজেবল লেআউট যা আইটেমগুলোকে একটি দ্বি-মাত্রিক গ্রিডে স্থাপন করে। লেআউট কনফিগারেশনটি config ল্যাম্বডা প্যারামিটারের ভিতরে নির্দিষ্ট করা হয়, আর UI কন্টেন্ট আইটেমগুলো content ল্যাম্বডা প্যারামিটারের ভিতরে ডিক্লেয়ার করা হয়।
• GridTrackSize.Auto : কন্টেন্টের অন্তর্নিহিত আকারের উপর ভিত্তি করে গ্রিড কনফিগারেশনের মধ্যে স্বয়ংক্রিয় ট্র্যাক সাইজিং নির্দিষ্ট করে, উদাহরণস্বরূপ, column(GridTrackSize.Auto) এবং row(GridTrackSize.Auto) ।
• gap() : GridConfigurationScope মধ্যে সারি এবং কলামের ব্যবধান নির্ধারণ করে, যেমন gap(row = 8.dp, column = 16.dp) ।

পদক্ষেপ

একটিমাত্র Grid লেআউট ব্যবহার করে একটি বহু-কলাম বিশিষ্ট তুলনামূলক সারণী তৈরি করুন, যেখানে সমস্ত আইটেমের জন্য স্বয়ংক্রিয় কলাম বিন্যাস এবং ট্র্যাক সাইজিংয়ের ব্যবস্থা থাকবে।

১. ট্র্যাকের আকার নির্ধারণ করতে গ্রিডের সারি এবং কলাম গণনা করুন।

প্রথমে, ট্র্যাকগুলোর আকার নির্ধারণ করতে আপনার কলাম এবং সারি গণনা করুন:

• কলাম : আপনি যে সংখ্যক অ্যাট্রিবিউট তুলনা করছেন, তার সাথে আইটেমের নামের জন্য একটি কলাম।
• সারি : আপনি যে সংখ্যক আইটেম তুলনা করছেন, তার সাথে একটি হেডার সারি।

চারটি বৈশিষ্ট্যের ভিত্তিতে দুটি কম্পোনেন্টের ( FlexBox এবং Grid ) তুলনা করার এই রেসিপিটির জন্য আপনার পাঁচটি কলাম এবং তিনটি সারি প্রয়োজন।

২. গ্রিড ব্যবহার করে তুলনা সারণী তৈরি করুন।

আপনার টেবিলের আইটেমগুলো সাজানোর জন্য Grid ব্যবহার করে একটি TableInGrid কম্পোজেবল তৈরি করুন। ট্র্যাকের আকার নির্ধারণ করতে config ল্যাম্বডার ভিতরে column এবং row ফাংশনগুলো কল করুন, এবং gap() দিয়ে সেলের ব্যবধান সেট করুন। যেহেতু টেক্সটের একটি অন্তর্নিহিত আকার থাকে, তাই GridTrackSize.Auto স্বয়ংক্রিয়ভাবে কলাম এবং সারিগুলোকে তাদের বিষয়বস্তুর সাথে মানানসই করে আকার দেয়।

content ল্যাম্বডার ভিতরে আপনার টেবিলের হেডার এবং ডেটা রাখুন। Grid স্বয়ংক্রিয়ভাবে সমস্ত সেলের অবস্থান এবং অ্যালাইনমেন্ট পরিচালনা করে:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}
GridByExamples.kt

ফলাফল

আপনি এখন স্বয়ংক্রিয় কলাম বিন্যাস এবং সেলস্পেসিং সহ একটি পরিচ্ছন্ন, দ্বি-মাত্রিক তুলনা সারণী তৈরি করেছেন।

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

• কম্পোজে গ্রিড
• কন্টেইনারের বৈশিষ্ট্য সেট করুন

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

এই রেসিপিতে, আপনি Grid এপিআই ব্যবহার করে একটি টেবিল তৈরি করবেন।

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

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

উপকরণ

• Grid : একটি কম্পোজেবল লেআউট যা আইটেমগুলোকে একটি দ্বি-মাত্রিক গ্রিডে স্থাপন করে। লেআউট কনফিগারেশনটি config ল্যাম্বডা প্যারামিটারের ভিতরে নির্দিষ্ট করা হয়, আর UI কন্টেন্ট আইটেমগুলো content ল্যাম্বডা প্যারামিটারের ভিতরে ডিক্লেয়ার করা হয়।
• GridTrackSize.Auto : কন্টেন্টের অন্তর্নিহিত আকারের উপর ভিত্তি করে গ্রিড কনফিগারেশনের মধ্যে স্বয়ংক্রিয় ট্র্যাক সাইজিং নির্দিষ্ট করে, উদাহরণস্বরূপ, column(GridTrackSize.Auto) এবং row(GridTrackSize.Auto) ।
• gap() : GridConfigurationScope মধ্যে সারি এবং কলামের ব্যবধান নির্ধারণ করে, যেমন gap(row = 8.dp, column = 16.dp) ।

পদক্ষেপ

একটিমাত্র Grid লেআউট ব্যবহার করে একটি বহু-কলাম বিশিষ্ট তুলনামূলক সারণী তৈরি করুন, যেখানে সমস্ত আইটেমের জন্য স্বয়ংক্রিয় কলাম বিন্যাস এবং ট্র্যাক সাইজিংয়ের ব্যবস্থা থাকবে।

১. ট্র্যাকের আকার নির্ধারণ করতে গ্রিডের সারি এবং কলাম গণনা করুন।

প্রথমে, ট্র্যাকগুলোর আকার নির্ধারণ করতে আপনার কলাম এবং সারি গণনা করুন:

• কলাম : আপনি যে সংখ্যক অ্যাট্রিবিউট তুলনা করছেন, তার সাথে আইটেমের নামের জন্য একটি কলাম।
• সারি : আপনি যে সংখ্যক আইটেম তুলনা করছেন, তার সাথে একটি হেডার সারি।

চারটি বৈশিষ্ট্যের ভিত্তিতে দুটি কম্পোনেন্টের ( FlexBox এবং Grid ) তুলনা করার এই রেসিপিটির জন্য আপনার পাঁচটি কলাম এবং তিনটি সারি প্রয়োজন।

২. গ্রিড ব্যবহার করে তুলনা সারণী তৈরি করুন।

আপনার টেবিলের আইটেমগুলো সাজানোর জন্য Grid ব্যবহার করে একটি TableInGrid কম্পোজেবল তৈরি করুন। ট্র্যাকের আকার নির্ধারণ করতে config ল্যাম্বডার ভিতরে column এবং row ফাংশনগুলো কল করুন, এবং gap() দিয়ে সেলের ব্যবধান সেট করুন। যেহেতু টেক্সটের একটি অন্তর্নিহিত আকার থাকে, তাই GridTrackSize.Auto স্বয়ংক্রিয়ভাবে কলাম এবং সারিগুলোকে তাদের বিষয়বস্তুর সাথে মানানসই করে আকার দেয়।

content ল্যাম্বডার ভিতরে আপনার টেবিলের হেডার এবং ডেটা রাখুন। Grid স্বয়ংক্রিয়ভাবে সমস্ত সেলের অবস্থান এবং অ্যালাইনমেন্ট পরিচালনা করে:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}
GridByExamples.kt

ফলাফল

আপনি এখন স্বয়ংক্রিয় কলাম বিন্যাস এবং সেলস্পেসিং সহ একটি পরিচ্ছন্ন, দ্বি-মাত্রিক তুলনা সারণী তৈরি করেছেন।

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

• কম্পোজে গ্রিড
• কন্টেইনারের বৈশিষ্ট্য সেট করুন