কম্পোজে সীমাবদ্ধতা লেআউট

ConstraintLayout হল এমন একটি লেআউট যা আপনাকে স্ক্রিনে অন্যান্য কম্পোজেবলের সাপেক্ষে কম্পোজেবল স্থাপন করতে দেয়। এটি একাধিক নেস্টেড Row , Column , Box এবং অন্যান্য কাস্টম লেআউট উপাদান ব্যবহারের বিকল্প। আরও জটিল অ্যালাইনমেন্ট প্রয়োজনীয়তা সহ বৃহত্তর লেআউট বাস্তবায়নের সময় ConstraintLayout কার্যকর।

নিম্নলিখিত পরিস্থিতিতে ConstraintLayout ব্যবহার করার কথা বিবেচনা করুন:

  • কোডের পঠনযোগ্যতা উন্নত করার জন্য স্ক্রিনে উপাদানগুলির অবস্থান নির্ধারণের জন্য একাধিক Column এবং Row নেস্টিং এড়াতে।
  • অন্যান্য কম্পোজেবলের তুলনায় কম্পোজেবল স্থাপন করা অথবা নির্দেশিকা, বাধা বা শৃঙ্খলের উপর ভিত্তি করে কম্পোজেবল স্থাপন করা।

ভিউ সিস্টেমে, বৃহৎ এবং জটিল লেআউট তৈরির জন্য ConstraintLayout ছিল প্রস্তাবিত উপায়, কারণ নেস্টেড ভিউয়ের তুলনায় ফ্ল্যাট ভিউ হায়ারার্কি পারফরম্যান্সের জন্য ভালো ছিল। তবে, কম্পোজে এটি কোনও উদ্বেগের বিষয় নয়, যা দক্ষতার সাথে গভীর লেআউট হায়ারার্কি পরিচালনা করতে সক্ষম।

ConstraintLayout দিয়ে শুরু করুন

Compose-এ ConstraintLayout ব্যবহার করার জন্য, আপনাকে আপনার build.gradle এ এই নির্ভরতা যোগ করতে হবে ( Compose সেটআপ ছাড়াও):

implementation "androidx.constraintlayout:constraintlayout-compose:$constraintlayout_compose_version"

Compose-এ ConstraintLayout DSL ব্যবহার করে নিম্নলিখিত পদ্ধতিতে কাজ করে:

  • createRefs() অথবা createRefFor() ব্যবহার করে ConstraintLayout এ প্রতিটি কম্পোজেবলের জন্য রেফারেন্স তৈরি করুন।
  • constrainAs() মডিফায়ার ব্যবহার করে সীমাবদ্ধতা প্রদান করা হয়, যা রেফারেন্সকে একটি প্যারামিটার হিসেবে গ্রহণ করে এবং আপনাকে lambda বডিতে এর সীমাবদ্ধতা নির্দিষ্ট করতে দেয়।
  • linkTo() অথবা অন্যান্য সহায়ক পদ্ধতি ব্যবহার করে সীমাবদ্ধতা নির্দিষ্ট করা হয়।
  • parent হল একটি বিদ্যমান রেফারেন্স যা ConstraintLayout কম্পোজেবলের প্রতি সীমাবদ্ধতা নির্দিষ্ট করতে ব্যবহার করা যেতে পারে।

ConstraintLayout ব্যবহার করে কম্পোজেবলের একটি উদাহরণ এখানে দেওয়া হল: 

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout {
        // Create references for the composables to constrain
        val (button, text) = createRefs()

        Button(
            onClick = { /* Do something */ },
            // Assign reference "button" to the Button composable
            // and constrain it to the top of the ConstraintLayout
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // Assign reference "text" to the Text composable
        // and constrain it to the bottom of the Button composable
        Text(
            "Text",
            Modifier.constrainAs(text) {
                top.linkTo(button.bottom, margin = 16.dp)
            }
        )
    }
}
ConstraintLayoutSnippets.kt

এই কোডটি Button এর উপরের অংশটিকে 16.dp মার্জিন সহ প্যারেন্টে সীমাবদ্ধ করে এবং Button এর নীচে একটি Text ও 16.dp মার্জিন সহ সীমাবদ্ধ করে।

বোতামটি লেখার উপরে প্রদর্শিত হবে
চিত্র ১. একটি ConstraintLayout এ একটি Button এবং একটি Text কম্পোজেবল যা একে অপরের সাথে আবদ্ধ।

ডিকপলড এপিআই

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

এই ধরণের ক্ষেত্রে, আপনি ConstraintLayout অন্যভাবে ব্যবহার করতে পারেন:

  1. ConstraintLayout এ প্যারামিটার হিসেবে একটি ConstraintSet পাস করুন।
  2. layoutId মডিফায়ার ব্যবহার করে ConstraintSet তৈরি রেফারেন্সগুলি কম্পোজেবলগুলিতে বরাদ্দ করুন। 

@Composable
fun DecoupledConstraintLayout() {
    BoxWithConstraints {
        val constraints = if (minWidth < 600.dp) {
            decoupledConstraints(margin = 16.dp) // Portrait constraints
        } else {
            decoupledConstraints(margin = 32.dp) // Landscape constraints
        }

        ConstraintLayout(constraints) {
            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.layoutId("button")
            ) {
                Text("Button")
            }

            Text("Text", Modifier.layoutId("text"))
        }
    }
}

