استخدام المُخطّط المُطلق باستخدام رماز XAML في تطبيقات Xamarin

يُعدّ إطار العمل Xamarin واحدًا من أبرز الحلول البرمجية التي وفّرتها شركة Microsoft لتطوير تطبيقات الهاتف المحمول باستخدام لغة C# وبيئة .NET، مما يتيح للمطورين بناء تطبيقات أصلية لأنظمة iOS وAndroid وWindows من قاعدة شفرة واحدة. من بين الركائز الأساسية التي يعتمد عليها Xamarin.Forms في تصميم واجهات المستخدم هو نظام التخطيطات (Layouts)، حيث يُستخدم XAML (eXtensible Application Markup Language) كلغة توصيفية لتعريف واجهات الاستخدام. ومن بين أنواع التخطيطات التي يوفرها هذا النظام نجد “المخطّط المُطلق” (AbsoluteLayout)، الذي يوفّر أعلى درجات التحكم في موضع وحجم العناصر داخل واجهة المستخدم.

في هذا المقال الموسع، سنستعرض بتفصيل عميق كيف يعمل المُخطّط المُطلق، مزاياه وعيوبه، كيفية استخدامه باستخدام XAML، الحالات التي يُفضّل فيها اللجوء إليه، مقارنة مع أنواع التخطيطات الأخرى، وأفضل الممارسات المتعلقة باستخدامه داخل تطبيقات Xamarin.Forms.

ما هو المخطط المطلق (AbsoluteLayout) في Xamarin؟

المخطط المطلق هو نوع من أنواع التخطيطات التي تتيح للمطور تحديد الموضع الدقيق لكل عنصر داخل الواجهة، سواء باستخدام إحداثيات نسبية أو مطلقة. بخلاف التخطيطات الأخرى مثل StackLayout أو Grid، فإن AbsoluteLayout لا يقوم بإعادة ترتيب العناصر أو تغيير حجمها تلقائيًا بناءً على حجم الشاشة أو الجهاز. بل يُطلب من المطور تحديد المواقع والأحجام بشكل صريح.

هذا النوع من التخطيط يُستخدم عندما يكون هناك حاجة إلى وضع دقيق للعنصر ضمن مساحة العرض، مثل بناء ألعاب، تطبيقات تعتمد على السحب والإفلات، أو واجهات تتطلب تحكماً تاماً بتوزيع العناصر البصرية.

البنية العامة لاستخدام AbsoluteLayout باستخدام XAML

في Xamarin.Forms، يمكن استخدام AbsoluteLayout ضمن ملف XAML كما يلي:

xml
CopyEdit
<AbsoluteLayout>
    <BoxView Color="Red"
             AbsoluteLayout.LayoutBounds="0.1, 0.1, 100, 100"
             AbsoluteLayout.LayoutFlags="None" />
AbsoluteLayout>

في المثال أعلاه:

• الخاصية LayoutBounds تُحدّد موضع وحجم العنصر.

• الخاصية LayoutFlags تُحدّد كيفية تفسير القيم المستخدمة.

شرح مفصل للخصائص الرئيسية

1. LayoutBounds

هي خاصية من نوع Rectangle تتكون من أربعة قيم:

• X: الموضع الأفقي للعنصر.

• Y: الموضع العمودي للعنصر.

• Width: العرض.

• Height: الارتفاع.

هذه القيم يمكن أن تكون إما نسبية (بين 0 و1) أو مطلقة (مثل 100، 200) وذلك حسب قيمة الخاصية LayoutFlags.

2. LayoutFlags

هي خاصية تحدد كيفية تفسير القيم داخل LayoutBounds. تتضمن القيم التالية:

مثال تطبيقي باستخدام القيم النسبية:

xml
CopyEdit
<AbsoluteLayout>
    <Label Text="مرحبًا"
           AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.3, 0.1"
           AbsoluteLayout.LayoutFlags="All"
           BackgroundColor="LightBlue"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Center"/>
AbsoluteLayout>

في هذا المثال، يتم وضع العنصر في منتصف الشاشة ويشغل 30٪ من العرض و10٪ من الارتفاع.

متى نستخدم AbsoluteLayout؟

رغم أن هذا النوع من التخطيطات يوفر أقصى درجات التحكم، إلا أن استخدامه يجب أن يكون مقيداً لحالات محددة فقط:

• التصميمات التفاعلية مثل الألعاب، أو واجهات المستخدم التي تعتمد على التحريك والسحب.

• تصاميم معقدة لا يمكن تحقيقها بسهولة باستخدام StackLayout أو Grid.

• عند التعامل مع عناصر مرئية صغيرة وثابتة الحجم مثل مؤشرات أو إشارات في تطبيقات الملاحة أو الخرائط.

