কন্টেইনারের বৈশিষ্ট্য সেট করুন

আপনি বিভিন্ন স্ক্রিন সাইজ এবং কন্টেন্ট টাইপের সাথে সামঞ্জস্যপূর্ণ নমনীয় লেআউট তৈরি করতে একটি গ্রিড কন্টেইনার কনফিগারেশন নির্ধারণ করতে পারেন। এই পৃষ্ঠায় নিম্নলিখিত বিষয়গুলো কীভাবে করতে হয় তা বর্ণনা করা হয়েছে:

একটি গ্রিড সংজ্ঞায়িত করুন

একটি গ্রিড কলাম এবং সারি নিয়ে গঠিত। Grid কম্পোজেবল-এর একটি config প্যারামিটার আছে যা GridConfigurationScope মধ্যে কলাম এবং সারি নির্ধারণ করার জন্য একটি ল্যাম্বডা গ্রহণ করে। নিম্নলিখিত উদাহরণটি এমন একটি গ্রিড নির্ধারণ করে যেখানে তিনটি সারি এবং দুটি কলাম রয়েছে, এবং প্রতিটির একটি নির্দিষ্ট আকার Dp তে উল্লেখ করা আছে: 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

একটি গ্রিডে জিনিসপত্র রাখুন

Grid content ল্যাম্বডাতে থাকা UI এলিমেন্টগুলোকে গ্রিড সেলে স্থাপন করে। আপনি সারি এবং কলাম স্পষ্টভাবে সংজ্ঞায়িত করেছেন কি না, তা নির্বিশেষে গ্রিড আইটেমগুলো সাজিয়ে দেয়। ডিফল্টরূপে, Grid একটি UI এলিমেন্টকে সারির উপলব্ধ গ্রিড সেলে স্থাপন করার চেষ্টা করে; যদি তা না পারে, তবে এটি পরবর্তী সারির একটি উপলব্ধ গ্রিড সেলে স্থাপন করে। যদি কোনো খালি সেল না থাকে, তবে Grid একটি নতুন সারি তৈরি করে।

নিচের উদাহরণে, গ্রিডটিতে ছয়টি গ্রিড সেল রয়েছে এবং প্রতিটিতে একটি করে কার্ড রাখা হয় (চিত্র ১)। প্রতিটি গ্রিড সেলের আকার 160dp x 90dp , ফলে মোট গ্রিডের আকার হয় 320dp x 270dp । 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

তিনটি সারি ও দুটি কলাম বিশিষ্ট একটি গ্রিডে ছয়টি তাস রাখা হয়।
চিত্র ১। তিনটি সারি ও দুটি কলাম বিশিষ্ট একটি গ্রিডে ছয়টি তাস রাখা আছে।

এই ডিফল্ট আচরণ পরিবর্তন করে কলাম অনুযায়ী পূরণ করতে, flow প্রপার্টিটি GridFlow.Column এ সেট করুন। 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

ফ্লো ফাংশন আইটেম রাখার দিক পরিবর্তন করে।
চিত্র ২। GridFlow.Row (বাম) এবং GridFlow.Column (ডান)।

ট্র্যাকের আকার পরিচালনা করুন

