الجزء الأول من تطبيق Android: شاشة البداية باستخدام الأجزاء / Kotlin: 5 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:37

مرحبا مجددا،

على الأرجح لديك بعض الوقت "المجاني" في المنزل بسبب COVID19 ويمكنك العودة للتحقق من الموضوعات التي كنت تريد تعلمها في الماضي.

يعد تطوير تطبيقات Android أحدها بالتأكيد بالنسبة لي وقد قررت قبل بضعة أسابيع أن أجربه مرة أخرى.

من المؤكد أن البرمجة في Kotlin تقلل من جهد الترميز وتساعد على تحقيق النتائج في وقت قصير جدًا. إنه حقا رائع!

في هذه السلسلة التعليمية ، سأشرح كيفية تطوير أداة تعقب نقاط التنس. يمكن استخدام هذا التطبيق عندما تلعب مع الأصدقاء و / أو العائلة (يمكنك إعطاء الجهاز اللوحي لطفلك وإبقائه مشغولاً:)). يعتمد هذا التطبيق على مثال Kotlin Counter التالي.

يحتوي البرنامج التعليمي على الأجزاء التالية:

الجزء 1: شاشة البداية باستخدام الأجزاء (نحن هنا الآن)

الجزء 2: تكوين المطابقة - الخصائص

الجزء 3: تعقب نتائج المباراة

الفكرة الرئيسية هي تقسيم التطبيق إلى 3 شاشات مختلفة ، كل واحدة منها ستتصل بالشاشة التالية ، بمجرد اكتمالها أو عندما يضغط المستخدم على الزر المعني.

في هذا الجزء الأول ، سأشرح كيفية إنشاء شاشة مقدمة -> تحقق من الفيديو أعلاه.

اللوازم

ميزات Android المستخدمة في هذا الجزء:

• فتات
• حيوية
• اهتزاز
• مشغل الوسائط
• مستمعون

أدوات المطلوبة:

• بيئة تطوير أندرويد
• Kotlin 1.3.61.0
• مستوى API 28

الأصول المطلوبة

ملف صوتي صفير

الخطوة 1: تصميم تجربة المستخدم

دعنا نشرح ميزات شاشة المقدمة الخاصة بنا.

1. نريد ملء الشاشة باللون الأبيض
2. نريد أن تكون الشاشة دائمًا في الوضع الأفقي
3. نريد لون نص الشعار باللون الرمادي
4. نريد لون الكرة لدينا بدرجات اللون الأخضر
5. نريد أن يتلاشى نص الشعار الخاص بنا
6. نريد كرة تنس تتحرك في الشاشة (كرة مرتدة).
7. نريد تشغيل صوت في كل مرة تلمس فيها الكرة سطحًا
8. نريد تشغيل اهتزاز الهاتف عند تشغيل الصوت
9. نريد أن تكون مدة المقدمة أقل من 4 ثوانٍ.

الخطوة 2: مدير التجزئة و 3 شاشات

دعنا نتذكر الفكرة الرئيسية لتطبيقنا ، نريد أن يكون لدينا 3 شاشات (مقدمة وخصائص ونقاط المباراة). لهذا سوف نستخدم شظايا. لذلك نحن بحاجة إلى 3 منهم واحد لكل شاشة. الرجوع إلى مقتطف الرمز الأول.

في القسم الثاني ، يمكننا إيجاد الطريقة التي نسمي بها الجزء الأول. جزء Splash هو الجزء الذي سيتم استخدامه في المقدمة.

الخطوة 3: تخطيط شاشة التطبيق والمقدمة

• لإصلاح موضع الشاشة وتجاهل أي دوران للهاتف ، نحتاج إلى إضافة الكود التالي Picture 1 في AndroidManifest.xml.
• لإزالة Action Bar من جميع الشاشات ، نحتاج إلى إضافة الكود التالي Picture 2 في styles.xml
• من أجل دفع ملء الشاشة في جميع الشاشات ، نحتاج إلى تعيين بعض العلامات كما في الصورة 3 بطريقتين مختلفتين. Oncreate () و onWindowFocusChanged.

الخطوة 4: تحديد الشعار والكرة Syles

• حددنا قبل النص باللون الرمادي ، ويتم ذلك ضمن ملف Styles.xml. الرجوع إلى الصورة 1.
• عرّفنا أيضًا أن الكرة يجب أن تكون باللون الأخضر ، لذلك قمنا بإنشاء ball.xml تحت مجلد قابل للرسم. تحقق من الصورة 2

الخطوة 5: وصف الرسوم المتحركة

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

فكرة الرسوم المتحركة هي كما يلي:

• بعد إنشاء الجزء ، يتم إنشاء شعار النص وبدء تشغيله
• بمجرد اكتمال الرسم المتحرك لشعار النص ، يتم استدعاء أول حركة قطع مكافئ لكرة التنس
• بمجرد اكتمال الحركة المكافئة الأولى ، يتم تشغيل الصوت ويهتز الهاتف.. ويتم استدعاء الحركة المكافئة التالية
• بمجرد اكتمال آخر حركة قطع مكافئ وتنفيذ الصوت / الاهتزاز ، نصل إلى نقطة الاتصال بشاشتنا الثانية.

ملاحظة: لم أقوم بإنشاء فئة تجريدية للرسوم المتحركة ، لأنني أردت الاحتفاظ بالشفرة ثابتة … أسهل في المتابعة بالنسبة لي على الأقل:)

سأقوم بنشر الجزء الثاني من السلسلة في الأيام القادمة ، تابعوني إذا أعجبك هذا الجزء وإذا لم يعجبك ، فسيسعدني الحصول على تعليقاتك.