private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}
ConstraintLayoutSnippets.kt

তারপর, যখন আপনার সীমাবদ্ধতা পরিবর্তন করার প্রয়োজন হবে, তখন আপনি কেবল একটি ভিন্ন ConstraintSet পাস করতে পারেন।

ConstraintLayout ধারণা

ConstraintLayout নির্দেশিকা, বাধা এবং শৃঙ্খলের মতো ধারণা রয়েছে যা আপনার কম্পোজেবলের ভিতরে উপাদানগুলির অবস্থান নির্ধারণে সহায়তা করতে পারে।

নির্দেশিকা

নির্দেশিকা হল লেআউট ডিজাইন করার জন্য ছোট ভিজ্যুয়াল সহায়ক। কম্পোজেবলগুলিকে একটি নির্দেশিকাতে সীমাবদ্ধ করা যেতে পারে। প্যারেন্ট কম্পোজেবলের ভিতরে একটি নির্দিষ্ট dp বা percentage উপাদান স্থাপনের জন্য নির্দেশিকা কার্যকর।

দুটি ভিন্ন ধরণের নির্দেশিকা রয়েছে, উল্লম্ব এবং অনুভূমিক। দুটি অনুভূমিক হল top এবং bottom , এবং দুটি উল্লম্ব হল start এবং end । 

ConstraintLayout {
    // Create guideline from the start of the parent at 10% the width of the Composable
    val startGuideline = createGuidelineFromStart(0.1f)
    // Create guideline from the end of the parent at 10% the width of the Composable
    val endGuideline = createGuidelineFromEnd(0.1f)
    //  Create guideline from 16 dp from the top of the parent
    val topGuideline = createGuidelineFromTop(16.dp)
    //  Create guideline from 16 dp from the bottom of the parent
    val bottomGuideline = createGuidelineFromBottom(16.dp)
}
ConstraintLayoutSnippets.kt

একটি নির্দেশিকা তৈরি করতে, প্রয়োজনীয় নির্দেশিকাটির ধরণ সহ createGuidelineFrom* ব্যবহার করুন। এটি একটি রেফারেন্স তৈরি করে যা Modifier.constrainAs() ব্লকে ব্যবহার করা যেতে পারে।

বাধা

নির্দিষ্ট দিকের সবচেয়ে চরম উইজেটের উপর ভিত্তি করে একটি ভার্চুয়াল নির্দেশিকা তৈরি করতে বাধাগুলি একাধিক কম্পোজেবল উল্লেখ করে।

একটি বাধা তৈরি করতে, createTopBarrier() (অথবা: createBottomBarrier() , createEndBarrier() , createStartBarrier() ) ব্যবহার করুন, এবং বাধা তৈরির জন্য রেফারেন্সগুলি প্রদান করুন। 

ConstraintLayout {
    val constraintSet = ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        val topBarrier = createTopBarrier(button, text)
    }
}
ConstraintLayoutSnippets.kt

এরপর বাধাটি একটি Modifier.constrainAs() ব্লকে ব্যবহার করা যেতে পারে।

চেইন

শৃঙ্খলগুলি একটি একক অক্ষে (অনুভূমিকভাবে বা উল্লম্বভাবে) গোষ্ঠীর মতো আচরণ প্রদান করে। অন্য অক্ষটি স্বাধীনভাবে সীমাবদ্ধ করা যেতে পারে।

একটি চেইন তৈরি করতে, createVerticalChain অথবা createHorizontalChain ব্যবহার করুন: 

ConstraintLayout {
    val constraintSet = ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        val verticalChain = createVerticalChain(button, text, chainStyle = ChainStyle.Spread)
        val horizontalChain = createHorizontalChain(button, text)
    }
}
ConstraintLayoutSnippets.kt

এরপর চেইনটি Modifier.constrainAs() ব্লকে ব্যবহার করা যেতে পারে।

একটি চেইন বিভিন্ন ChainStyles দিয়ে কনফিগার করা যেতে পারে, যা একটি কম্পোজেবলের চারপাশের স্থান কীভাবে মোকাবেলা করতে হবে তা নির্ধারণ করে, যেমন:

  • ChainStyle.Spread : প্রথম কম্পোজেবলের আগে এবং শেষ কম্পোজেবলের পরে খালি স্থান সহ সমস্ত কম্পোজেবলে স্থান সমানভাবে বিতরণ করা হয়।
  • ChainStyle.SpreadInside : প্রথম কম্পোজেবলের আগে বা শেষ কম্পোজেবলের পরে কোনও ফাঁকা স্থান ছাড়াই সমস্ত কম্পোজেবলের মধ্যে স্থান সমানভাবে বিতরণ করা হয়।
  • ChainStyle.Packed : প্রথম কম্পোজেবলের আগে এবং শেষ কম্পোজেবলের পরে স্থান বিতরণ করা হয়, কম্পোজেবলগুলিকে একে অপরের মধ্যে স্থান ছাড়াই একসাথে প্যাক করা হয়।

আরও জানুন

ConstraintLayout ব্যবহার করে এমন Compose নমুনাগুলিতে কার্যকর API গুলি থেকে Compose-এ ConstraintLayout সম্পর্কে আরও জানুন।

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %} {% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}
পূর্ববর্তী
অন্তর্নিহিত পরিমাপ