Layout Editor: ما هو، Android Studio وإنشاء التخطيطات

ما هو Layout Editor؟

Layout Editor هو أداة مدمجة في Android Studio لتصميم واجهات المستخدم لتطبيقات Android بصريًا. يتم فتحه عند النقر المزدوج على ملف تخطيط XML في مجلد res/layout/ ويكون متاحًا من خلال اللوحة السفلية للتبديل بين علامات التبويب 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 هيكل التخطيط كشجرة، مما يسمح بسحب العناصر بين الحاويات.

سطح التصميم هو الجزء المركزي من المحرر حيث يتم عرض التخطيط. على اللوحة القماشية، يمكنك تحديد العناصر وتحريكها وتغيير حجمها وإنشاء القيود. في الجزء السفلي من اللوحة القماشية، يوجد مفتاح الأجهزة والاتجاه لمعاينة التخطيط على شاشات مختلفة. يدعم Layout Editor المعاينة على مجموعة متنوعة من الأجهزة الافتراضية: Nexus و Pixel و Samsung.

لوحة الخصائص تعرض سمات العنصر المحدد: layout_width، layout_height، الهوامش، الحشوة، الجاذبية وجميع السمات المحددة مثل textSize لـ TextView. ينعكس كل تغيير في لوحة الخصائص فورًا على اللوحة القماشية ويُولد كود XML المقابل.

في الزاوية اليسرى العلوية من المحرر توجد أزرار التحكم: اختيار وضع العرض، تمكين الاتصال التلقائي للقيود (Autoconnect)، عرض القيود كخطوط والتبديل بين الأجهزة الافتراضية. يسمح زر "جهاز للمعاينة" باختيار نموذج هاتف ذكي أو جهاز لوحي أو Android TV للتحقق من الاستجابة.

ConstraintLayout: تحديد الموضع المرن

ConstraintLayout هو التخطيط الأساسي الموصى به من Google لجميع مشاريع Android الجديدة. على عكس LinearLayout المتداخلة، ينشئ ConstraintLayout هيكلًا مسطحًا حيث يرتبط كل عنصر بالأصل أو بعناصر أخرى أو بخطوط إرشادية. يقلل هذا من عمق التداخل ويحسن أداء العرض.

كل عنصر في ConstraintLayout لديه قيود جانبية: app:layout_constraintStart_toStartOf، app:layout_constraintEnd_toEndOf، app:layout_constraintTop_toTopOf، app:layout_constraintBottom_toBottomOf. يمكن ربط القيود بالأصل (parent) أو بمعرف عنصر آخر. يبدو قالب XML الأساسي كالتالي:

في هذا المثال، TextView متمركز من جميع الجوانب الأربعة للأصل. الحجم 0dp (match_constraint) يعني أن العرض يتمدد من القيد الأيسر إلى الأيمن. يتيح هذا الأسلوب إنشاء تخطيطات متجاوبة بدون أحجام ثابتة.

يدعم ConstraintLayout أيضًا الانحياز — إزاحة مركز العنصر. تأخذ السمات layout_constraintHorizontal_bias و layout_constraintVertical_bias قيمًا من 0 إلى 1، حيث 0.5 هو المركز، 0 هو الالتصاق بالبداية، 1 هو الالتصاق بالنهاية. يسمح الانحياز بتحديد موضع العنصر بدقة بين قيدين.

ميزات إضافية لـ ConstraintLayout: الخطوط الإرشادية (خطوط إرشادية بالنسب المئوية أو dp)، الحواجز (حواجز تجمع عناصر متعددة) و السلاسل (سلاسل من العناصر مع توزيع المساحة). يتم إنشاء كل هذه العناصر مباشرة في Layout Editor من خلال قائمة السياق على اللوحة القماشية.

LinearLayout: الترتيب الخطي

LinearLayout هي حاوية ترتب العناصر الفرعية بالتسلسل أفقيًا (android:orientation="horizontal") أو رأسيًا (android:orientation="vertical"). إنها أبسط تخطيط للفهم، لكنها تنشئ هيكلًا متداخلًا مع التخطيطات المعقدة، مما قد يقلل الأداء.

السمة الرئيسية لـ LinearLayout هي الوزن (android:layout_weight). تسمح بتوزيع المساحة الحرة بين العناصر بشكل متناسب وفقًا للقيم المحددة. إذا قمت بتعيين weight="1" لزرين، فسيأخذان عرضًا متساويًا. العنصر ذو weight="2" سيحصل على ضعف مساحة العنصر ذي weight="1". مثال XML مع LinearLayout:

