Android Academy · درس

النص والصورة والزر

استخدم composables الأساسية المضمّنة

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

الدوال القابلة للتركيب المضمنة

يوفر Compose دوال قابلة للتركيب جاهزة لعناصر واجهة المستخدم الشائعة. ومن أكثر ثلاث دوال ستستخدمها باستمرار Text وImage وButton.

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

تعرض Text سلسلة نصية. وأهم معلماتها هي text.

@Composable
fun Title() {
    Text(text = "My App")
}

تنسيق النص

تقبل Text العديد من معلمات التنسيق، مثل fontSize وcolor وfontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp مقابل dp

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

استخدم sp للنص وdp لكل شيء آخر.

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

تعرض Image صورة. استخدم painterResource لتحميل مورد قابل للرسم، ووفّر دائمًا contentDescription لإتاحة الوصول.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

تقرأ برامج قراءة الشاشة contentDescription بصوت عالٍ. بالنسبة إلى الصور الزخرفية التي لا تحمل أي معنى، مرّر null. أما الصور ذات المعنى، فامنحها وصفًا قصيرًا.

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

‏Button عنصر قابل للنقر. ومعلمته الأساسية هي onClick، وهي لامبدا تُشغّل عند النقر. يوضع عنوان الزر في لامبدا المحتوى الخاصة به — وعادةً يكون عنصر Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

الاستجابة للنقرات

لامبدا onClick هي المكان الذي تضع فيه منطقك — مثل تحديث الحالة أو التنقل أو استدعاء دالة.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

لامبدا المحتوى

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

Button(onClick = { }) {
    Text(text = "Save")
}

دمجها معًا

تجمع واجهة المستخدم الفعلية هذه الدوال القابلة للتركيب. هنا يتراص عنوان وصورة وزر داخل Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

هناك الكثير غيرها

إلى جانب هذه الدوال الثلاث، يوفر Compose عناصر TextField وIcon وCheckbox وSwitch وغيرها الكثير. وينطبق النمط نفسه: مرّر المعلمات ولامبدا المحتوى.

تحقق سريع

ما المعامل في Button الذي يشغّل التعليمات البرمجية عند نقر المستخدم عليه؟

مراجعة

تعرّفتم على ثلاثة عناصر composable أساسية:

Text — يعرض السلاسل النصية؛ ويمكن تنسيقه باستخدام fontSize وcolor (استخدموا sp).
Image — باستخدام painterResource وcontentDescription.
Button — لامدا onClick بالإضافة إلى لامدا للمحتوى.

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

هل درس «النص والصورة والزر» مجاني؟

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

ماذا ستتعلم في «النص والصورة والزر»؟

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

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

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

كم من الوقت يستغرق درس «النص والصورة والزر»؟

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

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

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

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

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