مكونات الهندسة المعمارية رهيبة باستخدام Kotlin - الرموز التطبيقات التي هي على التكيف

نافذة تكوين رمز التكيف في Android Studio

يجب أن تكون قد سمعت جميعًا عن Kotlin و Dagger 2 و Android Architecture Components و Retrofit 2 والرموز التكيفية والعديد من الميزات والتطورات الرائعة الأخرى التي تحدث في Android. في الآونة الأخيرة ، أطلقت جوجل معاينة Android P Developer أيضًا. لقد قرأت الكثير عن هذه الموضوعات الساخنة لفترة طويلة وحاولت استخدامها في تطبيقاتي أيضًا. لذا فهذه هي محاولتي الأولى لتعلم شيء جديد وتبادل معرفتي مرة أخرى إلى المجتمع نفسه.
سأكتب سلسلة أركز فيها وأثبت بشكل أساسي فوائد هذه الأكوام التقنية المذكورة أعلاه تمامًا من خلال تطوير تطبيق أندرويد بسيط يستند إلى Kotlin ، حيث يمكننا البحث عن مستخدمي GitHub باستخدام واجهة برمجة تطبيقات بحث GitHub.

شعور بالحماس؟ قفز فقط على. ستكون رحلة ممتعة.

يحتوي

  1. الرموز التطبيق التي هي على التكيف
  2. حقن التبعيات باستخدام خنجر 2
  3. صنع بعض الغرفة
  4. سيستمر إضافة المزيد من النقاط في المدونات المستقبلية لهذه السلسلة

الرموز التطبيق التي هي على التكيف

في Google I / O’17 للعام الماضي ، قدمت Google أيقونات المشغِّل التكيفي في نظام التشغيل Android Oreo (API مستوى 26). طريقة جديدة وأنيقة وأنيقة لتصميم شعار أي تطبيق. باستخدام هذا التنسيق الجديد ، يمكن عرض رمز قاذفة تطبيقنا في مجموعة متنوعة من الأشكال على مختلف مصنعي المعدات الأصلية ، مما يعني أن أيقونة التكيف يمكن أن تعرض أيقونة على شكل دائري على جهاز واحد ورمز على شكل مربع على جهاز آخر.

لذلك يمكن أن يختلف شكل رمز تشغيل تطبيقنا من:

رمز على شكل دائرة التكيفرمز على شكل مربع التكيفتقريب رمز مربع على شكل تكيفSquaricle على شكل رمز التكيف

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

مبادئ

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

كانت أبعاد رموز المشغِّل بحجم 48 × 48 نقطة في إصدار Android 7.1 والإصدارات السابقة. ولكن وفقًا للوثائق الرسمية على أيقونة Adaptive من Google ، يجب أن تتبع التطبيقات مجموعة محددة من الإرشادات لإنشاء كل من طبقات أيقونة التكيف ، على سبيل المثال:

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

يا! هناك شيء آخر أحتاج إلى قوله ، يمكن أن تكون طبقات المقدمة والخلفية ذات تنسيق .svg أو .png. سأشارك رابطًا في قسم المراجع في هذه المدونة ، حيث تعلمت من خلالها كيفية إنشاء طبقة مقدمة من رمز المشغِّل.

مقاربة

هناك طريقتان لإنشاء أيقونة Adaptive ، أي

  1. استخدام ميزة Image Asset في Android Studio نفسها (واحدة سهلة ومباشرة للغاية).
  2. إنشاء ملف XML نوع بنفسك.

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

يجب أن يحتوي تطبيقك على أهداف dkversion كـ 26 وما فوق.

النهج الأول

إنها طريقة أسهل ، فقط باتباع الخطوات التالية:

  1. انقر بزر الماوس الأيمن على مجلد res وحدد New> Image Asset. سيبدو مثل هذا:

2. الآن بعد الخطوة 1 ، سنكون قادرين على رؤية نافذة تكوين أصول الصورة مثل هذا:

هناك العديد من الخيارات المتاحة حيث يمكننا أن نرى جميعًا في نافذة التكوين هذه. سنلقي نظرة على الخيارات المطلوبة لإنشاء أيقونة Adaptive في خطوات أخرى.

