لی آؤٹ ایڈیٹر: یہ کیا ہے، Android Studio اور لے آؤٹ بنانا

Layout Editor کیا ہے؟

Layout Editor — Android Studio میں شامل ایک ٹول ہے جو Android ایپلیکیشنز کے یوزر انٹرفیس کو بصری طور پر ڈیزائن کرنے کے لیے استعمال ہوتا ہے۔ یہ res/layout/ فولڈر میں XML فائل پر ڈبل کلک کرنے پر کھلتا ہے اور Code، Design اور Split ٹیبز کے درمیان سوئچنگ کے لیے نیچے والی پینل کے ذریعے قابل رسائی ہے۔ ڈویلپر کمپوننٹس کو پیلیٹ سے کینوس پر گھسیٹ سکتا ہے، ان کی خصوصیات سیٹ کر سکتا ہے اور تبدیلیوں کو ریئل ٹائم میں دیکھ سکتا ہے۔

یہ ٹول دو طریقوں کو سپورٹ کرتا ہے: Design (ویجٹس کی حقیقی نمائش کے ساتھ بصری کینوس) اور Blueprint (کنسٹرینٹس اور بارڈرز کے ساتھ خاکہ نما پیشکش)۔ Split موڈ XML کوڈ اور بصری کینوس کو بیک وقت دکھاتا ہے۔ ان کے درمیان سوئچنگ ایڈیٹر کے اوپری بائیں کونے میں موجود بٹنوں سے کی جاتی ہے۔

Layout Editor صارف کے ہر عمل کے لیے خودکار طور پر XML کوڈ جنریٹ کرتا ہے: عنصر کا اضافہ، مارجن سیٹ کرنا، کنسٹرینٹ بنانا۔ یہ ڈویلپر کو درجنوں XML ایٹریبیوٹس یاد رکھنے کی ضرورت سے بچاتا ہے اور بصری نتیجہ پر توجہ دینے دیتا ہے۔ جنریٹ کردہ کوڈ کو Code ٹیب میں دستی طور پر بھی ایڈٹ کیا جا سکتا ہے۔

Layout Editor کے اہم زونز

Layout Editor کا انٹرفیس چار زونز میں تقسیم ہے: Palette (کمپوننٹس کا پیلیٹ)، Component Tree (کمپوننٹس کا درخت)، Design Surface (ڈیزائن کے لیے کینوس) اور Properties Panel (خصوصیات کی پینل)۔ Palette میں Android SDK کے تمام دستیاب ویجٹس زمروں میں گروپ کیے گئے ہیں: Widgets, Text, Buttons, Containers اور دیگر۔ Component Tree لے آؤٹ کی درجہ بندی کو درخت کی شکل میں دکھاتا ہے، جس سے عناصر کو کنٹینرز کے درمیان گھسیٹا جا سکتا ہے۔

Design Surface — ایڈیٹر کا مرکزی حصہ جہاں لے آؤٹ دکھایا جاتا ہے۔ کینوس پر عناصر کو منتخب کیا جا سکتا ہے، منتقل کیا جا سکتا ہے، سائز تبدیل کیا جا سکتا ہے اور کنسٹرینٹس بنائے جا سکتے ہیں۔ کینوس کے نیچے والے حصے میں ڈیوائسز اور اورینٹیشن کا سوئچر ہے جو مختلف اسکرینوں پر لے آؤٹ کا پیش منظر دکھاتا ہے۔ Layout Editor متعدد ورچوئل ڈیوائسز Nexus, Pixel اور Samsung پر پیش منظر سپورٹ کرتا ہے۔

Properties Panel منتخب کردہ عنصر کے ایٹریبیوٹس دکھاتی ہے: layout_width, layout_height, مارجن, پیڈنگ, گریویٹی اور TextView کے لیے textSize جیسے تمام مخصوص ایٹریبیوٹس۔ Properties Panel میں ہر تبدیلی فوری طور پر کینوس پر ظاہر ہوتی ہے اور متعلقہ XML کوڈ جنریٹ کرتی ہے۔