• في حالات الرسوميات الدقيقة التي تتطلب تنسيقاً صارماً بين العناصر.

مقارنة بين AbsoluteLayout والتخطيطات الأخرى في Xamarin.Forms

مزايا استخدام AbsoluteLayout

• تحكم دقيق في مواقع العناصر.

• مناسب للعناصر العائمة أو الثابتة في التصميم.

• يمكن استخدامه لرسم تخطيطات غير تقليدية مثل نماذج الخرائط والرسوم التوضيحية.

عيوب استخدام AbsoluteLayout

• صعوبة التصميم المتجاوب مع الشاشات المختلفة.

• قد يؤدي إلى تصميم غير متكيف مع تغيير حجم الشاشة أو اتجاهها.

• يزيد من تعقيد الصيانة في حال تم تغيير تصميم الواجهة.

• يجب على المطور حساب كافة المواضع والأحجام يدوياً مما يتطلب وقتاً وجهداً إضافياً.

أمثلة تطبيقية متقدمة

1. إنشاء واجهة لوحة تحكم صغيرة باستخدام AbsoluteLayout

xml
CopyEdit
<AbsoluteLayout BackgroundColor="White">
    <BoxView Color="DarkGray"
             AbsoluteLayout.LayoutBounds="0.05, 0.05, 0.9, 0.2"
             AbsoluteLayout.LayoutFlags="All" />

    <Label Text="نظام إدارة"
           FontSize="24"
           TextColor="White"
           AbsoluteLayout.LayoutBounds="0.5, 0.1, 0.5, 0.1"
           AbsoluteLayout.LayoutFlags="All"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Center"/>
    
    <Button Text="دخول"
            AbsoluteLayout.LayoutBounds="0.5, 0.4, 150, 50"
            AbsoluteLayout.LayoutFlags="PositionProportional"/>
AbsoluteLayout>

هذا المثال يوضّح كيف يمكن تصميم واجهة تسجيل دخول بطريقة محددة باستخدام المواضع النسبية والمطلقة معاً.

أفضل الممارسات لاستخدام AbsoluteLayout

• تقليل استخدامه لأقل قدر ممكن واعتماد التخطيطات المتجاوبة حيثما أمكن.

• استخدام القيم النسبية مع LayoutFlags لتحقيق شيء من التجاوب مع اختلاف الأحجام.

• تجنب الاعتماد عليه لتصميم كامل التطبيق بل يُفضل استخدامه لعناصر محددة ضمن تخطيطات أخرى.

• اختبار الواجهة على أحجام مختلفة من الشاشات لضمان اتساق العرض.

• تنظيم العناصر باستخدام Naming مناسب لتسهيل الصيانة والتحديث.

الجدول التالي يوضح الفروقات بين LayoutFlags في AbsoluteLayout

مزج AbsoluteLayout مع Layouts أخرى

رغم أن AbsoluteLayout يعمل بشكل مستقل، إلا أنه يمكن استخدامه ضمن تخطيطات أخرى كأن يكون داخل StackLayout أو Grid لتصميم أجزاء محددة من التطبيق. هذا يتيح الحصول على مزايا كلا النمطين من التخطيط: التجاوب العام مع الحفاظ على تحكم دقيق ببعض العناصر.

مثال:

xml
CopyEdit
<StackLayout>
    <Label Text="العنوان" FontSize="Large"/>
    
    <AbsoluteLayout HeightRequest="200">
        <Image Source="map.png"
               AbsoluteLayout.LayoutBounds="0,0,1,1"
               AbsoluteLayout.LayoutFlags="All"/>
        <BoxView Color="Red"
                 AbsoluteLayout.LayoutBounds="0.5, 0.5, 20, 20"
                 AbsoluteLayout.LayoutFlags="PositionProportional"/>
    AbsoluteLayout>
StackLayout>

خاتمة تقنية

يوفّر استخدام المخطط المطلق باستخدام XAML داخل Xamarin.Forms قدرة متقدمة على تصميم واجهات دقيقة، لكنه يتطلب حذرًا وفهمًا عميقًا لطبيعة القياسات النسبية والمطلقة وكيفية تأثيرها على الواجهة. إن الاستخدام السليم لهذا النوع من التخطيطات يتطلب توزانًا بين الحاجة للتحكم الصارم ومتطلبات التصميم المتجاوب والديناميكي. كما أن الالتزام بالممارسات المثلى مثل المزج بين أنواع التخطيطات واستخدام LayoutFlags بشكل متوازن يضمن إنتاج تطبيقات مرنة وقابلة للصيانة على المدى الطويل.

المراجع:

1. Microsoft Docs – AbsoluteLayout – Xamarin.Forms

2. Xamarin.Forms Guide by Charles Petzold – Microsoft Press