Android Academy · درس

الألوان وMaterialTheme

طبّق نسقًا متسقًا

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

الألوان في Compose

يمثّل Compose الألوان باستخدام الفئة Color. وتوجد قيم جاهزة مثل Color.Red وColor.Blue.

تمرّرون Color إلى معلمات مثل لون Text أو الخلفية.

Text(
    text = "Hi",
    color = Color.Blue
)

قيم الألوان المخصصة

أنشئوا أي لون من رمز سداسي عشري باستخدام Color(0xFFRRGGBB). ويعني الرقمان الأولان، FF، أن اللون معتم بالكامل.

على سبيل المثال، 0xFF6200EE لون أرجواني.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

لون الخلفية

استخدموا modifier background للرسم خلف composable. أضيفوا padding حتى لا يلامس المحتوى الحواف.

الترتيب مهم: يؤدي وضع background ثم padding إلى ملء منطقة padding.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

ما المقصود بـ MaterialTheme؟

إنّ MaterialTheme نظام يحفظ ألوان تطبيقكم وخطوطه وأشكاله في مكان واحد.

تقرأ composables منه، مما يحافظ على اتساق التطبيق بأكمله ويسهّل إعادة تنسيقه.

MaterialTheme {
    Text("Themed app")
}

مخطط ألوان السمة

يوفر colorScheme الخاص بالسمة أدوارًا مسمّاة مثل primary وsecondary وbackground.

تتيح قراءة هذه الأدوار بدلًا من استخدام ألوان ثابتة تغيير المظهر من مكان واحد.

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary وonPrimary

لكل لون رئيسي شريك on يُستخدم للنص المرسوم فوقه، مثل onPrimary.

يضمن استخدام primary كخلفية وonPrimary للنص تباينًا واضحًا وسهل القراءة.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

طباعة السمة

يخزّن MaterialTheme أيضًا أنماط النصوص في typography، مثل titleLarge وbodyMedium.

مرّروا أحدها إلى style الخاص بـ Text للحفاظ على نص متسق ومناسب الحجم.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

المخططات الفاتحة والداكنة

يمكنكم إنشاء مخطط باستخدام lightColorScheme() أو darkColorScheme() وتمريره إلى MaterialTheme.

يتيح تبديل المخططات لتطبيقكم دعم الوضعين الفاتح والداكن.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

تخصيص المخطط

يمكنكم تجاوز الأدوار من خلال تسميتها عند إنشاء مخطط. وهنا يصبح primary بلون فيروزي مخصص.

يُحدَّث تلقائيًا كل ما يقرأ colorScheme.primary.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

لماذا نستخدم السمة؟

يجعل تثبيت الألوان في كل مكان إعادة التصميم أمرًا شاقًا. أما القراءة من MaterialTheme فتعني أن تغييرًا واحدًا يحدّث التطبيق بأكمله.

كما يساعد ذلك في إمكانية الوصول، إذ تحافظ ألوان on على تباين جيد.

Surface والخلفية

يطبّق composable Surface لون خلفية السمة وارتفاعًا خلف محتواه.

إنها طريقة واضحة لمنح بطاقة أو شاشة لون الأساس المناسب.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

اختبار سريع

اختبروا معرفتكم بالألوان وتنسيق السمات.

مراجعة

تعلّمتم استخدام فئة Color، والألوان السداسية المخصصة، وmodifier الخاص بـ background. ويجمع MaterialTheme كلًا من colorScheme وtypography والأشكال.

تحافظ قراءة أدوار مثل primary وonPrimary على التباين والاتساق، كما تدعم المخططات الفاتحة والداكنة.

أحسنتم العمل على إكمال دورة التنسيق!

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

هل درس «الألوان وMaterialTheme» مجاني؟

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

ماذا ستتعلم في «الألوان وMaterialTheme»؟

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

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

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

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

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

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

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

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

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