ConstraintLayout — یہ کیا ہے، رکاوٹیں اور فلیٹ درجہ بندی

ConstraintLayout کیا ہے؟

ConstraintLayout AndroidX ConstraintLayout لائبریری کا ایک ViewGroup ہے، جو اعلانیہ رکاوٹوں کے ذریعے لچکدار اور کارکردہ انٹرفیس بنانے کے لیے ڈیزائن کیا گیا ہے۔ LinearLayout کے برعکس، جو عناصر کو ایک لائن میں ترتیب دیتا ہے، یا RelativeLayout، جو عناصر کو پڑوسیوں کے نسبت رکھتا ہے، ConstraintLayout ہر عنصر کو کسی بھی دوسرے عنصر اور والد کے نسبت ایک ساتھ اینکر کرنے کی اجازت دیتا ہے۔

اس لائبریری کا اعلان Google I/O 2016 میں پیچیدہ اسکرینوں کی رینڈرنگ کو تیز کرنے کے حل کے طور پر کیا گیا تھا۔ ConstraintLayout جس اہم مسئلے کو حل کرتا ہے وہ لے آؤٹ نیسٹنگ ہے۔ ہر نیسٹڈ ViewGroup کم از کم دو measure پاس اور ایک layout پاس کا اضافہ کرتا ہے۔ 4 نیسٹنگ سطحوں والی اسکرین 8 measure پاس کرتی ہے؛ اسی فعالیت کے ساتھ ConstraintLayout صرف 2 پاس کرتا ہے۔ 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 ہیپ میں ایک آبجیکٹ ہے)، تیز layout پاس (کم تکراری کالز)، اور اسکرین کے سائز تبدیل ہونے پر زیادہ پیش قیاسی رویہ۔

رکاوٹوں کا نظام: بائنڈنگ، بایس اور مارجن

رکاوٹ (constraint) ایک ویو کے کنارے (یا اس کے مرکز) اور دوسرے ویو یا والد کے کنارے کے درمیان ایک تعلق ہے۔ ہر ویو میں 8 تک رکاوٹیں ہو سکتی ہیں: 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 والی زنجیریں وزن والی نیسٹڈ LinearLayouts سے 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% تیزی آئی۔