ConstraintLayout — এটি কী, কনস্ট্রেইন্ট এবং ফ্ল্যাট হায়ারার্কি

ConstraintLayout কী?

ConstraintLayout হলো AndroidX ConstraintLayout লাইব্রেরির একটি ViewGroup, যা ঘোষণামূলক সীমাবদ্ধতার (কনস্ট্রেইন্ট) মাধ্যমে নমনীয় এবং কার্যকরী ইন্টারফেস তৈরি করার জন্য ডিজাইন করা হয়েছে। LinearLayout-এর বিপরীতে, যা এলিমেন্টকে এক লাইনে সাজায়, বা RelativeLayout, যা প্রতিবেশীর সাপেক্ষে এলিমেন্ট স্থাপন করে, ConstraintLayout প্রতিটি এলিমেন্টকে যেকোনো অন্য এলিমেন্ট এবং প্যারেন্টের সাপেক্ষে একসাথে অ্যাঙ্কর করতে দেয়।

লাইব্রেরিটি Google I/O 2016-এ জটিল স্ক্রিনের রেন্ডারিং দ্রুত করার সমাধান হিসেবে ঘোষণা করা হয়েছিল। ConstraintLayout যে মূল সমস্যার সমাধান করে তা হলো লেআউট নেস্টিং। প্রতিটি নেস্টেড ViewGroup কমপক্ষে দুটি measure পাস এবং একটি layout পাস যোগ করে। ৪টি নেস্টিং স্তরের একটি স্ক্রিন ৮টি measure পাস সম্পাদন করে; একই কার্যকারিতা সহ ConstraintLayout মাত্র ২টি পাস সম্পাদন করে। Google (Android Performance Blog, 2017) অনুসারে, তিনটি নেস্টেড LinearLayout-কে একটি ConstraintLayout-এ প্রতিস্থাপন করলে onMeasure সময় 40% কমে যায়।

বর্তমান সংস্করণ ConstraintLayout 2.1.4 Android 2.3+ (API 9) এ AndroidX-এর মাধ্যমে স্থিরভাবে কাজ করে। সংস্করণ 2.0 এ সার্কুলার পজিশনিং, Flow (স্বয়ংক্রিয় এলিমেন্ট র‌্যাপিং) এবং MotionLayout সমর্থন চালু হয়েছে। আধুনিক Android ডেভেলপমেন্ট বোঝার জন্য ConstraintLayout অপরিহার্য — এটি Jetpack Compose এ মডিফায়ারের মৌলিক ধারণা হিসেবে, Android Studio ডিফল্ট টেমপ্লেটে এবং Material Design 3-এ ব্যবহৃত হয়।

ফ্ল্যাট হায়ারার্কি কীভাবে কাজ করে

ConstraintLayout-এর ফ্ল্যাট হায়ারার্কি মানে হলো সমস্ত চাইল্ড ভিউ একই নেস্টিং স্তরে থাকে। এলিমেন্ট A-কে LinearLayout-এ এবং LinearLayout-কে RelativeLayout-এ রাখার পরিবর্তে, সমস্ত এলিমেন্ট সরাসরি প্যারেন্ট ConstraintLayout বা একে অপরের সাথে অ্যাট্রিবিউটের মাধ্যমে বাঁধা থাকে। এটি প্রদান করে: কম মেমরি খরচ (প্রতিটি ViewGroup Java heap-এ একটি অবজেক্ট), দ্রুত layout পাস (কম রিকার্সিভ কল), এবং স্ক্রিন আকার পরিবর্তনের সময় আরও পূর্বানুমানযোগ্য আচরণ।

কনস্ট্রেইন্ট সিস্টেম: বাইন্ডিং, বায়াস এবং মার্জিন

