دليل شامل للعروض والتخطيطات في نظام أندرويد: من المفاهيم الأساسية إلى التصاميم المتقدمة

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

ببساطة، يعرض عنصر العرض عادةً عنصرًا يمكن للمستخدم رؤيته والتفاعل معه؛ وتُسمى هذه العناصر عادةً بالأدوات . أما مجموعة العرض ، فهي حاوية غير مرئية تُحدد بنية تخطيط عنصر العرض وكائنات مجموعة العرض الأخرى. وتُسمى هذه عادةً بالتخطيطات . في هذا الدرس، سنحلل العناصر الأكثر استخدامًا، بما في ذلك مجموعات العرض وبعض العناصر الأساسية.

طرق تعريف واجهة المستخدم (UI)

في نظام أندرويد، يمكنك تحديد التخطيط بطريقتين رئيسيتين، ويمنحك الإطار البرمجي المرونة لاستخدام إحدى الطريقتين أو كلتيهما في وقت واحد:

• إعلان XML: يوفر نظام Android مفردات XML بسيطة تتوافق مع فئات العرض وفئاتها الفرعية. يمكنك كتابة الكود يدويًا أو استخدام محرر تخطيط Android Studio بفضل واجهة السحب والإفلات. هذا هو الخيار المفضل لأنه يسمح افصل العرض التقديمي عن الكود والذي يتحكم في السلوك ويسهل إنشاء تصميمات مختلفة وفقًا لحجم الشاشة واتجاهها.
• الإنشاء البرمجي (وقت التشغيل): يمكن لتطبيقك إنشاء نسخ من كائنات العرض (View) ومجموعة العرض (ViewGroup) ومعالجة خصائصها مباشرةً في كود Java أو Kotlin. يُعد هذا مفيدًا عندما تحتاج واجهة المستخدم إلى التغيير ديناميكيًا بناءً على بيانات غير معروفة إلا عند تشغيل التطبيق.

لتصحيح تصميمك أثناء وقت التشغيل، يوصى بشدة باستخدام أداة فحص التصميم المدمجة في بيئة التطوير المتكاملة (IDE).

مجموعات العرض

توفر كل فئة فرعية من فئة ViewGroup طريقة فريدة لعرض العناصر المتداخلة بداخلها. من الضروري الحفاظ على تسلسل التخطيط بسيطًا قدر الإمكان ؛ حيث يتم عرض التخطيط بشكل أسرع مع عدد أقل من مستويات التداخل (تسلسل هرمي واسع بدلاً من تسلسل هرمي عميق).

• التخطيط الخطي
  • قم بتجميع العناصر في سطر واحد، والذي يمكن أن يكون عمودي أو أفقيإنها تعمل مثل "مجموعة" من طرق العرض.
  • إنه عملي للغاية بالنسبة للعروض والنماذج البسيطة.
• تخطيط نسبي
  • يتم ترتيب العناصر في العلاقة بينهما وبين الهوامش من الحاوية. إنها مرنة وقوية للغاية، مما يسمح لك بوضع العناصر بالنسبة لبعضها البعض باستخدام معرّفاتها.
• عرض التمرير
  • يُستخدم لعرض ما يلي: لا تتناسب مع الشاشةلا يمكن أن يحتوي إلا على عرض واحد أو مجموعة من العروض كعنصر فرعي مباشر، ويضيف أشرطة التمرير تلقائيًا.
• الجدول
  • قم بتجميع العناصر في الصفوف والأعمدةاستخدم عناصر TableRow لتنظيم الخلايا.
• تخطيط الإطار
  • صُمم ليحتوي عرض واحدإذا تمت إضافة المزيد، فإنها تصطف في الزاوية العلوية اليسرى، وتتداخل. ويتم تنظيمها باستخدام السمة. جاذبية التخطيط لتحديد موضع العناصر بالنسبة للعنصر الأصل (أسفل، وسط، إلخ).
• تخطيط مطلق
  • مرفوض منذ إصدار أندرويد 1.5. كان يستخدم إحداثيات مطلقة، مما منع التكيف مع أحجام الشاشات المختلفة.
• القيد التخطيط
  • يُعد هذا التصميم حاليًا الأكثر مرونة وهو التصميم الموصى به لـ الحفاظ على التسلسل الهرمي السطحي، وتجنب التداخل المفرط لعناصر LinearLayouts.

بالنسبة للتطبيقات البسيطة، تُعدّ مجموعات LinearLayout وRelativeLayout وScrollView الأكثر فائدة. دعونا نلقي نظرة على بعض الأمثلة التفصيلية:

تحليل معمق لـ LinearLayout

يُعدّ LinearLayout أساسًا للعديد من واجهات المستخدم. يمكننا ضبطه باستخدام خاصية android:orientation . إذا كان عموديًا، تُوضع العناصر فوق بعضها البعض؛ وإذا كان أفقيًا، تُوضع من اليسار إلى اليمين.

[html]
<LinearLayout xmlns:android=»http://schemas.android.com/apk/res/android»
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=»vertical»>
<عرض النص
android:id=»@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text="النص 1" />
<عرض النص
android:id=»@+id/textView2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text="النص 2" />
<عرض النص
android:id=»@+id/textView3″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text="النص 3" />
<عرض النص
android:id=»@+id/textView4″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text="النص 4" />
[/ لغة البرمجة]

[html]
<LinearLayout xmlns:android=»http://schemas.android.com/apk/res/android»
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=»horizontal»>
<Button
android:id="@+id/button1"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text="الزر 1" />
<Button
android:id="@+id/button2"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text="الزر 2" />
<Button
android:id="@+id/button3"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text="الزر 3" />
[/ لغة البرمجة]

مفهوم الأوزان في LinearLayout

