Android Academy · درس

التخطيطات وطرق العرض

صمّم واجهات المستخدم باستخدام تخطيطات XML. استخدم ConstraintLayout وLinearLayout وطرق العرض الشائعة مثل TextView وButton وImageView وEditText.

التخطيطات وطرق العرض درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 3 من أصل 7. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 7 دروس في المجموع.

إنشاء واجهات المستخدم باستخدام XML

يتم تعريف واجهات مستخدم Android في ملفات تخطيط XML المخزنة في res/layout/. يصف التخطيط بنية شاشتك ومظهرها — أي طرق العرض التي تظهر ومكانها.

ثم يقوم كود Kotlin بتضخيم هذا التخطيط والتفاعل مع طرق العرض أثناء التشغيل.

أنواع View الشائعة

أكثر عناصر View استخدامًا:

TextView — يعرض نصًا
EditText — حقل لإدخال النص
Button — زر قابل للنقر
ImageView — يعرض صورة
CheckBox — مفتاح تشغيل/إيقاف
Switch — مفتاح تشغيل/إيقاف (Material)

ConstraintLayout

يُعد ConstraintLayout التخطيط الموصى به لمعظم الشاشات. يتيح لك تحديد مواضع طرق العرض بالنسبة إلى بعضها أو إلى العنصر الأب باستخدام القيود — مثل وصل نقاط الارتساء.

تسلسل هرمي مسطح — لا حاجة إلى تخطيطات متداخلة
مرن — يتعامل مع أي حجم للشاشة
يُستخدم افتراضيًا في مشاريع Android Studio الجديدة

تخطيط ConstraintLayout بصيغة XML

عنصر TextView يتوسط الشاشة في ConstraintLayout:

<!-- res/layout/activity_main.xml -->
<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">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

يرتب LinearLayout طرق العرض في صف أو عمود واحد:

android:orientation="vertical" — يكدّس طرق العرض من الأعلى إلى الأسفل
android:orientation="horizontal" — يرتبها جنبًا إلى جنب
android:layout_weight — يوزع المساحة المتبقية بالتناسب

إنه بسيط ويمكن التنبؤ بسلوكه، لكن تجنب التداخل العميق.

سمات التخطيط الأساسية

لكل View هذه السمات الأساسية:

layout_width / layout_height: match_parent أو wrap_content أو قيمة dp ثابتة
id: تُستخدم للإشارة إلى طريقة العرض في Kotlin
margin: المساحة خارج طريقة العرض
padding: المساحة داخل طريقة العرض

استخدم dp للأحجام (بكسلات مستقلة عن الكثافة) وsp لأحجام النصوص.

ScrollView

عندما يكون المحتوى أطول من الشاشة، ضعه داخل ScrollView:

يمكن أن يحتوي على عنصر ابن مباشر واحد فقط (عادةً LinearLayout)
التمرير عموديًا افتراضيًا
استخدم HorizontalScrollView للتمرير الأفقي

بالنسبة إلى القوائم الديناميكية الطويلة، استخدم RecyclerView بدلًا منه — فهو أكثر كفاءة.

العثور على طرق العرض في الكود

طريقتان للوصول إلى طرق العرض في كود Kotlin:

findViewById(R.id.tvTitle) — الطريقة التقليدية، وتعيد طريقة العرض بحسب المعرّف
ViewBinding — النهج الحديث: ينشئ فئة ربط من XML، ما يوفر وصولًا آمنًا للأنواع إلى جميع طرق العرض

يُفضَّل استخدام ViewBinding بشدة — وستتعلمه في الدرس التالي.

استخدام findViewById

يمكنك الوصول إلى طرق العرض وتعديلها من onCreate:

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

اختبار سريع

ما الوحدة التي ينبغي استخدامها لحجم النص في تخطيطات Android؟

مراجعة: التخطيطات وطرق العرض

يمكنك الآن تصميم شاشات Android:

تُعرَّف واجهات المستخدم في ملفات تخطيط XML داخل res/layout/
طرق العرض الشائعة: TextView وEditText وButton وImageView
ConstraintLayout — مرن ومسطح وموصى به
LinearLayout — ترتيب بسيط في صف أو عمود
استخدم dp للأحجام وsp للنصوص
يمكنك الوصول إلى طرق العرض في Kotlin باستخدام findViewById

التالي: اجعل واجهة المستخدم تفاعلية من خلال التعامل مع إدخال المستخدم.

الأسئلة الشائعة

هل درس «التخطيطات وطرق العرض» مجاني؟

نعم — نص درس «التخطيطات وطرق العرض» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 7 دروس في المجموع.

ماذا ستتعلم في «التخطيطات وطرق العرض»؟

صمّم واجهات المستخدم باستخدام تخطيطات XML. استخدم ConstraintLayout وLinearLayout وطرق العرض الشائعة مثل TextView وButton وImageView وEditText. تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟

لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 7.

كم من الوقت يستغرق درس «التخطيطات وطرق العرض»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟

نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Android Academy