কনস্ট্রেইন্ট (সীমাবদ্ধতা) হলো একটি ভিউ-এর প্রান্ত (বা তার কেন্দ্র) এবং অন্য ভিউ বা প্যারেন্টের প্রান্তের মধ্যে সংযোগ। প্রতিটি ভিউ-এ ৮টি পর্যন্ত কনস্ট্রেইন্ট থাকতে পারে: left, top, right, bottom, start, end, baseline এবং center। পজিশনিংয়ের জন্য ন্যূনতম দুটি লম্ব কনস্ট্রেইন্ট যথেষ্ট (যেমন top + left)।

অ্যাট্রিবিউট ফর্ম্যাট: app:layout_constraint[Source]_to[Target]Of="[id]" — যেখানে Source হলো বাঁধা প্রান্ত (Left, Right, Top, Bottom, Start, End, Baseline), এবং Target হলো লক্ষ্য প্রান্ত। উদাহরণ: app:layout_constraintTop_toBottomOf="@+id/header" মানে "বর্তমান এলিমেন্টের উপরের প্রান্ত header এলিমেন্টের নিচের প্রান্তের সাথে বাঁধা"। প্যারেন্টের সাথে বাঁধতে id parent ব্যবহার করা হয়।

বায়াস (ঝোঁক) একটি প্যারামিটার যা বিপরীত কনস্ট্রেইন্ট (left + right বা top + bottom) থাকলে কাজ করে। মান 0 থেকে 1 পর্যন্ত: 0 — বাম/উপরের প্রান্তে চাপা, 0.5 — কেন্দ্রীভূত, 1 — ডান/নিচের প্রান্তে। অ্যাট্রিবিউট: layout_constraintHorizontal_bias (0.0–1.0) এবং layout_constraintVertical_bias। মার্জিন স্ট্যান্ডার্ড android:layout_margin* দ্বারা নির্ধারিত হয়, কিন্তু কনস্ট্রেইন্ট এবং মার্জিন স্বাধীনভাবে কাজ করে: মার্জিন হলো কনস্ট্রেইন্ট থেকে সরণ, প্রতিবেশী ভিউ থেকে নয়।

শতাংশ পজিশনিং

ConstraintLayout 1.1+ থেকে, layout_constraintWidth_percent এবং layout_constraintHeight_percent-এর মাধ্যমে শতাংশ-ভিত্তিক আকারের সমর্থন যুক্ত হয়েছে। মান 0.3 মানে প্যারেন্টের প্রস্থ/উচ্চতার 30%। বায়াসের সাথে মিলিয়ে, এটি প্রোগ্রামিং ছাড়াই অভিযোজিত লেআউট তৈরি করতে দেয়।

চেইন এবং গাইডলাইন

চেইন (শৃঙ্খল) হলো দুই বা ততোধিক ভিউ-এর একটি গ্রুপ যা দ্বিমুখী কনস্ট্রেইন্ট (A, B-এর সাথে বাঁধা, B, A-এর সাথে বাঁধা) দ্বারা সংযুক্ত। চেইন মোড অনুসারে এলিমেন্টের মধ্যে স্বয়ংক্রিয়ভাবে স্থান বিতরণ করে: spread (সমানভাবে, মার্জিন সহ), spread_inside (সমানভাবে, বাইরের এলিমেন্ট প্রান্ত মার্জিন ছাড়া), packed (এলিমেন্ট সাধারণ বায়াস সহ একসাথে চাপা)। মোড app:layout_constraintHorizontal_chainStyle বা layout_constraintVertical_chainStyle অ্যাট্রিবিউটের মাধ্যমে নির্ধারিত হয়।

গাইডলাইন (দিকনির্দেশক) একটি সহায়ক ভিউ, যা রানটাইমে অদৃশ্য, যা বাঁধার জন্য একটি রেখা নির্ধারণ করে। গাইডলাইন অনুভূমিক বা উল্লম্ব হতে পারে, dp, শতাংশ (app:layout_constraintGuide_percent) বা প্রান্ত থেকে সরণ (app:layout_constraintGuide_begin/end) এ অবস্থিত। গাইডলাইন অভিযোজিত লেআউটের জন্য অপরিহার্য — উদাহরণস্বরূপ, ডিভাইস আকার নির্বিশেষে স্ক্রিনকে দুটি সমান ভাগে ভাগ করা।