تُمثل الأوزان نسبًا مئوية تُتيح للعناصر المرئية شغل عرض أو ارتفاع مُحددين بالنسبة للمساحة المُتاحة. ولتفعيلها، يجب ضبط حجم العنصر (العرض أو الارتفاع) على 0dp . على سبيل المثال، إذا كان لدينا خمسة عناصر مرئية مُحددة بـ android:layout_weight="1" ، فسيشغل كل عنصر منها 20% من الشاشة بالضبط.

يمكننا أيضاً تعيين أوزان مختلفة. سيشغل عنصر عرض بوزن 2 ضعف مساحة عنصر عرض بوزن 1. وهذا أمر ضروري لإنشاء واجهات تفاعلية لا تعتمد على وحدات بكسل ثابتة.

استخدام ScrollView

يُعدّ عنصر ScrollView ضروريًا عندما يتجاوز المحتوى الحجم الفعلي للشاشة. تنفيذه بسيط: ما عليك سوى وضع الحاوية الرئيسية (مثل LinearLayout) بداخله.

إتقان التخطيط النسبي

إنها الحاوية الأكثر تنوعًا، إذ تتيح لك تحديد موضع العناصر بناءً على العنصر الأب أو العناصر الفرعية الأخرى. ومن خلال خصائص مثل android:layout_toRightOf أو android:layout_alignParentTop ، نحقق دقة متناهية في التصميم.

السمات الأساسية للعروض

يدعم أي كائن View أو ViewGroup مجموعة متنوعة من سمات XML. بعضها خاص (مثل textSize في TextView) والبعض الآخر شائع (مثل id ).

المعرّف (ID)

المعرّف هو عدد صحيح يُعرّف العرض بشكل فريد. يشير التركيب @+id/id_name إلى ضرورة إنشاء مورد جديد في ملف R.java. هذا أمر بالغ الأهمية لتحديد موقع العنصر من كود Java/Kotlin باستخدام findViewById() ولإنشاء العلاقات في RelativeLayout.

الأبعاد: مطابقة الأصل وتغليف المحتوى

تجنب استخدام وحدات البكسل المطلقة. بدلاً من ذلك، استخدم وحدات البكسل المستقلة عن الكثافة (dp) لضمان التوافق مع كثافات الشاشة المختلفة.

• wrap_content: يتم تعديل العرض ليناسب الحد الأدنى من الحجم اللازم لاستيعاب محتواه.
• match_parent: يتوسع العرض ليشغل كل المساحة المتاحة التي يسمح بها الحاوية الأصلية.

الحشو والهوامش

من الضروري التمييز بين هذين المفهومين للحصول على تصميم نظيف:

• حشوة: هي المسافة بين حافة العرض ومحتواه الداخلي. ويتم تحديدها بخصائص مثل android:padding.
• هامِش: المساحة الخارجية هي التي تفصل عنصر العرض عن العناصر المجاورة له. تدعم مجموعات العرض فقط الهوامش (على سبيل المثال). android:layout_margin).

نصيحة احترافية: استخدم paddingStart و paddingEnd بدلاً من Left/Right لضمان تكيف الواجهة بشكل صحيح مع اللغات التي تُكتب من اليمين إلى اليسار (RTL).

طرق العرض الشائعة (الأدوات)

• عرض النص
  • يعرض نصًا ثابتًا. يسمح لك بتغيير نوع الخط وحجمه ولونه من خلال الوثائق الرسمية.
• EDITTEXT
  • حقل نص قابل للتحرير. يسمح بتحديد المدخلات باستخدام الخاصية. تلميح (النص المقترح) ونوع لوحة المفاتيح (البريد الإلكتروني، الهاتف، إلخ).
• أزرار
  • زر بسيط لتنفيذ الإجراءات.
• ImageButton
  • زر يستخدم صورة بدلاً من النص.
• زر التبديل ومربع الاختيار
  • أزرار الحالة (تشغيل/إيقاف). مربع الاختيار هو التطبيق الكلاسيكي لمربع الاختيار.

إدارة الفعاليات والتفاعلية

لكي يكون التطبيق فعالاً، يجب ربط الإجراءات بالأزرار. وهناك طريقتان رئيسيتان للقيام بذلك:

1. استخدام الكود (المستمع)

نحدد موقع العرض بواسطة معرّفه ونطبق عليه مستمع النقرات :

2. استخدام سمة XML

تمت إضافة android:onClick="methodName" إلى ملف XML وتم إنشاء الطريقة المقابلة في النشاط:

بالنسبة لعناصر الحالة مثل CheckBox ، نستخدم setOnCheckedChangeListener لاكتشاف التغيير في القيمة المنطقية (isChecked).

القوائم الديناميكية والمحولات

عندما لا يكون المحتوى ثابتًا، نستخدم مكونات مثل RecyclerView (الخيار الأكثر كفاءة في استخدام الذاكرة) أو AdapterView (مثل ListView أو GridView). تتطلب هذه المكونات محولًا يعمل كجسر بين مصدر البيانات والعرض.

• ArrayAdapter: مثالي عندما تكون البيانات في مصفوفة بسيطة من السلاسل النصية.
• SimpleCursorAdapter: يُستخدم عندما تأتي البيانات من قاعدة بيانات عبر مؤشر.

إذا تغيرت البيانات الأساسية، فيجب استدعاء الدالة notifyDataSetChanged() لتحديث القائمة بشكل مرئي.

التحدي العملي: التصميم المعقد

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

أدلة للتحدي:

1. استخدم 4 تخطيطات خطية إجمالاً.
2. قم بتطبيق الأوزان لجعل العرض قابلاً للتكيف.
3. فهو يجمع بين التوجيه الأفقي والرأسي.

الحل التقني المقترح:
[HTML]











[/ HTML]

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