كيفية استخدام التحولات المادية في المعاملات شظية

تغيرت أنماط تصميم واجهة المستخدم الخاصة بنظام Android بشكل كبير منذ وصول تصميم المواد. كان من المعتاد أن تكون تطبيقات Android قبيحة ، متأخرة عن مسار قرارات تصميم iOS. تغيرت الأشياء مع Lollipop and Material Design ، وأصبح Android هو الشيء الخاص به ، ولم يعد ينظر إلى المنافسة. تلعب تحولات المواد دورًا كبيرًا في هذا التغيير ، ولكن من المفارقات أنها تم تقديمها لأول مرة في KitKat ، قبل قليل من تصميم المواد بالكامل في Lollipop.

القصد من هذه المقالة هو إظهار كيفية استخدام الانتقالات في نطاق معاملات التجزؤ وبقيام ذلك بإنشاء انتقالات ذات مغزى تعمل على تحسين UX لتطبيقنا.

نطاق

لدينا هذه الشظايا 2:

جزء 1جزء 2

سيتم عرض Fragment1 على الشاشة عند بدء تشغيل التطبيق وسيتم تحميل Fragment2 بعد فترة وجيزة دون الحاجة إلى إجراء من المستخدم. ستستبدل معاملة Fragment هذه - افتراضيًا - جزءًا واحدًا بآخر ، من خلال تطبيق انتقال على FragmentTransaction يمكننا أن نجعل تطبيقنا ينشط هذا التغيير بأمان كما يلي:

الانتقال جزء

مبادئ

  • تتطلب عمليات نقل العناصر المشتركة Android SDK 21+ ، وبالتالي فإننا لن ننظر إلى حلول لتطبيق Material Transitions قبل Android 5.0.
  • سيكون للتحولات نطاق نشاط Android واحد.
  • سيكون لهذا النشاط Android فقط إطار FrameLayout سيكون بمثابة حاوية Fragment الخاصة بنا.
  • نحن نستخدم عددًا قليلاً من المكتبات في مشروعنا لجعل حياتنا أكثر سهولة ورمزنا أكثر بساطة ، Butterknife لأدوات التخطيط الخاصة بنا و retrolambda لاستخدام بعض ميزات Java8. نحن نوصي بشدة لهم ونستخدمها في جميع مشاريع Android.

نشاطنا وشظايانا

كل من نشاطنا و 2 شظايا لدينا هي بسيطة جدا. هذا هو نشاط الاستضافة لدينا:

ستكون هذه الشظايا 2 لدينا ، كلاهما عارية:

سنرى رمز استخدام الانتقالات لاحقًا.

فهم التحولات

المفاهيم التالية أساسية في فهم التحولات:
· المعاملات Fragment: سنقوم بتحميل Fragment الخاصة بنا باستخدام المعاملات ، كما هو شائع لاستخدام Fragment ، هذه ليست هي نطاق هذه المقالة ، يتم استخدامها ولكنها غير موضحة بدقة.
دخول / خروج التحولات.
التحولات عنصر مشترك.

عند تنفيذ معاملة Fragment الخاصة بنا ، سنحدد إدخال انتقالي لشظايانا الجديدة وانتقال خروج لجزءنا القديم. أي عنصر جديد يضاف إلى نشاطنا سوف يتبع Enter Transition والعناصر التي تختفي سوف تستخدم Exit Transition.

من المهم أن نفهم أن انتقالات الدخول / الخروج يتم تطبيقها على الأجزاء نفسها.

العناصر المشتركة هي العناصر الموجودة في كلا الشظايا المتضمنة في المعاملة. يتم تطبيق انتقالات العناصر المشتركة على معاملة التجزئة.

توقيت

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

أولاً ، يتلاشى النص.
بعد ذلك ، يتحرك الشعار (ويتم تغيير حجمه تلقائيًا).
أخيرًا ، زرنا يتلاشى.

لكي يعمل هذا ، سيتعين علينا ضبط وقت الرسوم المتحركة لدينا بشكل صحيح. سوف يتلاشى النص طوال المدة التي حددناها في Exit Transition التي نطبقها على الجزء الذي تم تحميله مسبقًا.

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

العناصر المشتركة في تخطيطات XML

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

لاحظ أن ImageView الذي يحتوي على الشعار (العنصر المشترك الوحيد في الانتقال) له نفس الفترة الانتقالية في كلتا التخطيطات.

الرمز

هذا هو المكان الذي يتم فيه تنفيذ الانتقال بالفعل:

كل شيء مستقيم إلى الأمام باستثناء المدة / التأخيرات لكل الرسوم المتحركة المحددة. لنكرر هذا الجزء مرة أخرى:

  1. تختفي العناصر القديمة مع تلاشي يدوم 300 مللي ثانية.
  2. تبدأ العناصر المشتركة في التحرك بعد 300 مللي ثانية وتستغرق الحركة بأكملها 1000 مللي ثانية.
  3. عناصر جديدة تتلاشى بعد 1300ms وتتلاشى في 300ms.

ماذا حققنا؟

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

مستودع المشروع: https://github.com/Bynder/FragmentTransitionExample

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