कैसे मैंने साझा तत्व संक्रमण से संघर्ष किया और अपनी पहली ओपनसोर्स लाइब्रेरी लिखी

दुनिया में कोई दुख की कहानी नहीं है
ViewPager'e और SET'e की कहानी की तुलना में

मैं चेतावनी देना चाहूंगा कि लेखक एक नौसिखिया एंड्रॉइड है, इसलिए लेख में बहुत सारे तकनीकी अशुद्धियां हैं जो आपको बल्कि चेतावनी दी जानी चाहिए कि लेख में तकनीकी रूप से विश्वसनीय कथन दिखाई दे सकते हैं।

जहां बैकएंड होता है

मेरे सारे जीवन में मैंने बैकएंड को देखा। 2019 की शुरुआत, पहले से ही बहुत महत्वाकांक्षी है, लेकिन अधूरी परियोजना है। एक खोज कंपनी के साथ एक साक्षात्कार के लिए ज्यूरिख में एक बेकार यात्रा। सर्दी, गंदगी, मूड नहीं। परियोजना को और आगे खींचने की कोई ताकत और इच्छा नहीं है।

मैं इस भयानक बैकएंड को हमेशा के लिए भूल जाना चाहता था। सौभाग्य से, भाग्य ने मुझे एक विचार दिया - यह एक मोबाइल एप्लिकेशन था। इसकी मुख्य विशेषता कैमरे का गैर-मानक उपयोग होना था। काम में उबाल आने लगा। इसमें थोड़ा समय लगा, और अब प्रोटोटाइप तैयार है। जब तक मैं उपयोगकर्ता को " सुविधाजनक " बनाने का निर्णय नहीं लेता, तब तक परियोजना की रिलीज करीब आ रही थी और सब कुछ ठीक और सुव्यवस्थित था।

ViewPager और साझा तत्व संक्रमण। हम सुलह की तलाश कर रहे हैं

कोई भी 2019 में छोटे मेनू बटन पर क्लिक नहीं करना चाहता है, सभी दाएं और बाएं वे स्क्रीन को स्वाइप करना चाहते हैं। कहा जाता है - किया, किया - किया। तो पहला 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(); 

हम एप्लिकेशन लॉन्च करते हैं और ... आसानी से एक रिक्त स्क्रीन पर स्विच करते हैं। क्या कारण है?

यह पता चला है कि Page1Container , Page2Container जैसे किसी मध्यस्थ के बिना प्रत्येक पृष्ठ का कंटेनर ViewPager ही है। इसलिए, बस एक पृष्ठ को दूसरे में बदलने से काम नहीं होता है, पूरे pager को बदल दिया जाएगा।

खैर, प्रत्येक पृष्ठ की सामग्री को व्यक्तिगत रूप से बदलने के लिए, हम प्रत्येक पृष्ठ के लिए कई कंटेनर टुकड़े बनाते हैं।

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

कुछ फिर से शुरू नहीं होगा।

java.lang.IllegalStateException: टुकड़े टुकड़े की कंटेनर ID नहीं बदल सकते BigPictureFragment {...}: 2131165289 था अब 2131165290

हम दूसरे पृष्ठ ( 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 ); } 

परिणाम क्या है? (एनीमेशन - २. - mb)

परियोजना को GitHub पर देखा जा सकता है ।

संक्षेप में देना। कोड बहुत अधिक ठोस लगने लगा: 2 प्रारंभिक अंशों के बजाय, मुझे 6 के रूप में मिला, इसमें ऐसे निर्देश दिखाई दिए जो सही समय पर टुकड़ों को प्रतिस्थापित करते हुए प्रदर्शन को नियंत्रित करते हैं। और यह केवल डेमो में है।

एक ही परियोजना में, कोड में एक के बाद एक, सबसे अप्रत्याशित स्थानों में बैकअप दिखाई देने लगे। जब उपयोगकर्ता "गलत" पृष्ठों से बटन पर क्लिक करता है या डुप्लिकेट नियुक्तियों की पृष्ठभूमि के काम को बाधित करता है, तो उन्होंने एप्लिकेशन को अलग नहीं होने दिया।

यह पता चला कि संक्रमण को पूरा करने के लिए एंड्रॉइड में कॉलबैक नहीं है, और इसका निष्पादन समय बहुत ही मनमाना है और यह कई कारकों पर निर्भर करता है (उदाहरण के लिए, परिणामी टुकड़े में RecyclerView जल्दी से कैसे लोड होता है)। यह इस तथ्य के कारण था कि handler.postDelayed() में टुकड़ा प्रतिस्थापन अक्सर बहुत जल्द या बहुत देर से निष्पादित होता handler.postDelayed() , जो केवल पिछली समस्या को बढ़ा देता था।

अंतिम मुख्य आकर्षण यह था कि एनीमेशन के दौरान, उपयोगकर्ता बस दूसरे पृष्ठ पर स्वाइप कर सकता है और दो ट्विन स्क्रीन देख सकता है, जिसके बाद एप्लिकेशन ने इसे वांछित स्क्रीन पर भी खींच लिया।