ایڈیٹر کے اوپری بائیں کونے میں کنٹرول بٹنز ہیں: ڈسپلے موڈ کا انتخاب، آٹو کنیکٹ (Autoconnect) کو آن کرنا، کنسٹرینٹس کو لائنوں کی شکل میں دکھانا اور ورچوئل ڈیوائسز کے درمیان سوئچنگ۔ «Device for Preview» بٹن آپ کو اسمارٹ فون، ٹیبلٹ یا Android TV کا ماڈل منتخب کرنے دیتا ہے تاکہ ایڈاپٹیویٹی چیک کی جا سکے۔

ConstraintLayout: لچکدار پوزیشننگ

ConstraintLayout — بنیادی لے آؤٹ ہے جسے Google تمام نئے Android پروجیکٹس کے لیے تجویز کرتا ہے۔ Nestead LinearLayout کے برعکس، ConstraintLayout ایک فلیٹ درجہ بندی بناتا ہے جہاں ہر عنصر پیرنٹ، دوسرے عناصر یا گائیڈ لائنز (guidelines) سے منسلک ہوتا ہے۔ یہ nesting کی گہرائی کو کم کرتا ہے اور رینڈرنگ کی کارکردگی بڑھاتا ہے۔

ConstraintLayout میں ہر عنصر کے سائیڈ کنسٹرینٹس ہوتے ہیں: app:layout_constraintStart_toStartOf, app:layout_constraintEnd_toEndOf, app:layout_constraintTop_toTopOf, app:layout_constraintBottom_toBottomOf۔ کنسٹرینٹس پیرنٹ (parent) یا کسی دوسرے عنصر کے ID سے منسلک ہو سکتے ہیں۔ بنیادی XML ٹیمپلیٹ یوں ہے:

اس مثال میں TextView پیرنٹ کے چاروں اطراف میں سینٹر ہے۔ سائز 0dp (match_constraint) کا مطلب ہے کہ چوڑائی بائیں سے دائیں کنسٹرینٹ تک پھیلتی ہے۔ یہ نقطہ نظر فکسڈ سائز کے بغیر ایڈاپٹیو لے آؤٹس بنانے کی اجازت دیتا ہے۔

ConstraintLayout Bias کو بھی سپورٹ کرتا ہے — عنصر کے مرکز کی شفٹ۔ ایٹریبیوٹس layout_constraintHorizontal_bias اور layout_constraintVertical_bias 0 سے 1 تک کی قدریں لیتے ہیں، جہاں 0.5 مرکز ہے، 0 شروع کی طرف دھکیلنا ہے اور 1 آخر کی طرف۔ Bias دو کنسٹرینٹس کے درمیان عنصر کو درست طریقے سے پوزیشن کرنے دیتا ہے۔

ConstraintLayout کی اضافی صلاحیتیں: Guidelines (فیصد یا dp میں گائیڈ لائنز)، Barriers (رکاوٹیں جو کئی عناصر کو یکجا کرتی ہیں) اور Chains (عناصر کی زنجیریں جگہ کی تقسیم کے ساتھ)۔ یہ تمام عناصر براہ راست Layout Editor میں کینوس پر سیاق و سباق کے مینو کے ذریعے بنائے جاتے ہیں۔

LinearLayout: لکیری ترتیب

LinearLayout — ایک کنٹینر جو بچوں کے عناصر کو ترتیب وار افقی (android:orientation="horizontal") یا عمودی (android:orientation="vertical") طور پر رکھتا ہے۔ یہ سمجھنے کے لیے سب سے آسان لے آؤٹ ہے، لیکن پیچیدہ لے آؤٹس میں nesting درجہ بندی بناتا ہے جو کارکردگی کو کم کر سکتی ہے۔

LinearLayout کا اہم ایٹریبیوٹ — weight (android:layout_weight) ہے۔ یہ خالی جگہ کو عناصر کے درمیان متعین قدروں کے تناسب سے تقسیم کرنے دیتا ہے۔ اگر دو بٹنوں کو weight="1" دیا جائے تو وہ برابر چوڑائی لیں گے۔ weight="2" والے عنصر کو weight="1" سے دوگنا زیادہ جگہ ملے گی۔ LinearLayout کے ساتھ XML کی مثال:

اس مثال میں EditText کو layout_weight="1" ملتا ہے اور یہ labelName اور btnSubmit کے درمیان تمام خالی جگہ لیتا ہے۔ layout_width="0dp" بتاتا ہے کہ EditText کی چوڑائی مکمل طور پر weight سے متعین ہوتی ہے۔ weight کے بغیر فکسڈ چوڑائی دینی پڑتی جو مختلف اسکرینوں کے مطابق نہیں ہوتی۔

LinearLayout کی اہم خصوصیات: android:gravity کنٹینر کے اندر موجود مواد کی الائنمنٹ کنٹرول کرتا ہے، جبکہ android:layout_gravity خود کنٹینر کی پیرنٹ کے اندر الائنمنٹ کنٹرول کرتا ہے۔ Nestead LinearLayout والے LinearLayout گہری nesting کی عام وجہ ہیں، اس لیے Google ان ڈھانچوں کو ConstraintLayout سے تبدیل کرنے کی تجویز کرتا ہے۔

XML کوڈ: لے آؤٹ کی ساخت اندر سے

ہر Android لے آؤٹ res/layout/ فولڈر میں ایک XML فائل ہے۔ Layout Editor یہ فائل خودکار طور پر جنریٹ کرتا ہے، لیکن اس کی ساخت کو سمجھنا دستی اصلاح کے لیے ضروری ہے۔ روٹ عنصر کنٹینر کی قسم متعین کرتا ہے (ConstraintLayout, LinearLayout, FrameLayout)، جس کے اندر بچوں کے ویجٹس رکھے جاتے ہیں۔

ConstraintLayout کے ساتھ بنیادی XML ٹیمپلیٹ میں xmlns:android اور xmlns:app نیم اسپیس کا اعلان ہوتا ہے۔ app نیم اسپیس ConstraintLayout لائبریری کے ایٹریبیوٹس جیسے layout_constraintStart_toStartOf کے لیے استعمال ہوتی ہے۔ ہر عنصر کے لیے android:id دینے کی سفارش کی جاتی ہے تاکہ دوسرے عناصر اور Activity یا Fragment کے کوڈ سے حوالہ دیا جا سکے۔

متعدد عناصر اور کنسٹرینٹس کے ساتھ لے آؤٹ کے ٹکڑے کی مثال:

اس لے آؤٹ میں ImageView پیرنٹ کے اوپر سے منسلک ہے اور افقی طور پر سینٹر ہے۔ TextView ImageView کی نچلی بارڈر (Top_toBottomOf) سے منسلک ہے۔ Button TextView کے نیچے رکھی گئی ہے۔ کنسٹرینٹس کی یہ زنجیر Nestead LinearLayout کے بغیر ایک ترتیب وار ڈھانچہ بناتی ہے۔

Layout Editor Design / Code / Split ٹیبز کے ذریعے بصری اور متنی نمائش کے درمیان سوئچنگ کی اجازت دیتا ہے۔ Split موڈ میں XML میں تبدیلیاں فوری طور پر کینوس پر ظاہر ہوتی ہیں اور اس کے برعکس۔ یہ خاص طور پر ان ایٹریبیوٹس کی باریک ٹیوننگ کے لیے آسان ہے جن کا کینوس پر بصری کنٹرول نہیں ہے۔

کمپوننٹس کا پیلیٹ اور Properties Panel

Palette (پیلیٹ) — Layout Editor کا بائیں پینل ہے جس میں تمام دستیاب UI کمپوننٹس ہیں: TextView, Button, ImageView, EditText, ProgressBar, RecyclerView اور دیگر۔ کمپوننٹس زمروں میں گروپ کیے گئے ہیں: Widgets, Text, Buttons, Containers, Transitions, Advanced۔ کمپوننٹ کو کینوس پر شامل کرنے کے لیے اسے پیلیٹ سے Design Surface پر گھسیٹنا کافی ہے۔

