قسم الصورة الرمزية والاسم والنبذة
جمّع الترويسة باستخدام الصورة والنص
قسم الصورة الرمزية والاسم والنبذة درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ابدأ ببناء الرأس
حان وقت تحويل المخطط إلى واقع. ستبدأ من أعلى البطاقة، عند الرأس: الصورة الرمزية والاسم والنبذة القصيرة. 👤
صورة المستخدم الرمزية
الصورة الرمزية هي Composable من نوع Image ترسم موردًا رسوميًا. امنحها حجمًا واضحًا حتى لا تتمدد لتملأ الشاشة.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo"
)اجعلها دائرية
تبدو صور الملفات الشخصية أفضل عندما تكون دائرية. اربط clip بـ CircleShape في modifier الخاص بـ Image لتحويلها إلى صورة رمزية دائرية تمامًا.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo",
modifier = Modifier.size(96.dp).clip(CircleShape)
)إضافة الاسم
يأتي اسم العرض أسفل الصورة الرمزية. يعرض Composable بسيط من نوع Text النص الذي سيقرأه المستخدم أولًا.
Text(text = "Ada Lovelace")تنسيق الاسم
ينبغي أن تبرز الأسماء. مرّر style من typography الخاصة بـ MaterialTheme ليظهر الاسم كعنوان مناسب.
Text(
text = "Ada Lovelace",
style = MaterialTheme.typography.titleLarge
)نص النبذة
أضف أسفل الاسم نبذة من سطر واحد باستخدام Text آخر. استخدم نمطًا أصغر وأهدأ لتظهر كـ عنوان فرعي لا كعنوان رئيسي.
Text(
text = "Building delightful apps.",
style = MaterialTheme.typography.bodyMedium
)رصّها داخل Column
تُرص الصورة الرمزية والاسم والنبذة عموديًا، لذا ضع العناصر الثلاثة داخل Column. ويحدد ترتيب كتابتها ترتيب ظهورها.
Column {
Image(/* avatar */)
Text("Ada Lovelace")
Text("Building delightful apps.")
}توسيط كل شيء
تبدو الرؤوس متوازنة عند توسيطها. اضبط horizontalAlignment على CenterHorizontally في Column لمحاذاة الصورة الرمزية والنص.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }إضافة مسافة عمودية
تبدو الرؤوس المزدحمة فوضوية. استخدم Arrangement.spacedBy في Column لإضافة فجوة ثابتة بين الصورة الرمزية والاسم والنبذة.
Column(
verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }إضافة مساحة داخلية للرأس
اترك مساحة مريحة حول القسم بأكمله بإضافة padding إلى modifier الخاص بـ Column. يجب ألا تلامس الحواف إطار الشاشة.
Column(
modifier = Modifier.padding(16.dp)
) { /* ... */ }اكتمل قسم الرأس
لديك الآن رأس منظم: صورة رمزية دائرية، واسم بارز، ونبذة هادئة، كلها في المنتصف ومتباعدة جيدًا. لقد اكتمل الجزء العلوي من بطاقتك. 🎉
تحقق سريع
كيف تحوّل صورة مربعة إلى صورة رمزية دائرية؟
مراجعة: الرأس
أنشأت الرأس داخل Column في المنتصف: صورة رمزية دائرية مقصوصة، واسمًا منسقًا، ونبذة بسيطة، مع مسافات وحواف داخلية. ستضيف بعد ذلك صف الإحصاءات.
تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «قسم الصورة الرمزية والاسم والنبذة» مجاني؟
نعم — نص درس «قسم الصورة الرمزية والاسم والنبذة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «قسم الصورة الرمزية والاسم والنبذة»؟
جمّع الترويسة باستخدام الصورة والنص تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «قسم الصورة الرمزية والاسم والنبذة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- رسم تخطيط بطاقة الملف الشخصي
- قسم الصورة الرمزية والاسم والنبذة
- صف الإحصاءات وزر المتابعة
- استخراج Composables قابلة لإعادة الاستخدام