قدم تصميم المواد 2.0 العديد من المفاهيم الجديدة. أحدها هو الاهتمام الخاص بالأشكال الهندسية لعناصر الواجهة. وهناك طريقة سهلة لعمل أشكال مخصصة جميلة. يطلق عليه MaterialShapeDrawable. دعونا نرى مدى فائدة وسهولة الاستخدام.
هناك عدة طرق لإضافة عناصر رسومية إلى شاشة تطبيق Android. الطريقة الأكثر وضوحًا هي استيراد الصور النقطية بتنسيق webp أو png. خيار آخر هو استخدام VectorDrawable ، والذي يسمح لك بتمديد الصورة إلى الحجم الذي تحتاجه. طريقة أخرى لإضافة رسومات إلى الشاشة هي استخدام ShapeDrawable. هذا الأخير هو أسهل طريقة لإضافة خلفية بسيطة أو حتى إنشاء رمز. الصور التي تم إنشاؤها باستخدام ShapeDrawable مستقلة عن كثافة البكسل على الشاشة. يمكن وصفها في ملف xml ، وتكون جزءًا من مورد رسومي آخر (على سبيل المثال ، StateListDrawable) وهي موجودة في Android SDK ، بدءًا من API v.1.
لتغيير مظهر الشكل ، يمكننا تغيير العديد من خصائص ShapeDrawable: اسم الشكل ولون التعبئة (أو التدرج) ولون حدود الشكل. بالنسبة إلى المستطيلات ، يمكنك أيضًا تعيين نصف قطر الزوايا. باستخدام هذه الخصائص ، يمكنك إنشاء رسومات سيتم استخدامها كصور فردية على الشاشة ، أو فواصل ، أو خلفيات زر ، أو لأي غرض آخر. إذا كان التطبيق يستخدم API v.21 + و ShapeDrawable كخلفية للعناصر ذات الارتفاع ، فإن الظل تحت هذه العناصر سيكون أيضًا بالشكل الصحيح:
ShapeDrawable هي أداة سهلة الاستخدام تؤدي وظيفتها بشكل جيد دائمًا تقريبًا ، ولكن مع ظهور Material Design 2.0 ، يحتاج المطورون إلى شيء أكثر مرونة. يشجع نظام التصميم الجديد على استخدام أشكال مختلفة للتأكيد على معناها وحالتها وأسلوب التطبيق الفردي. لقد كتبت أعلاه أن هناك عدة طرق للقيام بما هو مطلوب ، ولكن أبسطها لم يعد مناسبًا. هل يعني هذا أننا بحاجة إلى البدء في استخدام الرسومات المتجهة وبالتالي نفقد القدرة على إنشاء "ظلال" مجانية لعناصر الواجهة ذات الارتفاع؟ أو هل يستحق الأمر العودة إلى استخدام الصور النقطية وإنشاء موارد رسومية لستة كثافة بكسل ممكنة على الشاشة؟ لحسن الحظ ، مع ظهور مادة التصميم 2.0 ، ظهرت مكتبة مكونات جديدة تمامًا.
تم إنشاء هذه المكتبة لتوحيد مظهر وسلوك واجهة مستخدم Material Design على جميع إصدارات Android والأنظمة الأساسية الأخرى (هناك إصدارات من هذه المكتبة لنظام التشغيل iOS والويب و Flutter). تطبق مكتبة المكونات العديد من الميزات لتصميم المواد الجديد. على سبيل المثال ، يتضمن مكون BottomAppBar مع السلوك المتوقع. من بين المكونات والمرافق الأخرى ، هناك فئة MaterialShapeDrawable. في رأيي ، هذه أداة ضرورية لحل المهام التي يطرحها نظام التصميم الجديد للمطورين.
على الرغم من أن MaterialShapeDrawable لا يزال يعتبر تجريبيًا في إصدار المكتبة 1.0.0 ، يمكن استخدامه لإنشاء تأثيرات رائعة في التطبيق. في فئة MaterialShapeDrawable ، يمكنك وصف شكل عن طريق تحديد مظهر أضلاعه وكل من زواياه. يمكن التحكم في هذه الخصائص المحددة عن طريق interpolator ، مما يسمح لهم بتحريك.
لإنشاء MaterialShapeDrawable الخاص بك ، يمكنك استخدام المُنشئ الذي تحتاج إليه لتمرير كائن من النوع ShapePathModel في المعلمات. يقوم بتخزين معلومات حول كل جانب وكل زاوية من الشكل في فئتي EdgeTreatment و CornerTreatment ، على التوالي (هناك دائمًا أربعة جوانب وزوايا بالضبط ، ولكن هذا لا يتداخل مع وصف أي شكل تقريبًا بمساعدتهم). يمكنك تحديد الأوصاف بشكل شخصي لكل جانب وزاوية ، أو تعيينها مرة واحدة للرقم بأكمله عن طريق استدعاء طريقة واحدة.
تحتوي المكتبة بالفعل على العديد من الأوصاف الجاهزة للاستخدام لمعالجة الجوانب والزوايا ، والتي تشمل معظم الابتكارات المتعلقة بشكل المكونات المقدمة في Material Design 2.0. موجود بالفعل: RoundedCornerTreatment - للزوايا المستديرة ، CutCornerTreatment - للزاوية المقطوعة ، TriangleEdgeTreatment - لقطع أو إضافة مثلث إلى الجانب. لإثبات عملهم ، هناك مثال بسيط:
val shapePathModel = ShapePathModel().apply { setAllCorners(CutCornerTreatment(dip(5).toFloat())) setAllEdges(TriangleEdgeTreatment(dip(5).toFloat(), true)) } val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply { setTint(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)) paintStyle = Paint.Style.FILL } textView.background = backgroundDrawable
سيبدو هذا:
بالطبع ، يمكنك ببساطة إنشاء أوصافك الخاصة للوجوه والزوايا. يتم تعيين الشكل دائمًا للعنصر الأيسر العلوي ، وسوف يقوم Drawable بعمليات التدوير / الانعكاس للحصول على الشكل النهائي. هناك مثال صغير لتوضيح هذا:
class CutoutCornersTreatment(val size: Float) : CornerTreatment() { override fun getCornerPath(angle: Float, interpolation: Float, shapePath: ShapePath) { shapePath.reset(0.0f, size * interpolation) shapePath.lineTo(size * interpolation, size * interpolation) shapePath.lineTo(size * interpolation, 0f) } } class CurvedEdgeTreatment(val size: Float) : EdgeTreatment() { override fun getEdgePath(length: Float, interpolation: Float, shapePath: ShapePath) { shapePath.quadToPoint(length / 2f, size * interpolation, length, 0f) } }
إذا تم استخدام MaterialShapeDrawable كخلفية ، فستكون النتيجة كما يلي:
تحتوي حزمة شريط التطبيق السفلي لمكتبة مكونات المواد الجديدة على BottomAppBarTopEdgeTreatment. يصف الفصل في BottomAppBar لزر FloatingActionButton. يمكن تحريك جانبه العلوي اعتمادًا على موضع الزر وحجمه. أنصحك بقراءة كود هذه الفئات لكي ترى بأم عينيك أن MaterialShapeDrawable مرن جدًا للاستخدام ويمكن تقريبًا تنفيذ كل شيء به.
إذا تحدثنا عن ShapeDrawable المعتاد ، فهناك تفاصيل أخرى جديرة بالذكر - القدرة على إلقاء ظل الشكل المقابل للكفاف. نظرًا لأنه يمكنك الآن إنشاء مخططات تفصيلية لأشكال غير معتادة للغاية باستخدام MaterialShapeDrawable ، فسيكون من المخيب للآمال عدم جعل شكل الظل إلى شكل الصورة ، خاصة عندما يمكن رؤية هذه الظلال في كل مكان في Matarial Design 2.0. يحسب MaterialShapeDrawable أيضًا مظهر الظل. باستخدام خاصية shadowEnabled ، يمكنك تمكين الظل ، الذي سيتبع بالضبط محيط الشكل نفسه ، ومن الممكن أيضًا تحديد نصف قطر الظل وارتفاعه ولونه. تبدو جيدة جدا لتكون حقيقية لسوء الحظ ، نعم. إذا كنت تستخدم ظل MaterialShapeDrawable ، فستحصل على ظل عادي (يتم رسمه بواسطة طريقة setShadowLayer () لفئة الرسام ، والتي تم إنشاؤها لرسم الظلال على النص) ، ولكن يتم اقتصاصها إلى حدود مكون واجهة المستخدم التي يتم عرض النتيجة:
ضع في اعتبارك أن MaterialShapeDrawable لا يزال يعتبر تجريبيًا ، مثل API الخاص به ، وقد يتغير في المستقبل. من الجدير بالذكر أيضًا أن كود مكتبة مكونات المواد الجديدة مفتوح ، لذا فإن إنشاء تذاكر في أداة تتبع الأخطاء أو حتى سحب الطلبات بإصلاح المشكلات المعروفة أمر مرحب به للغاية. في الواقع ، عندما تقرأ هذه السطور ، فإن واجهة برمجة التطبيقات تختلف بالفعل قليلاً في الفرع الرئيسي للمكتبة (على سبيل المثال ، سيتم استخدام ShapeAppearanceModel بدلاً من ShapePathModel) ، مما يشير إلى العمل النشط. قد تكون إحدى الميزات الواعدة في الإصدار التالي هي القدرة على تحديد الجوانب / الزوايا الافتراضية لموضوع التطبيق بالكامل. يمكنك معرفة المزيد عن هذا من الوثائق الرسمية أو مصادر المكتبة.
من المترجم:
من الرائع أن هناك أدوات تضيف ميزات جديدة إلى ShapeDrawable المعتاد وتساعد على إنشاء أبسط الرسومات. هذا يسمح للمطور بعدم جذب المصمم لكل شيء صغير ، ولكن لحل المشكلة بنفسه ، ويتطلب وقتًا أقل بكثير. نحن ننتظر الإصدارات التالية من مكتبة مكونات المواد لمحاولة تطبيق طرق جديدة لحل المشكلات الحالية.