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

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

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

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

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

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

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

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

DSL ব্যবহার করে কম্পোজে ConstraintLayout নিম্নলিখিত উপায়ে কাজ করে:

  • createRefs() বা createRefFor() ব্যবহার করে ConstraintLayout এ প্রতিটি কম্পোজেবলের জন্য রেফারেন্স তৈরি করুন
  • সীমাবদ্ধতাগুলি constrainAs() সংশোধক ব্যবহার করে প্রদান করা হয়, যা রেফারেন্সটিকে একটি প্যারামিটার হিসাবে নেয় এবং আপনাকে বডি ল্যাম্বডায় এর সীমাবদ্ধতাগুলি নির্দিষ্ট করতে দেয়।
  • 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

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

একটি কন্সট্রেন্ট লেআউটে সাজানো একটি বোতাম এবং একটি পাঠ্য উপাদান দেখায়

ডিকপলড API

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 নির্দেশিকা, বাধা এবং চেইনগুলির মতো ধারণা রয়েছে যা আপনার কম্পোজেবলের ভিতরে অবস্থান নির্ধারণে সহায়তা করতে পারে।

নির্দেশিকা

নির্দেশিকাগুলি লেআউট ডিজাইন করার জন্য ছোট চাক্ষুষ সহায়ক। Composables একটি নির্দেশিকা সীমাবদ্ধ করা যেতে পারে. নির্দেশিকাগুলি প্যারেন্ট কম্পোজেবলের ভিতরে একটি নির্দিষ্ট 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 ব্যবহার করে কম্পোজ নমুনাগুলিতে কর্মরত APIগুলি থেকে কম্পোজে ConstraintLayout সম্পর্কে আরও জানুন।

{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}
পূর্ববর্তী
অন্তর্নিহিত পরিমাপ