3- في هذه الخطوة ، هناك بعض الخيارات التي سنتركها كما هي ، وهي:

  • سنترك خيار نوع الأيقونة كما هو محدد برموز المشغل الافتراضية (Adaptive and Legacy).
  • تتم كتابة رمز اسم المشغل باسم ic_launcher ، ويمكنك تغيير الاسم وفقًا لمتطلباتك.
  • يوجد زران للتبديل متاحان في نافذة التكوين هذه وهما إظهار المنطقة الآمنة (للتبديل بين رؤية المنطقة الآمنة في نافذة معاينة أيقونة المشغل) و إظهار الشبكة (لتبديل رؤية الأشكال الرئيسية التي تساعد في ضبط تناسق نسبة الرمز) .
  • هناك ثلاث علامات تبويب تُسمى طبقة المقدمة وطبقة الخلفية وراثة متوفرة في نافذة التكوين. سنبحث عنهم في الخطوات التالية.

4. بعد اتباع الخطوة 3 ، سننتقل إلى الأمام لإضافة ملف background.svg أو background.png لدينا. لقد قمتُ بإنشاء ملف background.png ذي البعد 432 × 432 بكسل باستخدام GIMP v2.8 ، يبدو كما يلي:

background.png (432 × 432 بكسل)

مجرد تقديم موجز لقسم طبقة الخلفية: يحتوي على حقول مثل:

  • الاسم: اضبط اسم طبقة الخلفية وفقًا لمتطلباتك.
  • نوع الأصل: حدد نوع الصورة بينما نستخدم ملف .svg أو .png لطبقة الخلفية.
  • المسار: حدد المسار المناسب لملف الخلفية الخاص بك.

بعد إضافة ملف الخلفية إلى طبقة الخلفية في نافذة تكوين الصورة ، سنرى التغييرات مثل هذا:

رمز المشغل بعد اختيار صورة الخلفية

5. بعد الخطوة 4 ، سنختار علامة تبويب طبقة المقدمة ونضيف ملف foreground.svg أو foreground.png والذي يكون له أبعاد أخرى مثل ملف الخلفية. لقد قمت بإنشاء ملف المقدمة الخاص بي باستخدام GIMP v2.8 نفسه باتباع الإرشادات المذكورة أعلاه في هذه المقالة. أيضًا ، سأشارك رابطًا في قسم الموارد أدناه حول كيفية إنشاء شعار نوع نص بسيط بظل طويل ، وفي الوقت نفسه يبدو الشعار كما يلي:

الأمامية. png (432 × 432 بكسل)

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

رمز المشغل بعد تحديد الصورة الأمامية

6. ستكون هذه الخطوة هي الخطوة الثانية الأخيرة ، وسنختار علامة التبويب القديمة وهناك لدينا ثلاثة خيارات:

أيقونة قديمة وخيارات أيقونة أخرى

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

7. بعد اتباع جميع الخطوات ، سينشئ Android Studio جميع ملفات الإخراج في مجلد mipmap ويفصل بين جميع ملفات dpi بدقة. دعنا نلقي نظرة على نافذة الإخراج هذه:

نافذة نظرة عامة على ملف الإخراج

كما نرى ، يوجد ملفان XML لرمز المشغل ، أحدهما للرمز العادي والآخر للرمز الدائري ، بهما علامات ويحددان درجتي الخلفية والخلفية بشكل منفصل في mipmap- مجلد anydpi-v26. لذلك بعد التحقق من جميع المجلدات والملفات ، سنضغط في النهاية على "إنهاء" و "فويلا"! أيقونة التكيف لدينا جاهزة.

دعنا فقط نرى سحر أيقونة التكيف لدينا:

أيقونة تطبيق GSearch للتكيف

هذا كل شيء عن أيقونة التكيف. يمكنك العثور على الكود المصدري هنا:

في الجزء الثاني من هذه السلسلة ، سأشرح كيفية عمل Dependency Injection باستخدام Dagger وعملية دمجها في هذا التطبيق. ترقب…

مصادر

هذه هي الموارد التي اتبعتها لتنفيذ أيقونة التكيف. يمكنك جميعًا إلقاء نظرة على هذه الموارد أيضًا.

  1. تصميم أيقونة التكيف من قبل نيك جزار
  2. الرموز التكيفية وأكثر - بواسطة StylingAndroid
  3. لاختبار أيقونة التكيف
  4. كيفية جعل الظل طويل مسطح في الأعرج

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

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

تابعني على تويتر: