Jetpack Compose Academy · درس

بناء حلقة تقدم مباشرة

اجمع بين اللوحة والحالة في عنصر واجهة

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

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

الهدف

حان وقت بناء شيء حقيقي: حلقة تقدم تمتلئ مع ازدياد قيمة ما. وستجمعون فيها بين الرسم على اللوحة وحالة Compose الحية.

قوس لا دائرة

الحلقة في الواقع قوس. نرسم دائرة كاملة باهتة كمسار، ثم نضع فوقها قوسًا ساطعًا يوضح مقدار التقدم حتى الآن.

تخزين التقدم

خزّنوا القيمة في state كي يُعاد رسم الحلقة عند تغيّرها. وتتحول قيمة عائمة من 0f إلى 1f بسلاسة إلى نطاق من الصفر حتى الامتلاء الكامل.

var progress by remember { mutableStateOf(0.25f) }

رسم المسار

لوّنوا أولًا حلقة الخلفية باستخدام drawCircle مع Stroke. يوضح المسار الرمادي الناعم المسار الكامل الذي سيملؤه التقدم.

drawCircle(
    color = Color.LightGray,
    style = Stroke(width = 24f)
)

تعرّفوا على drawArc

البطل هنا هو drawArc. فهو يرسم جزءًا من دائرة يُحدَّد بزاوية بداية وزاوية مسح، وكلتاهما مقاستان بالدرجات.

drawArc(
    color = Color.Blue,
    startAngle = -90f,
    sweepAngle = 90f,
    useCenter = false
)

البدء من الأعلى

تشير الزاوية 0 إلى اليمين، لذلك نستخدم startAngle بقيمة -90f للبدء من الأعلى. وهذا يبدو طبيعيًا لمؤشر التقدم.

المسح بحسب التقدم

الدائرة الكاملة تساوي 360 درجة، لذا فإن sweepAngle يساوي التقدم مضروبًا في 360. وعند 0.5f يغطي القوس نصف الحلقة تمامًا.

val sweep = progress * 360f
drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false)

يبقى useCenter بقيمة false

أبقوا useCenter بقيمة false كي ترسموا جزءًا من حلقة، لا قطاعًا ممتلئًا من دائرة. ومع نمط Stroke، يصبح الناتج شريطًا مستديرًا ونظيفًا.

drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(width = 24f, cap = StrokeCap.Round))

تحريك القيمة

لفّوا القيمة باستخدام animateFloatAsState كي تنساب التغييرات بدلًا من أن تقفز. وستنمو الحلقة بسلاسة نحو كل هدف جديد.

val animated by animateFloatAsState(targetValue = progress)

إضافة تدرج

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

drawArc(brush = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)), startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(24f))

وضع التسمية

ضعوا Text يعرض النسبة المئوية داخل Box مركّز فوق Canvas. والآن ستظهر الأداة كعنصر تحكم مكتمل ومتقن.

اختبار سريع

كيف تحوّلون قيمة تقدم من 0f إلى 1f إلى زاوية مسح القوس؟

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

مراجعة

بنيتم حلقة حية: دائرة مسار، وdrawArc يُمسح بمقدار التقدم مضروبًا في 360، وحالة متحركة، وحدًا متدرجًا. عمل رائع! 🌀

البدء مجانًا

تعلم 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 منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «بناء حلقة تقدم مباشرة»؟

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

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

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

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

← العودة إلى Jetpack Compose Academy