Android Academy · درس

ما Jetpack Compose؟

افهم واجهة المستخدم التصريحية في Android

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

ما هو Jetpack Compose؟

Jetpack Compose هو مجموعة الأدوات الحديثة في Android لإنشاء واجهات المستخدم الأصلية. بدلًا من كتابة ملفات تخطيط XML، تصف واجهة المستخدم مباشرةً في تعليمات برمجية بلغة Kotlin.

Compose تصريحي: تخبره بما ينبغي أن تبدو عليه الشاشة لحالة معينة، وهو يحدد كيفية رسمها وتحديثها.

الطريقة القديمة: عروض XML

تقليديًا، كانت شاشة Android تحتاج إلى جزأين:

ملف تخطيط XML يصف عناصر الواجهة.
تعليمات Kotlin/Java البرمجية التي تعثر على تلك العروض باستخدام findViewById وتعدّلها.

كان الحفاظ على التزامن بين XML والتعليمات البرمجية أمرًا شاقًا ومعرضًا للأخطاء.

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

الإجرائي مقابل التصريحي

مع عروض XML، تكتب تعليمات برمجية إجرائية: تحصل على عرض ثم تغيّره خطوةً تلو الأخرى.

مع Compose، تكتب تعليمات برمجية تصريحية: تصف النتيجة النهائية بوصفها دالةً في بياناتك. عند تغير البيانات، يعيد Compose رسم ما يلزم تلقائيًا.

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

الدوال القابلة للتركيب

لبنة البناء الأساسية في Compose هي الدالة القابلة للتركيب: دالة Kotlin عادية مشروحة بالتعليق @Composable وتُصدر واجهة مستخدم.

يمكن للدوال القابلة للتركيب استدعاء دوال أخرى قابلة للتركيب، ما يتيح لك بناء الشاشات من أجزاء صغيرة قابلة لإعادة الاستخدام.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

لا حاجة إلى findViewById

لا يوجد في Compose findViewById ولا معرّفات للعروض. واجهة المستخدم هي استدعاء الدالة. لعرض نص مختلف، ما عليك سوى تمرير وسيطة مختلفة وترك Compose يعيد التركيب.

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

واجهة المستخدم بوصفها دالة في الحالة

فكرة أساسية: UI = f(state). الشاشة هي ناتج الدوال القابلة للتركيب لديك عند إعطائها الحالة الحالية. غيّر الحالة، وستنتج الدالة نفسها واجهة مستخدم جديدة.

يجعل هذا واجهات المستخدم قابلة للتنبؤ وأسهل في الفهم.

كل شيء هو Kotlin

لأن الدوال القابلة للتركيب هي دوال Kotlin، يمكنك استخدام الحلقات والشروط والمتغيرات لبناء واجهة المستخدم. لا تحتاج إلى لغة قوالب خاصة.

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

تعليمات برمجية تمهيدية أقل

يقلل Compose كميات هائلة من التعليمات البرمجية الرابطة. فلا حاجة إلى تضخيم XML، ولا إلى محولات للقوائم البسيطة، ولا إلى ربط يدوي بين التخطيط والمنطق.

والنتيجة: ملفات أقل وأخطاء أقل.

التوافق مع Views

لا يتعين عليك إعادة كتابة تطبيق كامل. يتوافق Compose تشغيليًا مع نظام View القديم. يمكنك تضمين Compose داخل شاشة XML موجودة، أو تضمين View داخل Compose.

يتيح ذلك للفرق الانتقال تدريجيًا.

ما تحتاج إليه

لاستخدام Compose، تحتاج إلى:

إصدار حديث من Android Studio.
تبعيات Compose في ملف Gradle لديك.
نشاط يستدعي setContent { } لاستضافة الدوال القابلة للتركيب.

شاشة صغيرة

إليك شاشة Compose كاملة وبسيطة. يمثّل setContent الجسر من Android Activity إلى عالم Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

اختبار سريع

ما الوصف الأفضل لـ Jetpack Compose؟

مراجعة

تعلمت أن Jetpack Compose هو مجموعة أدوات لواجهات المستخدم، تصريحية وتعتمد على Kotlin أولًا. الأفكار الأساسية:

تُبنى واجهة المستخدم من دوال @Composable.
لا حاجة إلى XML ولا إلى findViewById.
UI = f(state) — غيّر الحالة، وسيعيد Compose الرسم.

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

هل درس «ما Jetpack Compose؟» مجاني؟

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

ماذا ستتعلم في «ما Jetpack Compose؟»؟

افهم واجهة المستخدم التصريحية في Android تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «ما Jetpack Compose؟»؟

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

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

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

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

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