Google I/O 2017 অনুসারে, spread_inside সহ চেইন ওজনযুক্ত নেস্টেড LinearLayout-এর তুলনায় 15–20% বেশি কার্যকরী, কারণ সেগুলি ওজন গণনার জন্য প্রয়োজনীয় দ্বৈত measure পাস এড়ায়।

ব্যারিয়ার, গ্রুপ এবং ভার্চুয়াল হেল্পার

ব্যারিয়ার (প্রতিবন্ধক) একটি ভার্চুয়াল ভিউ যা এলিমেন্টের গ্রুপের আকারের উপর ভিত্তি করে গতিশীলভাবে তার অবস্থান সামঞ্জস্য করে। নির্দিষ্ট অবস্থানের গাইডলাইনের বিপরীতে, ব্যারিয়ার গ্রুপের সবচেয়ে প্রশস্ত এলিমেন্ট দ্বারা "ঠেলে" হয়। উদাহরণস্বরূপ, যদি আপনার অজানা দৈর্ঘ্যের শিরোনাম এবং বিবরণ থাকে, তবে সবচেয়ে প্রশস্ত টেক্সটের ডান প্রান্তের সাথে বাঁধা ব্যারিয়ার আপনাকে তাদের ঠিক পরে একটি আইকন রাখার অনুমতি দেয়। অ্যাট্রিবিউট: app:barrierDirection (left, right, top, bottom, start, end) এবং app:constraint_referenced_ids (কমা দ্বারা পৃথক ids-এর তালিকা)।

Group একটি ভার্চুয়াল কন্টেইনার যা একসাথে একাধিক ভিউ-এর দৃশ্যমানতা পরিচালনা করে। প্রতিটি এলিমেন্টের জন্য আলাদাভাবে setVisibility কল করার পরিবর্তে, একটি Group-এর দৃশ্যমানতা পরিবর্তন করাই যথেষ্ট। Group পজিশনিংকে প্রভাবিত করে না — শুধুমাত্র দৃশ্যমানতাকে। Flow হলো "প্রবাহশীল" লেআউট তৈরি করার জন্য একটি ভার্চুয়াল হেল্পার: স্থান শেষ হলে এলিমেন্ট স্বয়ংক্রিয়ভাবে নতুন সারি/কলামে চলে যায়, যেমন প্যারাগ্রাফে টেক্সট। Flow wrapMode: none, chain এবং aligned সমর্থন করে।

এই টুলগুলি (Barrier, Group, Flow, Guideline) ভার্চুয়াল হেল্পার নামে পরিচিত কারণ এগুলি ক্লাসিক অর্থে ভিউ নয় — এগুলি হায়ারার্কিতে স্থান নেয় না এবং ফোকাস বা টাচ ইভেন্টে অংশ নেয় না। এগুলির উদ্দেশ্য নেস্টেড কন্টেইনার যোগ না করে জটিল লেআউটের রক্ষণাবেক্ষণ সরল করা।

উদাহরণ: XML এবং Kotlin

উদাহরণ 1: কনস্ট্রেইন্ট সহ মৌলিক ফর্ম

একটি ইমেল ফিল্ড, পাসওয়ার্ড ফিল্ড এবং একটি বাটন সহ একটি সাধারণ লগইন ফর্ম। বাটন ছাড়া সব এলিমেন্ট প্যারেন্টের সাথে বাঁধা — এটি পাসওয়ার্ড ফিল্ডের নিচে। ফ্ল্যাট হায়ারার্কি ব্যবহৃত হয়েছে — তিনটি এলিমেন্ট একই স্তরে।

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"
        android:layout_marginHorizontal="16dp" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/email_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginHorizontal="16dp" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/password_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginHorizontal="16dp"
        android:text="সাইন ইন করুন" />

</androidx.constraintlayout.widget.ConstraintLayout>