في هذا المثال، EditText يحصل على layout_weight="1" ويأخذ كل المساحة الحرة بين labelName و btnSubmit. layout_width="0dp" يشير إلى أن عرض EditText محدد بالكامل بالوزن. بدون الوزن، سيكون عليك تعيين عرض ثابت، وهو لا يتكيف مع الشاشات المختلفة.

ميزات مهمة لـ LinearLayout: android:gravity تتحكم في محاذاة المحتوى داخل الحاوية، و android:layout_gravity تتحكم في محاذاة الحاوية نفسها داخل الأصل. LinearLayout مع LinearLayout متداخلة هو سبب شائع للتداخل العميق، لذلك توصي Google باستبدال هذه الإنشاءات بـ ConstraintLayout.

كود XML: هيكل التخطيط من الداخل

كل تخطيط Android هو ملف XML في مجلد res/layout/. يُنشئ Layout Editor هذا الملف تلقائيًا، لكن فهم هيكله ضروري للتحسين اليدوي. يحدد العنصر الجذر نوع الحاوية (ConstraintLayout، LinearLayout، FrameLayout)، والتي توضع بداخلها الأدوات الفرعية.

قالب XML أساسي مع ConstraintLayout يتضمن إعلانات مساحات الأسماء xmlns:android و xmlns:app. تُستخدم مساحة الاسم app لسمات مكتبة ConstraintLayout، مثل layout_constraintStart_toStartOf. يوصى بإعطاء كل عنصر android:id للإشارات من العناصر الأخرى ومن كود Activity أو Fragment.

مثال على جزء تخطيط مع عدة عناصر وقيود:

في هذا التخطيط، ImageView مرتبط بأعلى الأصل ومتمركز أفقيًا. TextView مرتبط بالحافة السفلية لـ ImageView (Top_toBottomOf). Button موضوع أسفل TextView. تنشئ سلسلة القيود هذه هيكلًا تسلسليًا بدون LinearLayout متداخلة.

يسمح Layout Editor بالتبديل بين التمثيل المرئي والنصي من خلال علامات التبويب Design / Code / Split. في وضع Split، تنعكس التغييرات في XML فورًا على اللوحة القماشية والعكس صحيح. هذا مناسب بشكل خاص للضبط الدقيق للسمات التي لا تحتوي على عناصر تحكم مرئية على اللوحة القماشية.

لوحة المكونات ولوحة الخصائص

Palette هي اللوحة اليسرى من Layout Editor التي تحتوي على جميع مكونات واجهة المستخدم المتاحة: TextView، Button، ImageView، EditText، ProgressBar، RecyclerView وغيرها. يتم تجميع المكونات حسب الفئات: Widgets، Text، Buttons، Containers، Transitions، Advanced. لإضافة مكون إلى اللوحة القماشية، ما عليك سوى سحبه من اللوحة إلى سطح التصميم.

لوحة الخصائص (اللوحة اليمنى) تعرض جميع سمات العنصر المحدد. تنقسم اللوحة إلى أقسام: Id (المعرف)، Layout (الأحجام والهوامش)، Transform (التدوير والقياس)، Text (محتوى TextView)، Padding and Margin. لكل سمة، تتوفر قائمة منسدلة مع خيارات: wrap_content، match_parent، match_constraint (0dp).

ميزة لوحة الخصائص هي محرر الهوامش المرئي (الحشوة والهامش) مع عرض رسومي. بالنقر على الرقم بجانب السهم المقابل، يمكنك تغيير الهامش باستخدام شريط التمرير. يقوم Layout Editor بتطبيع الهوامش تلقائيًا: إذا كانت الهوامش الأربعة متماثلة، يتم استخدام السمة android:layout_margin، وإلا يتم استخدام android:layout_marginStart و android:layout_marginTop الفردية وهكذا.

لتحرير سمات القيد في لوحة الخصائص، يوجد قسم خاص للقيود. يعرض جميع ارتباطات العنصر: بأي جانب من الأصل أو عنصر آخر يرتبط كل حافة. يمكنك تغيير نوع الارتباط أو إضافة أو إزالة قيد. يمكنك أيضًا إزالة قيد بالنقر على الخط المقابل على اللوحة القماشية في وضع Blueprint.