Properties Panel (دایاں پینل) منتخب کردہ عنصر کے تمام ایٹریبیوٹس دکھاتا ہے۔ یہ پینل سیکشنز میں تقسیم ہے: Id (شناخت کنندہ), Layout (سائز اور مارجن), Transform (گردش اور اسکیل), Text (TextView کا مواد), Padding and Margin۔ ہر ایٹریبیوٹ کے لیے ایک ڈراپ ڈاؤن مینو دستیاب ہے جس میں آپشنز ہیں: wrap_content, match_parent, match_constraint (0dp)۔

Properties Panel کی خصوصیت — مارجن اور پیڈنگ کا بصری ایڈیٹر گرافک نمائش کے ساتھ۔ متعلقہ تیر کے پاس نمبر پر کلک کرکے سلائیڈر کے ذریعے مارجن تبدیل کیا جا سکتا ہے۔ Layout Editor خودکار طور پر مارجن کو نارملائز کرتا ہے: اگر چاروں مارجن برابر ہوں تو android:layout_margin استعمال ہوتا ہے، ورنہ انفرادی android:layout_marginStart، android:layout_marginTop وغیرہ۔

Properties Panel میں Constraint ایٹریبیوٹس کی ایڈیٹنگ کے لیے ایک خاص Constraints سیکشن ہے۔ یہاں عنصر کے تمام منسلکات دکھائے جاتے ہیں: کہ ہر کنارہ پیرنٹ یا دوسرے عنصر کے کس سائیڈ سے منسلک ہے۔ منسلک کی قسم تبدیل کی جا سکتی ہے، کنسٹرینٹ شامل یا ہٹایا جا سکتا ہے۔ کنسٹرینٹ کو Blueprint موڈ میں کینوس پر متعلقہ لائن پر کلک کرکے بھی ہٹایا جا سکتا ہے۔

ایڈاپٹیو لے آؤٹس بنانا

ایڈاپٹیو لے آؤٹ وہ لے آؤٹ ہے جو مختلف اسکرین سائزز پر صحیح طور پر ظاہر ہوتا ہے: کمپیکٹ فونز (320dp) سے لے کر بڑے ٹیبلٹس (600dp+) اور فولڈ ایبل ڈیوائسز تک۔ Layout Editor ایڈاپٹیو انٹرفیس چیک کرنے اور بنانے کے لیے کئی ٹولز فراہم کرتا ہے۔

پہلا ٹول — ٹول بار میں Device for Preview ہے۔ ڈراپ ڈاؤن فہرست میں مشہور ڈیوائسز شامل ہیں: Pixel 6, Pixel 9, Samsung Galaxy S25, Nexus 7, Nexus 9, Pixel C اور دیگر۔ آپ صوابدیدی اسکرین سائز اور پکسل ڈینسٹی (dpi) کے ساتھ کسٹم ڈیوائس بھی شامل کر سکتے ہیں۔ ڈیوائسز کے درمیان سوئچنگ ایک سیکنڈ لیتی ہے اور دکھاتی ہے کہ لے آؤٹ ہر اسکرین پر کیسا نظر آتا ہے۔

دوسرا ٹول — متبادل لے آؤٹس بنانے کے لیے سائز کوالیفائرز (qualifiers) ہیں۔ Layout Editor میں ایک ہی XML فائل کے مختلف اسکرین سائزز، اورینٹیشن یا ڈینسٹی کے لیے کئی ورژن بنائے جا سکتے ہیں۔ مثال کے طور پر، فون کے لیے activity_main.xml اور ٹیبلٹ کے لیے activity_main-sw600dp.xml۔ Layout Editor خودکار طور پر فعال کوالیفائر کے لیے پیش منظر دکھاتا ہے۔