সকল এলিমেন্টের প্রস্থ 0dp (match_constraint), যার অর্থ এগুলি অনুভূমিক মার্জিন সহ start থেকে end কনস্ট্রেইন্ট পর্যন্ত বিস্তৃত হয়। এটি মার্জিন সহ match_parent-এর সমতুল্য, তবে নেস্টিং ছাড়া।

উদাহরণ 2: spread_inside সহ চেইন

তিনটি বাটন প্রান্ত মার্জিন সহ অনুভূমিকভাবে সমানভাবে বিতরণ করা। spread_inside চেইন বাইরের বাটনগুলিকে প্রান্তে এবং মাঝের বাটনটিকে তাদের মাঝখানে কেন্দ্রীভূত রাখে।

<Button
    android:id="@+id/btn_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_center"
    android:text="বাম" />

<Button
    android:id="@+id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_left"
    app:layout_constraintRight_toLeftOf="@+id/btn_right"
    android:text="কেন্দ্র" />

<Button
    android:id="@+id/btn_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_center"
    app:layout_constraintRight_toRightOf="parent"
    android:text="ডান" />

যখন এলিমেন্টের দ্বিমুখী কনস্ট্রেইন্ট থাকে তখন চেইন স্বয়ংক্রিয়ভাবে তৈরি হয়। spread_inside মোড app:layout_constraintHorizontal_chainStyle="spread_inside"-এর মাধ্যমে চেইনের যেকোনো এলিমেন্টে সেট করা হয়। এটি weightSum এবং layout_weight সহ LinearLayout-এর প্রয়োজনীয়তা দূর করে।

উদাহরণ 3: প্রতিসম লেআউটের জন্য গাইডলাইন

50% এ একটি উল্লম্ব গাইডলাইন ব্যবহার করে দুটি সমান কলাম তৈরি করা। বাম এলিমেন্ট বাম প্যারেন্টের সাথে এবং তার ডান প্রান্ত গাইডলাইনের সাথে বাঁধা; ডান এলিমেন্ট তার বাম প্রান্ত গাইডলাইনের সাথে এবং ডান প্যারেন্টের সাথে বাঁধা।

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gl_midpoint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:id="@+id/left_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/gl_midpoint"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

<TextView
    android:id="@+id/right_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/gl_midpoint"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

0.5 শতাংশ সহ একটি গাইডলাইন স্বয়ংক্রিয়ভাবে স্ক্রিন প্রস্থের সাথে খাপ খায়। ট্যাবলেট এবং ফোন উভয়েই, কলাম অনুপাত 50/50 থাকে। বাম/ডান নামকরণের জন্য, RTL সামঞ্জস্যের জন্য start/end অ্যাট্রিবিউট ব্যবহার করুন।

তুলনা: ConstraintLayout বনাম LinearLayout বনাম RelativeLayout

Android ডেভেলপমেন্টের জন্য তিনটি প্রধান ViewGroups-এর তুলনা সারণী: ConstraintLayout, LinearLayout এবং RelativeLayout। মানদণ্ড: নমনীয়তা, কর্মক্ষমতা, কোড জটিলতা এবং ব্যবহারের ক্ষেত্র।

Android Vitals (Google, 2025) অনুসারে, ConstraintLayout-কে প্রধান কন্টেইনার হিসেবে ব্যবহার করা অ্যাপ নেস্টেড LinearLayout ব্যবহার করা অ্যাপের তুলনায় জটিল স্ক্রিন রেন্ডার করার সময় গড়ে 18% কম jank ফ্রেম দেখায়। IT Sectr-এ, আমরা 2018 সালে সকল XML লেআউটের জন্য মান হিসাবে ConstraintLayout-এ স্যুইচ করেছি — এটি স্ক্রিন হায়ারার্কির গড় গভীরতা 4.2 থেকে 1.8 স্তরে কমিয়েছে এবং নতুন ফর্মের উন্নয়ন 25% দ্রুত করেছে।