Android Academy · درس

معاينة واجهة المستخدم

استخدم @Preview للتكرار بسرعة

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

لماذا تُفيد المعاينات

يستغرق إنشاء تطبيق وتشغيله على جهاز وقتًا. يوفّر Compose طريقة أسرع لرؤية واجهة المستخدم، وهي المعاينة.

تعرض المعاينة عنصرًا قابلًا للتركيب مباشرةً داخل Android Studio، حتى تتمكن من التحقق من تخطيطك دون تشغيل التطبيق بالكامل على محاكي أو هاتف.

التعليق التوضيحي @Preview

لمعاينة عنصر قابل للتركيب، أنشئ دالة منفصلة ووسمها باستخدام @Preview. سيعرض Android Studio ناتجها المعروض في لوحة التصميم.

دالة المعاينة نفسها قابلة للتركيب أيضًا، ولذلك تحمل كلًا من @Preview و@Composable.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

لا تقبل المعاينات أي معاملات

يجب ألا تقبل دالة المعاينة أي معاملات. يحتاج Compose إلى استدعائها بنفسه، ولذلك لا يمكنه تزويدها بالوسائط.

لهذا السبب تنشئ دالة تغليف: تستدعي المعاينة عنصرَك القابلَ للتركيب الفعلي، وتمرّر إليه بيانات نموذجية لعرضها.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

تسمية دوال المعاينة

من الاصطلاحات الشائعة تسمية المعاينة باسم العنصر القابل للتركيب الذي تعرضه، مع إنهاء الاسم بـ Preview. بالنسبة إلى Greeting، ستكتب GreetingPreview.

يوضح ذلك المعاينة التابعة لكل عنصر قابل للتركيب، خصوصًا مع ازدياد حجم الملف.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

منح المعاينة اسمًا

يمكنك تسمية المعاينة باستخدام المعامل name. ويظهر هذا العنوان فوق المعاينة المعروضة في Android Studio.

تجعل الأسماء المفيدة التمييز بين المعاينات المتعددة سهلًا بنظرة واحدة.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

إظهار الخلفية

قد تُعرض المعاينة افتراضيًا فوق خلفية شفافة. عيّن showBackground = true لرسم سطح مصمت خلف العنصر القابل للتركيب.

يسهّل ذلك كثيرًا تقييم التباعد والألوان في لوحة التصميم.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

معاينات متعددة في الوقت نفسه

يمكنك إضافة عدة تعليقات توضيحية @Preview إلى دالة واحدة، أو كتابة عدة دوال للمعاينة. وتُعرض كل واحدة على حدة.

يفيد ذلك في التحقق من واجهة المستخدم نفسها باستخدام بيانات نموذجية مختلفة، مثل اسم قصير واسم طويل.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

معاينة أحجام مختلفة

تحدّد المعاملات widthDp وheightDp حجم لوحة المعاينة. يتيح لك ذلك اختبار مظهر التخطيط في مساحة صغيرة أو كبيرة.

يساعد تحديد حجم المعاينة على اكتشاف النص الذي يلتف بطريقة غير ملائمة أو المحتوى الذي يتجاوز المساحة.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

معاينات الوضع الداكن

يمكنك معاينة مظهر واجهة المستخدم في السمة الداكنة باستخدام المعامل uiMode مع ضبطه على الوضع الليلي. ويساعد ذلك على اكتشاف الألوان التي تبدو غير مناسبة على الخلفيات الداكنة.

يوفّر التحقق من المعاينتين الفاتحة والداكنة مبكرًا عليك المفاجآت لاحقًا.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

المعاينات التفاعلية والمباشرة

يمكن لـ Android Studio تحديث المعاينة أثناء الكتابة، فتظهر التغييرات شبه فورية. ويتوفر أيضًا وضع تفاعلي يتيح النقر والتنقل دون إجراء عملية بناء كاملة.

لا تحل المعاينات محل تشغيل التطبيق، لكنها تجعل تصميم الشاشات أسرع بكثير.

المعاينات للتصحيح فقط

دوال المعاينة أدوات مخصصة للتطوير. فهي ليست جزءًا من التطبيق الذي ستنشره، ولن تظهر للمستخدمين.

لذلك يمكنك إضافة العدد الذي تريده من المعاينات باستخدام بيانات نموذجية. فهي تؤثر فقط فيما تراه داخل بيئة التطوير المتكاملة.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

اختبار سريع

لنراجع قاعدة أساسية تتعلق بدوال المعاينة.

مراجعة

تعلّمت أن @Preview يعرض عنصرًا قابلًا للتركيب داخل Android Studio دون الحاجة إلى جهاز. ولا تقبل دوال المعاينة أي معاملات، لذا فهي تغلّف العنصر القابل للتركيب الفعلي وتزوّده ببيانات نموذجية.

تشمل الخيارات المفيدة name وshowBackground وwidthDp وheightDp وuiMode للوضع الداكن. المعاينات أدوات مخصصة للتصحيح فقط. بعد ذلك، ستجمع كل ما تعلمته لإنشاء بطاقة ملف شخصي فعلية.

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

هل درس «معاينة واجهة المستخدم» مجاني؟

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

ماذا ستتعلم في «معاينة واجهة المستخدم»؟

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

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

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

كم من الوقت يستغرق درس «معاينة واجهة المستخدم»؟

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

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

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

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

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