تیسرا طریقہ — فیصد میں Guidelines کے ساتھ ConstraintLayout ہے۔ app:layout_constraintGuide_percent ایٹریبیوٹ والی گائیڈ لائنز عناصر کو فیصدی پوزیشنز سے منسلک کرنے دیتی ہیں۔ مثال کے طور پر، 50% پر گائیڈ لائن ڈیوائس کے سائز سے قطع نظر اسکرین کو آدھا تقسیم کرتی ہے۔ یہ XML فائلوں کے ڈپلیکیشن کے بغیر ایڈاپٹیو لے آؤٹس بنانے کا سب سے لچکدار طریقہ ہے۔

Layout Editor ایڈاپٹیویٹی کے مسائل کے بارے میں وارننگز بھی دکھاتا ہے: فکسڈ چوڑائی والے عناصر، بہت بڑی تصاویر یا غیر optimal nesting پر پیلے مثلث۔ ڈویلپر وارننگ پر کلک کرکے اصلاح کی سفارش حاصل کر سکتا ہے۔

XML لے آؤٹس کی اصلاح

لے آؤٹ کی اصلاح براہ راست رینڈرنگ کی رفتار اور ایپلیکیشن کے ہموار کام کو متاثر کرتی ہے۔ Layout Editor بلٹ ان Layout Inspector اور Problems پینل میں وارننگز کے ذریعے مسائل دریافت کرنے میں مدد کرتا ہے۔ اصلاح کے بنیادی اصول: nesting کو کم سے کم کرنا، Nestead LinearLayout کی بجائے ConstraintLayout استعمال کرنا، سائز کے ایٹریبیوٹس کا درست انتخاب۔

Nesting کی گہرائی — کارکردگی کا سب سے بڑا دشمن۔ ہر Nestead کنٹینر پیمائش اور ڈرائنگ کا وقت بڑھاتا ہے۔ Android Studio میں Hierarchy View ٹول لے آؤٹ کا درخت دکھاتا ہے۔ اگر گہرائی 5-6 لیولز سے زیادہ ہو تو لے آؤٹ کو دوبارہ ڈھانچہ دینا چاہیے۔ ConstraintLayout اس مسئلے کو 3-4 لیولز کی nesting کو ایک فلیٹ کنٹینر سے بدل کر حل کرتا ہے۔

Layout Editor میں XML لے آؤٹس کی اصلاح کے لیے سفارشات:

• ConstraintLayout کو روٹ کنٹینر کے طور پر استعمال کریں Nestead LinearLayout کی بجائے — اس سے درجہ بندی کی گہرائی کم ہوتی ہے اور رینڈرنگ تیز ہوتی ہے
• بڑی فہرستوں میں LinearLayout کے layout_weight سے بچیں — weight کے لیے دوہرے پیمائش کے پاس (two-pass layout) کی ضرورت ہے
• غیر استعمال شدہ کنسٹرینٹس کو ہٹائیں Layout Editor میں Clear Constraints of Selection کے سیاق و سباق کے مینو کے ذریعے
• کم دکھائے جانے والے بلاکس کے لیے ViewStub استعمال کریں — ViewStub انفلیٹ کو ظاہر ہونے تک موخر کرتا ہے
• Reusable کمپوننٹس کے لیے Merge — merge ٹیگ include کے ذریعے شامل کرتے وقت اضافی کنٹینر کو ختم کرتا ہے
• تصاویر کا سائز کم کریں اور آئیکنز کے لیے PNG کی بجائے VectorDrawable استعمال کریں

Layout Inspector — Android Studio کا ایک ٹول ہے جو ایپلیکیشن کے رن ٹائم کے دوران لے آؤٹس کی پروفائلنگ کرتا ہے۔ یہ حقیقی درجہ بندی، ہر کمپوننٹ کی پیمائش اور ڈرائنگ کا وقت دکھاتا ہے۔ Layout Inspector Layout Editor کے ساتھ مربوط ہے: وارننگ پر ڈبل کلک تفصیلی رپورٹ میں متعلقہ مسئلہ کھولتا ہے۔