كيف واجهت صعوبة في عملية نقل العناصر المشتركة وكتبت أول مكتبة مفتوحة المصدر

لا توجد قصة حزينة في العالم
من قصة ViewPager'e و SET'e

أود أن أحذر من أن المؤلف هو Android مبتدئ ، لذلك تحتوي المقالة على الكثير من الأخطاء التقنية بحيث يجب تحذيرك من أن البيانات الموثوقة تقنيًا قد تظهر في المقال.

حيث يؤدي الخلفية

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

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

ViewPager وانتقال العنصر المشترك. نحن نبحث عن المصالحة

لا أحد يريد أن ينقر على أزرار القائمة الصغيرة في عام 2019 ، كلهم ​​يريدون أن يسحبوا الشاشات إلى اليمين واليسار. يقال - فعلت ، فعلت - مكسورة. لذلك ظهر ViewPager الأول في مشروعي (لقد قمت بفك تشفير بعض المصطلحات لنفس الواجهة الخلفية مثلي - فقط انقل المؤشر). و " العنصر المشترك للانتقال" (المشار إليه فيما يلي بـ " ViewPager أو "النقل") - عنصر التوقيع في " تصميم المواد" ، رفض رفضًا قاطعًا العمل مع ViewPager ، مما يترك لي خيارًا: إما الضربات الشديدة أو الرسوم المتحركة الانتقالية الجميلة بين الشاشات. لم أكن أرغب في رفض أحدهما أو الآخر. لذلك بدأ بحثي.

ساعات الدراسة: العشرات من المواضيع في المنتديات والأسئلة التي لم تتم الإجابة عليها على StackOverflow. بغض النظر عن ما أفتحه ، فقد عرض علي إجراء عملية نقل من RecyclerView إلى ViewPager أو "إرفاق أداة Fragment.postponeEnterTransition() " غير محددة.

العلاجات الشعبية لم تساعد ، وقررت التوفيق بين ViewPager Shared Element Transition بنفسي.

ViewPager: الدم الأول

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

يمكننا القيام بالانتقال في نفس الصفحة ، ثم استبدال الصفحة الحالية بالصفحة الهدف في ViewPager .

أولاً ، ابتكار شظايا سنعمل بها.

 SmallPictureFragment small_picture_fragment = new SmallPictureFragment(); BigPictureFragment big_picture_fragment = new BigPictureFragment(); 

دعنا نحاول تغيير الجزء في الصفحة الحالية إلى شيء آخر.

 FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); //  View      int fragmentContId = previousFragment.getView().getParent().getId(); //         fragmentTransaction.replace(fragmentContId, nextFragment); fragmentTransaction.commit(); 

نطلق التطبيق ونتحول بسلاسة إلى شاشة فارغة. ما السبب؟

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

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

 RootSmallPictureFragment root_small_pic_fragment = new RootSmallPictureFragment(); RootBigPictureFragment root_big_pic_fragment = new RootBigPictureFragment(); 

لن يبدأ شيء من جديد.

java.lang.IllegalStateException: لا يمكن تغيير معرف الحاوية للجزء BigPictureFragment {...}: كان 2131165289 الآن 2131165290

لا يمكننا إرفاق جزء من الصفحة الثانية ( BigPictureFragment ) BigPictureFragment الأولى ، لأنه مرفق بالفعل بحاوية الصفحة الثانية.

