Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

بناء التطبيق الموسيقى مع قالب التطبيق انرويد

by
Difficulty:BeginnerLength:ShortLanguages:

Arabic (العربية/عربي) translation by ahmedmetwaly (you can also view the original English article)

Final product image
What You'll Be Creating

تطوير واجهة مستخدم جميلة لتطبيقات الاندرويد يمكن أن يكون مسعى تستغرق وقتا طويلا. في ما يلي بعض الخطوات التي نمر بها عادة لتصميم تطبيق:

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

وهذا هو فقط غيض من فيض تصميم التطبيق هو الكثير من العمل! كل هذه المهام يمكن أن تكون مضيعة للوقت، وخاصة إذا كنت الوحيد الذي يقومون به.

ومع ذلك، في هذا السوق التطبيق تنافسية للغاية بالفعل، عليك أن تتحرك بسرعة وتأكد من التطبيق الخاص بك لديه واجهة مستخدم جميلة (بالإضافة إلى التأكد من التعليمات البرمجية الخاصة بك خالية من الأخطاء) وإلا سوف يذهب المستخدمين وتثبيت تطبيقات المنافسين الخاص بك.

لحسن الحظ، كوديكانيون يقدم مجموعة واسعة من قوالب تطبيق جميلة لبدء مشروع التطبيق المحمول الخاص بك. في هذا البرنامج التعليمي، سنساعدك على بدء استخدام نموذج واحد من هذا القبيل، يسمى نموذج واجهة مستخدم المادة أندرويد 3.0. ونحن نذهب لبناء التطبيق الموسيقى تصميم المواد باستخدام هذا القالب وأيضا استكشاف بعض وظائفها المفيدة.

إذا كانت الموسيقي هي الغذاء من الحب ، واللعب علي. --وليام شكسبير

شروط

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

1. الحصول على قالب

للبدء في بناء التطبيق الموسيقى، ستحتاج إلى حساب مع إنفاتو السوق. لذلك الاشتراك إذا لم يكن لديك بالفعل، وشراء قالب أوي المواد الروبوت 3.0 على كوديكانيون. سترى كم العمل الذي يوفر لك!

Envato Android Material UI Template 30

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

2. بفك الملف

الآن انتقل إلى المجلد حيث تم تحميل ملف زيب وفك ضغط أو استخراجه.

Folders available in root folder

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

3. استيراد قالب

حرر أندرويد ستوديو 3 وحدد فيل> نيو> إيمبورت بروجيكت ...

تأكد من الانتقال إلى المجلد حيث يوجد القالب المستخرج وحدد قالب تطبيق الموسيقى لاستيراده.

بعد استيراد ناجحة، سوف الحوار تحديث البرنامج المساعد اندرويد غرادل يطفو على السطح. فمن المستحسن النقر على زر تحديث للسماح ستوديو الاندرويد لترقية المساعد غرادل إلى أحدث إصدار (3.0.0) بالنسبة لنا.

Update Gradle plugin dialog

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

Android Studio logcat error

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

Project Gradle file

داخل ملف build.gradle نفسه، قم أيضا بما يلي:

  • قم بتحديث الإصدار المضمن إلى ' 26.0.2 '.
  • قم بتعيين النسخة الخاصة والإصدار إلى 26.
  • تاكد من تحديث التحف الاندرويدأيضا.

تتوفر هذه التحف الاندرويدفي مستودع مافين جوجل. لذا قم بزيارة ملف build.gradle الخاص بمشروعك لتضمينه.

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

لاحظ أن هذا القالب يستخدم قطعة أثرية بيكاسو لتحميل وعرض الصور. يمكنك مبادلة بسهولة لإنزلاق بدلا من ذلك إذا كنت تريد.

الآن، إذا قمت بتشغيل المشروع، سوف تحصل على خطأ عرض على الاندرويد ستوديو لوغكات.

Project error displayed on Android Studio logcat

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

Project methods in Toolsjava

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

Project files structure in Android Studio

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

Project colorsxml resource folder

4. اختبار التطبيق

وأخيرا ، يمكنك تشغيل التطبيق!

Tutorial project result

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

لاحظ ان هذا القالب لا يقوم بسرد الأغاني المتوفرة علي الجهاز المضيف. بدلا من ذلك، فإنه يأتي مع البيانات الخاصة بها وهمية (لأغراض العرض التوضيحي). لذلك سوف تحتاج إلى رمز وظيفة لإدراج الأغاني على الجهاز المضيف. يقع مولد فئة البيانات وهمية في /data/Constant.java.

Project Constantjava

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

Music app showing detail of the current song playing

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

Music app showing a list of albums in current tab

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

Music app showing a list of artists in current tab

ويؤدي التمرير سريعا إلى علامة التبويب الأخيرة إلى عرض قوائم التشغيل. يمكنك هنا إضافة قائمة تشغيل جديدة بالنقر على قائمة شريط الأدوات "+".

Music app showing list of playlists in current tab

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

الاستنتاج

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

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

إذا كنت ترغب في استكشاف المزيد من تطبيقات دائرة الرقابة الداخلية والقوالب، ثم تحقق من بعض من مشاركاتنا الأخرى على كوديكانيون القوالب التطبيق!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.