إنشاء تخطيطات متجاوبة

التخطيط المتجاوب هو تخطيط يعرض بشكل صحيح على أحجام شاشات مختلفة: من الهواتف الصغيرة (320dp) إلى الأجهزة اللوحية الكبيرة (600dp+) والأجهزة القابلة للطي. يوفر Layout Editor عدة أدوات للتحقق من الواجهات المتجاوبة وإنشائها.

الأداة الأولى هي جهاز للمعاينة في شريط الأدوات. تحتوي القائمة المنسدلة على أجهزة شائعة: Pixel 6، Pixel 9، Samsung Galaxy S25، Nexus 7، Nexus 9، Pixel C وغيرها. يمكنك إضافة جهاز مخصص بأحجام شاشة وكثافة بكسلات (dpi) عشوائية. يستغرق التبديل بين الأجهزة ثانية واحدة ويظهر كيف يبدو التخطيط على كل شاشة.

الأداة الثانية هي مؤهلات الحجم لإنشاء تخطيطات بديلة. في Layout Editor، يمكنك إنشاء إصدارات متعددة لنفس ملف XML لأحجام شاشات أو اتجاهات أو كثافات مختلفة. على سبيل المثال، ملف activity_main.xml للهاتف و activity_main-sw600dp.xml للجهاز اللوحي. يعرض Layout Editor تلقائيًا معاينة للمؤهل النشط.

النهج الثالث هو ConstraintLayout مع خطوط إرشادية بنسب مئوية. تسمح الخطوط الإرشادية مع السمة app:layout_constraintGuide_percent بربط العناصر بمواضع نسبية. على سبيل المثال، خط إرشادي عند 50% يقسم الشاشة إلى نصفين بغض النظر عن حجم الجهاز. هذه هي الطريقة الأكثر مرونة لإنشاء تخطيطات متجاوبة بدون تكرار ملفات XML.

يعرض Layout Editor أيضًا تحذيرات حول مشكلات الاستجابة: مثلثات صفراء على العناصر ذات العرض الثابت، أو الصور الكبيرة جدًا أو التداخل غير الأمثل. يمكن للمطور النقر على التحذير والحصول على توصية للإصلاح.

تحسين تخطيطات XML

يؤثر تحسين التخطيطات مباشرة على سرعة العرض وسلاسة التطبيق. يساعد Layout Editor في اكتشاف المشكلات من خلال مفتش التخطيط المدمج والتحذيرات في لوحة المشكلات. قواعد التحسين الرئيسية: تقليل التداخل، استخدام ConstraintLayout بدلاً من LinearLayout المتداخلة، اختيار سمات الحجم الصحيحة.

عمق التداخل هو العدو الرئيسي للأداء. كل حاوية متداخلة تزيد من وقت القياس والرسم. تُظهر أداة عرض الهرم في Android Studio شجرة التخطيط. إذا تجاوز العمق 5–6 مستويات، يجب إعادة هيكلة التخطيط. يحل ConstraintLayout هذه المشكلة عن طريق استبدال 3–4 مستويات من التداخل بحاوية مسطحة واحدة.

توصيات لتحسين تخطيطات XML في Layout Editor:

• استخدم ConstraintLayout كحاوية جذر بدلاً من LinearLayout المتداخلة — يقلل من عمق الهرم ويسرع العرض
• تجنب layout_weight في LinearLayout للقوائم الكبيرة — الوزن يتطلب قياسًا ثنائي المسار (تخطيط ثنائي المسار)
• أزل القيود غير المستخدمة من خلال قائمة السياق Clear Constraints of Selection في Layout Editor
• استخدم ViewStub للكتل التي نادرًا ما تظهر — يؤخر ViewStub التضخيم حتى لحظة الظهور
• Merge للمكونات القابلة لإعادة الاستخدام — علامة merge تزيل الحاوية الإضافية عند التضمين عبر include
• قلل حجم الصور واستخدم VectorDrawable بدلاً من PNG للأيقونات

مفتش التخطيط هو أداة Android Studio لتحليل أداء التخطيطات أثناء تشغيل التطبيق. يُظهر الهرم الحقيقي ووقت القياس والرسم لكل مكون. Layout Editor متكامل مع مفتش التخطيط: النقر المزدوج على تحذير يفتح المشكلة المقابلة في تقرير مفصل.