এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

কাস্টম লেআউট

কম্পোজে, UI উপাদানগুলিকে কম্পোজেবল ফাংশন দ্বারা প্রতিনিধিত্ব করা হয় যা ইনভোক করার সময় UI এর একটি অংশ নির্গত করে, যা পরে একটি UI ট্রিতে যোগ করা হয় যা স্ক্রিনে রেন্ডার হয়। প্রতিটি UI উপাদানের একটি প্যারেন্ট এবং সম্ভাব্যভাবে অনেকগুলি সন্তান থাকে। প্রতিটি উপাদান তার প্যারেন্টের মধ্যেও অবস্থিত, যা (x, y) অবস্থান হিসাবে নির্দিষ্ট করা হয় এবং একটি আকার, যা width এবং height হিসাবে নির্দিষ্ট করা হয়।

অভিভাবকরা তাদের শিশু উপাদানগুলির জন্য সীমাবদ্ধতাগুলি সংজ্ঞায়িত করেন। একটি উপাদানকে সেই সীমাবদ্ধতার মধ্যে তার আকার নির্ধারণ করতে বলা হয়। সীমাবদ্ধতাগুলি একটি উপাদানের সর্বনিম্ন এবং সর্বাধিক width এবং height সীমাবদ্ধ করে। যদি একটি উপাদানে শিশু উপাদান থাকে, তবে এটি প্রতিটি শিশুকে তার আকার নির্ধারণে সহায়তা করার জন্য পরিমাপ করতে পারে। একবার একটি উপাদান তার নিজস্ব আকার নির্ধারণ করে এবং রিপোর্ট করে, তখন এটি তার শিশু উপাদানগুলিকে নিজের সাপেক্ষে কীভাবে স্থাপন করতে হবে তা নির্ধারণ করার সুযোগ পায়, যেমনটি কাস্টম লেআউট তৈরিতে বিস্তারিতভাবে বর্ণনা করা হয়েছে।

UI ট্রিতে প্রতিটি নোড স্থাপন করা তিন ধাপের প্রক্রিয়া। প্রতিটি নোডের অবশ্যই:

যেকোনো শিশুকে পরিমাপ করুন
নিজের আকার নিজেই নির্ধারণ করুন
তার সন্তানদের রাখুন

নোড লেআউটের তিনটি ধাপ: শিশুদের পরিমাপ করুন, আকার নির্ধারণ করুন, শিশুদের রাখুন — **চিত্র ১.** নোড লেআউটের তিনটি ধাপ হল শিশুদের পরিমাপ করা, আকার নির্ধারণ করা এবং শিশুদের স্থাপন করা।

স্কোপের ব্যবহার নির্ধারণ করে যে আপনি কখন আপনার বাচ্চাদের পরিমাপ এবং স্থাপন করতে পারবেন। একটি লেআউট পরিমাপ শুধুমাত্র পরিমাপ এবং লেআউট পাসের সময় করা যেতে পারে, এবং একটি শিশুকে কেবল লেআউট পাসের সময় রাখা যেতে পারে (এবং শুধুমাত্র এটি পরিমাপ করার পরে)। MeasureScope এবং PlacementScope এর মতো Compose স্কোপের কারণে, এটি কম্পাইলের সময় প্রয়োগ করা হয়।

লেআউট মডিফায়ার ব্যবহার করুন

একটি উপাদান কীভাবে পরিমাপ এবং বিন্যাস করা হয় তা পরিবর্তন করতে আপনি layout মডিফায়ার ব্যবহার করতে পারেন। Layout হল একটি ল্যাম্বডা; এর প্যারামিটারগুলির মধ্যে রয়েছে আপনি যে উপাদানটি পরিমাপ করতে পারেন, measurable হিসাবে পাস করেছেন এবং সেই কম্পোজেবলের আগত সীমাবদ্ধতাগুলি, যা constraints হিসাবে পাস করেছেন। একটি কাস্টম লেআউট মডিফায়ার দেখতে এইরকম হতে পারে:

fun Modifier.customLayoutModifier() =
    layout { measurable, constraints ->
        // ...
    }CustomLayoutSnippets.kt

