Android Academy · درس

إنشاء بطاقة ملف شخصي

اجمع Composables في شاشة واحدة

الدرس 4 من 413 خطوة

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

هدفنا

حان وقت الجمع بين ما تعلمته. سننشئ بطاقة ملف شخصي بسيطة: اسمًا ومسمى وظيفيًا مرتبين بعناية داخل مربع منسّق.

وخلال ذلك، ستتعرّف على Modifier، الذي يتحكم في حجم العناصر القابلة للتركيب وتباعدها ومظهرها.

تعرّف على Modifier

يغيّر Modifier مظهر العنصر القابل للتركيب وسلوكه. وتمرّره من خلال المعامل modifier الذي تقبله معظم العناصر القابلة للتركيب.

تتعامل modifiers مع الحشو والحجم ولون الخلفية والحدود وغير ذلك. وهي الطريقة الأساسية لتزيين واجهة المستخدم في Compose.

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

تسلسل Modifiers

تنشئ modifier من خلال تسلسل الاستدعاءات باستخدام النقاط. ويعيد كل استدعاء modifier جديدًا، لذا يمكنك جمع عدة modifiers معًا.

الترتيب مهم: يختلف وضع الحشو قبل الخلفية عن وضعه بعدها. اقرأ السلسلة من اليسار إلى اليمين، كما تقرأ وصفة.

Modifier
    .padding(16.dp)
    .fillMaxWidth()

ملء العرض

يجعل modifier fillMaxWidth العنصر القابل للتركيب ممتدًا عبر كل المساحة الأفقية المتاحة. وهو مناسب تمامًا للبطاقات التي ينبغي أن تمتد عبر الشاشة.

يتوفر أيضًا fillMaxSize للاتجاهين، وsize لتحديد عرض وارتفاع ثابتين.

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

إضافة الحشو

يضيف الحشو مساحة داخل العنصر القابل للتركيب، بين حافته ومحتواه. استخدم Modifier.padding مع قيمة بوحدة dp.

يمنع الحشو النص من ملامسة حواف البطاقة، ما يجعل التخطيط مريحًا ومنظمًا.

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

إضافة خلفية إلى البطاقة

يساعد لون الخلفية البطاقة على الظهور بوضوح. طبّقه باستخدام modifier background وقيمة لون.

اجمعه مع الحشو كي تتوفر مساحة مريحة حول النص داخل المنطقة الملوّنة.

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

ترتيب الاسم والمسمى الوظيفي

داخل Column الخاص بالبطاقة، نرتّب جزأين من النص: اسمًا عريضًا في الأعلى ومسمى وظيفيًا أخف تحته.

يؤدي تعيين قيم مختلفة لـ fontSize وfontWeight إلى إنشاء تسلسل هرمي بصري واضح بينهما.

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

جعله قابلًا لإعادة الاستخدام

لنجعل البطاقة عنصرًا قابلًا للتركيب وقابلًا لإعادة الاستخدام، بحيث يقبل name وtitle كمعاملين. وبذلك يمكنه عرض أي شخص.

هذه هي الفكرة نفسها التي تناولناها في الدرس الأول: مرّر البيانات وأعد استخدام واجهة المستخدم في كل مكان.

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

بطاقة الملف الشخصي الكاملة

إليك البطاقة بعد جمع كل الأجزاء: عمود بعرض كامل، وخلفية رمادية، وحشو، وسطران نصيان منسّقان.

لاحظ كيف تجمع سلسلة modifier والعناصر الفرعية للعمود كل ما تناولناه في الدروس السابقة ضمن عنصر قابل للتركيب مرتب.

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

معاينة البطاقة

أضف غلافًا باستخدام @Preview لتتمكن من رؤية البطاقة في Android Studio. فهو يستدعي ProfileCard ببيانات نموذجية ويعرض خلفية.

يمكنك الآن ضبط الحشو أو الألوان ومشاهدة تحديث النتيجة فورًا.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

إظهارها على الشاشة

لعرض البطاقة في التطبيق قيد التشغيل، استدعها داخل setContent في activity الخاصة بك. يؤدي ذلك إلى ربط العنصر القابل للتركيب بالشاشة الفعلية.

لقد انتقلت الآن من عنصر قابل للتركيب واحد إلى مكوّن كامل وقابل لإعادة الاستخدام لواجهة المستخدم.

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

اختبار سريع

لنراجع كيفية حصول العناصر القابلة للتركيب على الحشو والحجم والخلفية.

أجب عليها في الدرس التفاعلي

مراجعة

أنشأت بطاقة ملف شخصي كاملة من خلال الجمع بين Text وColumn وModifier. وتتيح لك modifiers تسلسل padding وfillMaxWidth وbackground لتشكيل واجهة المستخدم وتنسيقها.

جعلت البطاقة قابلة لإعادة الاستخدام باستخدام معاملي name وtitle، وعاينتها باستخدام @Preview، وعرضتها من خلال setContent. هذه شاشة كاملة مبنية بعنصر قابل للتركيب من البداية إلى النهاية. تهانينا!

البدء مجانًا

تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا

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

الدورات: 36
الدروس: 152

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «إنشاء بطاقة ملف شخصي» مجاني؟

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

ماذا ستتعلم في «إنشاء بطاقة ملف شخصي»؟

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

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

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

كم من الوقت يستغرق درس «إنشاء بطاقة ملف شخصي»؟

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

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

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

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

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