بعد التشبث بأسناننا ، نضيف المزيد من الأجزاء المزدوجة.

 SmallPictureFragment small_picture_fragment_fake = new SmallPictureFragment(); BigPictureFragment big_picture_fragment_fake = new BigPictureFragment(); 

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

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

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

  handler.postDelayed( () -> { //       activity.viewPager.setCurrentItem(nextPage, false); FragmentTransaction transaction = fragmentManager.beginTransaction(); //   . //       //    Shared Element Transition transaction.replace(fragmentContainer, previousFragment); transaction.commitAllowingStateLoss(); }, //      ,     FADE_DEFAULT_TIME + MOVE_DEFAULT_TIME + FADE_DEFAULT_TIME ); } 

ما هي النتيجة؟ (الرسوم المتحركة - 2.7 ميغابايت)

يمكن الاطلاع على المشروع على جيثب .

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

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

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

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

التحف المثيرة للاهتمام لهذا النهج (الرسوم المتحركة - 2.7 ميغابايت)

هذا الوضع لم يناسبني ، وبدأت ، مليئة بالغضب الصالح ، في البحث عن حل آخر.

كيفية جعل انتقال العنصر المشترك في Viewpager بشكل صحيح

محاولة PageTransformer

لم تكن هناك إجابات على الإنترنت ، وفكرت: كيف يمكن تحسين هذا الانتقال. همس لي شيء في القشرة الفرعية للوعي: "استخدم PageTransformer ، Luke." كانت الفكرة واعدة بالنسبة لي وقررت الاستماع.

تتمثل الفكرة في جعل PageTransformer ، والتي ، على عكس Android SET ، لن تتطلب تكرارًا setTransitionName(transitionName) من setTransitionName(transitionName) و FragmentTransaction.addSharedElement(sharedElement,name) على جانبي الانتقال. سينقل العناصر بعد التمرير ويكون له واجهة بسيطة للنموذج:

  public void addSharedTransition(int fromViewId, int toViewId) 

ننتقل إلى التطوير. addSharedTransition(fromId, toId) البيانات من طريقة addSharedTransition(fromId, toId) إلى Set from Pair وأحصل عليها بطريقة PageTransfomer

 /**     ,   ,     */ public void transformPage(@NonNull View page, float position) 

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

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

 for (Pair<Integer,Integer> idPair : sharedElementIds) { Integer fromViewId = idPair.first; Integer toViewId = idPair.second; View fromView = activity.findViewById(fromViewId); View toView = activity.findViewById(toViewId); if (fromView != null && toView != null) { 

أجد الصفحات التي تحدث فيها الحركة (كيف يمكنني تحديد رقم الصفحة أدناه).

 View fromPage = pages.get(fromPageNumber); View toPage = pages.get(toPageNumber); 

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

 If (fromPage != null && toPage != null) { fromView = fromPage.findViewById(fromViewId); toView = toPage.findViewById(toViewId); 

في هذه المرحلة ، اخترنا طريقة العرض ، والتي تقع على الصفحات التي ينتقل فيها المستخدم.

لقد حان الوقت للحصول على الكثير من المتغيرات. أحسب النقاط المرجعية:

 //         //     float fromX = fromView.getX() - fromView.getTranslationX(); float fromY = fromView.getY() - fromView.getTranslationY(); float toX = toView.getX() - toView.getTranslationX(); float toY = toView.getY() - toView.getTranslationY(); float deltaX = toX - fromX; float deltaY = toY - fromY; //      float fromWidth = fromView.getWidth(); float fromHeight = fromView.getHeight(); float toWidth = toView.getWidth(); float toHeight = toView.getHeight(); float deltaWidth = toWidth - fromWidth; float deltaHeight = toHeight - fromHeight; //       boolean slideToTheRight = toPageNumber > fromPageNumber; 

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

 float pageWidth = getScreenWidth(); float sign = slideToTheRight ? 1 : -1; float translationY = (deltaY + deltaHeight / 2) * sign * (-position); float translationX = (deltaX + sign * pageWidth + deltaWidth / 2) * sign * (-position); 

ومن المثير للاهتمام ، أن صيغ الإزاحة لـ X و Y لكل من View ، على صفحة البداية والصفحة الناتجة ، تبين أنها واحدة ، على الرغم من الإزاحات الأولية المختلفة.

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

قد يكون ذلك بمثابة مفاجأة لشخص ما ، ولكن يتم transformPage(@NonNull View page, float position) عدة مرات: لكل صفحة مخبأة (يمكن تخصيص حجم ذاكرة التخزين المؤقت). ومن أجل عدم إعادة رسم العرض المتحرك عدة مرات ، لكل مكالمة transformPage() ، نغير فقط تلك الموجودة في page الحالية.

 //   View     if (page.findViewById(fromId) != null) { //      fromView.setTranslationX(translationX); fromView.setTranslationY(translationY); / /   float scaleX = (fromWidth == 0) ? 1 : //  View   , //        (fromWidth + deltaWidth * sign * (-position)) / fromWidth; float scaleY = (fromHeight == 0) ? 1 : //  View   , //        (fromHeight + deltaHeight * sign * (-position)) / fromHeight; fromView.setScaleX(scaleX); fromView.setScaleY(scaleY); } //   View     if (page.findViewById(toId) != null) { toView.setTranslationX(translationX); toView.setTranslationY(translationY); float scaleX = (toWidth == 0) ? 1 : (toWidth + deltaWidth * sign * (-position)) / toWidth; float scaleY = (toHeight == 0) ? 1 : (toHeight + deltaHeight * sign * (-position)) / toHeight; toView.setScaleX(scaleX); toView.setScaleY(scaleY); } 

حدد الصفحات لرسم الرسوم المتحركة

لا يتعجل برنامج ViewPager مشاركة المعلومات بين الصفحات التي يتم التمرير فيها. كما وعدت ، الآن سوف أخبرك كيف نحصل على هذه المعلومات. في PageTransformer بنا PageTransformer نقوم بتطبيق واجهة ViewPager.OnPageChangeListener أخرى. بعد دراسة إخراج onPageScrolled() خلال System.out.println() توصلت إلى الصيغة التالية:

 public void onPageScrolled( int position, float positionOffset, int positionOffsetPixels ) { Set<Integer> visiblePages = new HashSet<>(); visiblePages.add(position); visiblePages.add(positionOffset >= 0 ? position + 1 : position - 1); visiblePages.remove(fromPageNumber); toPageNumber = visiblePages.iterator().next(); if (pages == null || toPageNumber >= pages.size()) toPageNumber = null; } public void onPageSelected(int position) { this.position = position; } public void onPageScrollStateChanged(int state) { if (state == SCROLL_STATE_IDLE) { //      ,    fromPageNumber = position; resetViewPositions(); } } 

هذا كل شيء. لقد فعلنا ذلك! الرسوم المتحركة تراقب إيماءات المستخدم. لماذا تختار بين الانتقال السريع وانتقال العناصر المشتركة ، عندما يمكنك ترك كل شيء.

أثناء كتابة هذا المقال ، أضفت تأثير اختفاء العناصر الثابتة - فهو لا يزال خامًا للغاية ، لذلك لم تتم إضافته إلى المكتبة.

تعرف على ما حدث في النهاية (الرسوم المتحركة - 2.4 ميغابايت)

كيف يبدو العمل مع المكتبة؟

تحول التكوين موجزة جدا.

 ArrayList<Fragment> fragments = new ArrayList<>(); fragments.add(hello_fragment); fragments.add(small_picture_fragment); fragments.add(big_picture_fragment); SharedElementPageTransformer transformer = new SharedElementPageTransformer(this, fragments); transformer.addSharedTransition(R.id.smallPic_image_cat2, R.id.bigPic_image_cat, true); transformer.addSharedTransition(R.id.smallPic_text_label3, R.id.bigPic_text_label, true); transformer.addSharedTransition(R.id.hello_text, R.id.smallPic_text_label3, true); viewPager.setPageTransformer(false, transformer); viewPager.addOnPageChangeListener(transformer); 

قد يبدو onClick ، بما في ذلك جميع الانتقالات ، كما يلي:

 smallCatImageView.setOnClickListener( v -> activity.viewPager.setCurrentItem(2) ); 

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

 dependencies { //... implementation 'com.github.kirillgerasimov:shared-element-view-pager:0.0.2-alpha' } 

جميع المصادر متوفرة على جيثب

استنتاج

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