স্ক্রিনে একটি Text প্রদর্শন করুন এবং টেক্সটের প্রথম লাইনের উপর থেকে বেসলাইন পর্যন্ত দূরত্ব নিয়ন্ত্রণ করুন। paddingFromBaseline মডিফায়ার ঠিক এটিই করে; আপনি এখানে উদাহরণ হিসেবে এটি বাস্তবায়ন করছেন। এটি করার জন্য, layout মডিফায়ার ব্যবহার করে স্ক্রিনে কম্পোজেবলটি ম্যানুয়ালি রাখুন। এখানে ফলাফলের আচরণ দেখানো হল যেখানে Text টপ প্যাডিং 24.dp এ সেট করা আছে:

সাধারণ UI প্যাডিং, যা উপাদানগুলির মধ্যে স্থান নির্ধারণ করে এবং টেক্সট প্যাডিং যা একটি বেসলাইন থেকে অন্য বেসলাইনে স্থান নির্ধারণ করে, এর মধ্যে পার্থক্য দেখায়। — **চিত্র ২.** `paddingFromBaseline` প্রয়োগ করা হয়েছে এমন টেক্সট।

এই ব্যবধান তৈরি করার কোডটি এখানে:

fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = layout { measurable, constraints ->
    // Measure the composable
    val placeable = measurable.measure(constraints)

    // Check the composable has a first baseline
    check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
    val firstBaseline = placeable[FirstBaseline]

    // Height of the composable with padding - first baseline
    val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
    val height = placeable.height + placeableY
    layout(placeable.width, height) {
        // Where the composable gets placed
        placeable.placeRelative(0, placeableY)
    }
}CustomLayoutSnippets.kt

এই কোডে কী ঘটছে তা এখানে:

measurable ল্যাম্বডা প্যারামিটারে, আপনি পরিমাপযোগ্য প্যারামিটার দ্বারা উপস্থাপিত Text পরিমাপ করতে measurable.measure(constraints) কল করেন।
আপনি layout(width, height) পদ্ধতিটি কল করে কম্পোজেবলের আকার নির্দিষ্ট করতে পারেন, যা মোড়ানো উপাদানগুলি স্থাপনের জন্য ব্যবহৃত একটি ল্যাম্বডাও দেয়। এই ক্ষেত্রে, এটি শেষ বেসলাইন এবং যুক্ত শীর্ষ প্যাডিংয়ের মধ্যে উচ্চতা।
আপনি placeable.place(x, y) কল করে পর্দায় মোড়ানো উপাদানগুলি স্থাপন করতে পারেন। যদি মোড়ানো উপাদানগুলি স্থাপন না করা হয়, তবে সেগুলি দৃশ্যমান হবে না। y অবস্থানটি উপরের প্যাডিংয়ের সাথে মিলে যায়: পাঠ্যের প্রথম বেসলাইনের অবস্থান।

এটি প্রত্যাশা অনুযায়ী কাজ করে কিনা তা যাচাই করতে, একটি Text এ এই মডিফায়ারটি ব্যবহার করুন:

@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
    }
}

@Preview
@Composable
fun TextWithNormalPaddingPreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.padding(top = 32.dp))
    }
}CustomLayoutSnippets.kt

টেক্সট এলিমেন্টের একাধিক প্রিভিউ; একটিতে এলিমেন্টের মধ্যে সাধারণ প্যাডিং দেখানো হয়, অন্যটিতে এক বেসলাইন থেকে অন্য বেসলাইনে প্যাডিং দেখানো হয়। — **চিত্র ৩.** সংশোধক একটি `Text` কম্পোজেবল এবং প্রিভিউতে প্রয়োগ করা হয়েছে।

কাস্টম লেআউট তৈরি করুন

layout মডিফায়ার শুধুমাত্র কলিং কম্পোজেবল পরিবর্তন করে। একাধিক কম্পোজেবল পরিমাপ এবং লেআউট করতে, Layout কম্পোজেবল ব্যবহার করুন। এই কম্পোজেবল আপনাকে ম্যানুয়ালি বাচ্চাদের পরিমাপ এবং লেআউট করতে দেয়। Column এবং Row মতো সমস্ত উচ্চ-স্তরের লেআউট Layout কম্পোজেবল দিয়ে তৈরি।