इस दृष्टिकोण की दिलचस्प कलाकृतियाँ (एनीमेशन - 2.7 mb)

यह राज्य की स्थिति मेरे अनुकूल नहीं थी, और मैं, धर्मी गुस्से से भरा, एक और समाधान की खोज करने लगा।

Viewpager में Shared Element Transition को सही तरीके से कैसे करें

पेजट्रांसफॉर्मर की कोशिश कर रहा है

इंटरनेट पर अभी भी कोई जवाब नहीं थे, और मैंने सोचा: इस संक्रमण को और कैसे क्रैंक किया जा सकता है। चेतना के उपसंस्थान में कुछ मेरे लिए फुसफुसाए: " PageTransformer , ल्यूक का उपयोग करें।" विचार मुझे आशाजनक लग रहा था और मैंने सुनने का फैसला किया।

PageTransformer बनाने का विचार है, जो Android SET के विपरीत, setTransitionName(transitionName) और FragmentTransaction.addSharedElement(sharedElement,name) कई दोहराव की आवश्यकता नहीं होगी। यह स्वाइप के बाद तत्वों को स्थानांतरित करेगा और फॉर्म का एक सरल इंटरफ़ेस होगा:

  public void addSharedTransition(int fromViewId, int toViewId) 

हम विकास के लिए आगे बढ़ते हैं। मैं डेटा को addSharedTransition(fromId, toId) विधि से Set करने के लिए Pair से Set addSharedTransition(fromId, toId) और इसे PageTransfomer विधि से प्राप्त PageTransfomer

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

अंदर, मैं सभी सहेजे गए View जोड़े से गुजरूंगा, जिनके बीच मुझे एक एनीमेशन बनाने की आवश्यकता है। और मैं उन्हें फ़िल्टर करने का प्रयास करूंगा ताकि केवल दृश्य तत्व एनिमेटेड हों।

पहले, आइए देखें कि एनिमेटेड होने की आवश्यकता वाले तत्व बनाए गए हैं या नहीं। हम चॉसी नहीं हैं, और यदि एनीमेशन की शुरुआत से पहले 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); 

यदि दोनों पृष्ठ पहले से बने हैं, तो मैं उन पर एक जोड़ी की तलाश कर रहा हूं, जिन्हें मुझे चेतन करने की आवश्यकता है।

 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 सेट slideToTheRight , और पहले से ही यह मेरे लिए उपयोगी होगा। translation में संकेत इस पर निर्भर करता है, जो निर्धारित करता है कि 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); 

दिलचस्प बात यह है कि आरंभिक पृष्ठ और परिणामी पृष्ठ पर दोनों View लिए X और Y लिए ऑफ़सेट फ़ार्मुलों, अलग-अलग प्रारंभिक ऑफ़सेट्स के बावजूद समान हो गए।

लेकिन पैमाने के साथ, दुर्भाग्य से, यह चाल काम नहीं करेगी - आपको यह विचार करने की आवश्यकता है कि क्या यह View एनीमेशन का शुरुआती या अंत बिंदु है।

यह किसी के लिए एक आश्चर्य के रूप में आ सकता है, लेकिन transformPage(@NonNull View page, float position) को कई बार कहा जाता है: प्रत्येक कैश्ड पृष्ठ के लिए (कैश आकार अनुकूलन योग्य है)। और, transformPage() लिए प्रत्येक कॉल के लिए, कई बार एनिमेटेड View को फिर से नहीं करने के लिए, हम केवल उन लोगों को बदलते हैं जो वर्तमान 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 भी जानकारी को साझा करने की जल्दी ViewPager नहीं है कि कौन से पृष्ठ स्क्रॉल कर रहे हैं। जैसा कि मैंने वादा किया था, अब मैं आपको बताता हूं कि हमें यह जानकारी कैसे मिलती है। हमारे PageTransformer हम अभी तक एक और ViewPager.OnPageChangeListener इंटरफ़ेस लागू करते हैं। System.out.println() माध्यम से onPageScrolled() के आउटपुट का अध्ययन करने के बाद System.out.println() मैं निम्नलिखित onPageScrolled() आया:

 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) ); 

ताकि कोड गायब न हो जाए, मैंने लाइब्रेरी को जेसीटर रिपॉजिटरी और गिटहब में डाल दिया। इसलिए मैं ओपनसोर्स की दुनिया के संपर्क में आ गया। आप इसे केवल जोड़कर अपनी परियोजना पर आजमा सकते हैं

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

GitHub पर सभी स्रोत उपलब्ध हैं

निष्कर्ष

भले ही इंटरनेट को जवाब नहीं पता है, लेकिन इसका मतलब यह नहीं है कि यह नहीं है। Workarounds के लिए देखो, जब तक यह काम करता है की कोशिश करो। शायद आप सबसे पहले इस तह तक पहुंचेंगे और इसे समुदाय के साथ साझा करेंगे।