সারি এবং কলামগুলোকে সম্মিলিতভাবে গ্রিড ট্র্যাক বলা হয়। আপনি নিম্নলিখিত পদ্ধতিগুলোর যেকোনো একটি ব্যবহার করে একটি গ্রিড ট্র্যাকের আকার নির্দিষ্ট করতে পারেন:

  • স্থির ( Dp ): একটি নির্দিষ্ট আকার বরাদ্দ করে (যেমন, column(180.dp) )।
  • ভগ্নাংশ ( Float ): মোট উপলব্ধ স্থানের একটি শতাংশ বরাদ্দ করে, যা 0.0f থেকে 1.0f পর্যন্ত হতে পারে (যেমন, ৫০%-এর জন্য row(0.5f) )।
  • ফ্লেক্সিবল (Flexible ( Fr ): ফিক্সড এবং ফ্র্যাকশনাল ট্র্যাক গণনা করার পর অবশিষ্ট স্থান আনুপাতিকভাবে বন্টন করে। উদাহরণস্বরূপ, যদি দুটি সারি 1.fr এবং 3.fr হিসেবে সেট করা হয়, তাহলে পরেরটি অবশিষ্ট উচ্চতার ৭৫% পাবে।
  • ইন্ট্রিনসিক : এর ভেতরের বিষয়বস্তুর ওপর ভিত্তি করে ট্র্যাকের আকার নির্ধারণ করে। আরও তথ্যের জন্য, ‘ইন্ট্রিনসিকভাবে গ্রিড ট্র্যাকের আকার নির্ধারণ করুন ’ দেখুন।

নিম্নলিখিত উদাহরণটিতে সারির উচ্চতা নির্ধারণ করতে বিভিন্ন ট্র্যাক সাইজিং অপশন ব্যবহার করা হয়েছে: 

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

চারটি প্রধান ট্র্যাক সাইজিং বিকল্প ব্যবহার করে সারির উচ্চতা নির্ধারণ করা হয়।
চিত্র ৩। Grid এর চারটি প্রধান ট্র্যাক সাইজিং অপশন ব্যবহার করে নির্ধারিত সারির উচ্চতা।

গ্রিড ট্র্যাকের আকার অভ্যন্তরীণভাবে নির্ধারণ করুন

যখন আপনি লেআউটটিকে একটি নির্দিষ্ট কন্টেইনারে আবদ্ধ না রেখে, কন্টেন্টের সাথে মানিয়ে নিতে চান, তখন একটি Grid জন্য ইন্ট্রিনসিক সাইজিং ব্যবহার করতে পারেন। গ্রিড ট্র্যাকের আকার নিম্নলিখিত মানগুলির দ্বারা নির্ধারিত হয়:

  • GridTrackSize.MaxContent : কন্টেন্টের সর্বোচ্চ অন্তর্নিহিত আকার ব্যবহার করুন (যেমন, কোনো র‍্যাপিং ছাড়া একটি টেক্সট ব্লকের ক্ষেত্রে প্রস্থটি টেক্সটের সম্পূর্ণ দৈর্ঘ্য দ্বারা নির্ধারিত হয়)।
  • GridTrackSize.MinContent : কন্টেন্টের সর্বনিম্ন অন্তর্নিহিত আকার ব্যবহার করুন (যেমন, একটি টেক্সট ব্লকের দীর্ঘতম একক শব্দ দ্বারা প্রস্থ নির্ধারিত হয়)।
  • GridTrackSize.Auto : ট্র্যাকের জন্য একটি নমনীয় আকার ব্যবহার করুন যা উপলব্ধ স্থানের উপর ভিত্তি করে পরিবর্তিত হয়। এটি ডিফল্টরূপে MaxContent মতো আচরণ করে, কিন্তু প্যারেন্ট কন্টেইনারের মধ্যে ফিট করার জন্য এর বিষয়বস্তুকে সংকুচিত করে এবং মুড়ে দেয়।

নিম্নলিখিত উদাহরণটিতে দুটি লেখা পাশাপাশি রাখা হয়েছে। প্রথম লেখাটির জন্য কলামের আকার নির্ধারিত হয় লেখাটি প্রদর্শনের জন্য প্রয়োজনীয় ন্যূনতম প্রস্থ দ্বারা, এবং দ্বিতীয় কলামের প্রস্থ নির্ভর করে লেখাটির জন্য প্রয়োজনীয় সর্বোচ্চ প্রস্থের উপর। 

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

কলামগুলিতে নির্দিষ্ট অন্তর্নিহিত আকার।
চিত্র ৪। কলামগুলিতে নির্দিষ্ট অন্তর্নিহিত আকারসমূহ।

সারি এবং কলামের মধ্যে ব্যবধান নির্ধারণ করুন

একবার আপনার গ্রিড ট্র্যাকগুলির আকার নির্ধারণ করা হয়ে গেলে, আপনি ট্র্যাকগুলির মধ্যেকার ব্যবধান আরও সূক্ষ্ম করার জন্য গ্রিড গ্যাপ পরিবর্তন করতে পারেন। আপনি columnGap ফাংশন দিয়ে কলামের ব্যবধান এবং rowGap দিয়ে সারির ব্যবধান নির্দিষ্ট করতে পারেন। নিচের উদাহরণে, প্রতিটি সারির মধ্যে 16dp ব্যবধান এবং প্রতিটি কলামের মধ্যে 8dp ব্যবধান রয়েছে (চিত্র ৫)। 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

সারি এবং কলামের মধ্যে ব্যবধান।
চিত্র ৫। সারি ও কলামের মধ্যবর্তী ব্যবধান।

আপনি একই কলাম ও সারির আকারের ফাঁক নির্ধারণ করতে, এবং একটিমাত্র ফাংশন ব্যবহার করে কলাম ও ফাঁকের আকার আলাদাভাবে নির্ধারণ করতেও ' gap নামক সুবিধাজনক ফাংশনটি ব্যবহার করতে পারেন। নিচের কোডটি গ্রিডে 8dp ফাঁক যোগ করে: 

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

পূর্ববর্তী
শুরু করুন
পরবর্তী
আইটেমের বৈশিষ্ট্য সেট করুন