এই উদাহরণটি Column এর একটি খুব মৌলিক সংস্করণ তৈরি করে। বেশিরভাগ কাস্টম লেআউট এই প্যাটার্ন অনুসরণ করে:

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // measure and position children given constraints logic here
        // ...
    }
}CustomLayoutSnippets.kt

layout মডিফায়ারের মতোই, measurables হল সেইসব শিশুদের তালিকা যাদের পরিমাপ করা প্রয়োজন এবং constraints হল অভিভাবকদের কাছ থেকে আসা constraints। আগের মতো একই যুক্তি অনুসরণ করে, MyBasicColumn এভাবে প্রয়োগ করা যেতে পারে:

  )         

   

   

     }@Composable >fun MyBasicColumn( modifier: Modifier = Modifier, content: @Composable () -> Unit class="devsite-syntax-w"> { Layout( modifier = modifier, content = content ) { measurables, constraints -> // Don't constrain child views further, measure them with given constraints // List of measured children val placeables = measurables.map { measurable -> // Measure each children measurable.measure(constraints) } // Set the size of the layout as big as it can layout(constraints.maxWidth, constraints.maxHeight) { // Track the y co-ord we have placed children up to var yPosition = 0 // Place children in the parent layout placeables.forEach { placeable -> // Position item on the screen placeable.placeRelative(x = 0, y = yPosition) // Record the y co-ord placed up to yPosition += placeable.height } } } class="devsite-github-link nocode no-select">CustomLayoutSnippets.kt

চাইল্ড কম্পোজেবলগুলি Layout সীমাবদ্ধতা দ্বারা সীমাবদ্ধ ( minHeight সীমাবদ্ধতা ছাড়াই), এবং সেগুলি পূর্ববর্তী কম্পোজেবলের yPosition এর উপর ভিত্তি করে স্থাপন করা হয়।

কাস্টম কম্পোজেবলটি কীভাবে ব্যবহার করা হবে তা এখানে দেওয়া হল:

@Composable
fun CallingComposable(modifier: Modifier = Modifier) {
    MyBasicColumn(modifier.padding(8.dp)) {
        Text("MyBasicColumn")
        Text("places items")
        Text("vertically.")
        Text("We've done it by hand!")
    }
}CustomLayoutSnippets.kt

একটি কলামে বেশ কয়েকটি টেক্সট এলিমেন্ট একটির উপরে আরেকটিকে স্ট্যাক করা হয়েছে। — **চিত্র ৪।** কাস্টম `Column` বাস্তবায়ন।

লেআউটের দিকনির্দেশনা

LocalLayoutDirection কম্পোজিশন স্থানীয় পরিবর্তন করে একটি কম্পোজেবলের লেআউট দিক পরিবর্তন করুন।

যদি আপনি স্ক্রিনে ম্যানুয়ালি কম্পোজেবল স্থাপন করেন, LayoutDirection হল layout মডিফায়ার বা Layout কম্পোজেবলের LayoutScope অংশ।

layoutDirection ব্যবহার করার সময়, place ব্যবহার করে কম্পোজেবল স্থাপন করুন। placeRelative পদ্ধতির বিপরীতে, place লেআউটের দিকের উপর ভিত্তি করে পরিবর্তিত হয় না (বাম থেকে ডান বনাম ডান থেকে বাম)।

কাস্টম লেআউটগুলি কার্যকর হচ্ছে

Compose-এর বেসিক লেআউটগুলিতে লেআউট এবং মডিফায়ার সম্পর্কে আরও জানুন, এবং কাস্টম লেআউট তৈরি করে এমন Compose নমুনাগুলিতে কাস্টম লেআউটগুলি কার্যকরভাবে দেখুন।

আরও জানুন

কম্পোজে কাস্টম লেআউট সম্পর্কে আরও জানতে, নিম্নলিখিত অতিরিক্ত রিসোর্সগুলি দেখুন।

ভিডিও

জেটপ্যাক কম্পোজ লেআউটের গভীরে প্রবেশ করুন

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}

আপনার জন্য প্রস্তাবিত

দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়।
কম্পোজ লেআউটে অভ্যন্তরীণ পরিমাপ
কম্পোজে গ্রাফিক্স
রচনা সংশোধক

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}