साझा तत्व बदलाव के साथ छिपी हुई गलतियाँ

अपने आवेदन को सुंदर और जीवंत बनाने के लिए एक अच्छा अभ्यास है, और आजकल इसे प्राप्त करने के लिए बहुत सारे उपकरण और तरीके हैं। उनमें से एक साझा तत्व संक्रमण है।

इस लेख में मैं कुछ गलतियों को कवर करूंगा जिनमें मुझे बहुत समय लगा है; यदि आप इस तरह के बदलावों को आवेदन पर लागू करने का निर्णय लेते हैं तो मैं उन्हें दिखाऊंगा कि कैसे उनसे बचा जाए।

आरंभ करें

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

एनीमेशन बनाने के लिए मुख्य कदम इस प्रकार हैं:

1. setReorderingAllowed(true) सक्षम करें। यह जीवनचक्र विधियों को कॉल करने की अनुमति देता है और आपका एनीमेशन सही ढंग से प्रदर्शित होगा।
2. addSharedElement() कॉल करें और उन विचारों को जोड़ें जो स्क्रीन के बीच साझा किए जाएंगे
3. अद्वितीय android:transitionName जोड़ें android:transitionName में प्रत्येक दृश्य पर संक्रमण नाम
4. गंतव्य विखंडन में sharedElementEnterTransition/sharedElementReturnTransition जोड़ें। वैकल्पिक रूप से: बेहतर प्रभाव के लिए हम enterTransition/exitTransition भी सेट कर सकते हैं।
5. उस समय को परिभाषित करने के लिए postponeEnterTransition/startPostponedEnterTransition जोड़ें, जब डेटा लोड किया गया हो और UI तैयार होने के लिए तैयार हो।

लगता है कि एनीमेशन बनाने और अपने डिजाइनरों और उपयोगकर्ताओं को खुश करने के लिए पर्याप्त है। लेकिन हमेशा कुछ दुर्घटनाएँ होती हैं। आइए एक नजर डालते हैं कि अगर हम ऊपर सूचीबद्ध कदम उठाते हैं तो हमारे पास क्या होगा:


यही हमें उम्मीद नहीं थी। चलिए इसका पता लगाते हैं।

गलती # १। स्थैतिक संक्रमण नाम (आधा दिन बर्बाद)

जैसा कि मैंने पहले कहा, हमारे दृश्यों में अद्वितीय संक्रमण नाम होने चाहिए - अन्यथा संक्रमण रूपरेखा पहचान नहीं पाएगी कि कौन सा दृश्य संक्रमण के साथ भाग लेता है और यह उनके बिना बना देगा। तो समस्या कहाँ है?

बात है RecyclerView। यह बात है।

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

तो तय है:

 val transitionNameImage = context.getString(R.string.transition_image, title) 

आपने देखा होगा कि मैंने एक अद्वितीय नाम पाने के तर्क के रूप में "शीर्षक" रखा। उदाहरण के लिए, स्क्रीन पर आइटम की स्थिति के बजाय डोमेन मॉडल का उपयोग करना बेहतर है, क्योंकि इन नामों को बंडल करने और दूसरे फ़्रैगमेंट से पार्स करने के लिए इन नामों को पारित करने की आवश्यकता नहीं है।

गलती # 2। माता-पिता के टुकड़े पर विचार नहीं (1.5 दिन बर्बाद)

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

तो, मेरा पहला टुकड़ा टुकड़े के कंटेनर का एक बच्चा था और कोई आश्चर्य नहीं कि postponeEnterTransition()/startPostponedEnterTransition() का कोई प्रभाव नहीं था।


यहां आपको क्या करने की आवश्यकता है इन विधियों को माता-पिता के टुकड़े से कॉल करना है।

गलती # ३। कम ग्लाइड (2 दिन बर्बाद)

"ठीक है, मैं सीख रहा हूं कि साझा संक्रमण कैसे किया जाए, जब जीवन चक्र और लोडिंग के बारे में आवश्यक तरीकों को कॉल करना है। इस बार यह काम करने वाला है! "

वैसे मैं गलत था। यह शायद मेरे द्वारा की गई सबसे कठिन गलती है। आइए एक नजर डालते हैं कि हमारे पास अब तक क्या है:


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

मैं यहाँ पूरी जाँच का वर्णन नहीं करना चाहता। छोटी कहानी, मैं एक अच्छा लेख भर में ठोकर खाने के लिए भाग्यशाली था।

जहां मुझे समाधान मिला। यहाँ यह है:
“हमारे पास यह गड़बड़ है क्योंकि ग्लाइड छवि लोडिंग को अनुकूलित करने की कोशिश करता है। डिफ़ॉल्ट रूप से, ग्लाइड आकार बदल रहा है और लक्ष्य दृश्य से मिलान करने के लिए छवियों को ट्रिम कर रहा है। "

इसे ठीक करने के लिए, मैंने जोड़ा, कोई चुटकुले नहीं, कोड की एक ही लाइन जैसे ग्लाइड की श्रृंखला को आरंभीकरण करने के लिए:

 Glide .with(target) .load(url) .apply( RequestOptions().dontTransform() // this line ) 

यदि आप साझा संक्रमण में शामिल होते हैं, तो आपको ग्लाइड के किसी भी परिवर्तन को अक्षम करना चाहिए।

गलती # 4। गलत तरीके से प्रबंध पोस्टपोस्टपोनट्रांसिशन ()

ईमानदारी से, यह बिल्कुल गलती नहीं है, लेकिन फिर भी मुझे लगता है कि यह उल्लेख करना अच्छा होगा।

जब यह postPostponeTransition() और startPostponedEnterTransition() विधियों का प्रबंधन करने की बात आती है, तो आपको सही क्षण का चयन करना चाहिए। वह क्षण जब यूआई पहले से ही तैयार है।

विधियों को बुलाने से पहले हमें दो मुख्य बिंदुओं को जानना चाहिए:

• एक तरफ, जब संक्रमण वाले चित्र लोड और तैयार हैं
• दूसरी ओर, पदानुक्रम को देखा और निर्धारित किया जाता है

छवियों के लिए आमतौर पर हम ग्लाइड का उपयोग करते हैं और इसमें एक फैंसी श्रोता होता है:

 RequestListener<Drawable> { override fun onLoadFailed( e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean ): Boolean { startPostponedEnterTransition() return false } override fun onResourceReady( resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean ): Boolean { startPostponedEnterTransition() return false } } 

ध्यान दें कि हम startPostponedEnterTransition() दोनों मामलों में कहते हैं: सफलता और त्रुटि। यह महत्वपूर्ण है क्योंकि अगर हम इसे नहीं बनाते हैं तो आपका आवेदन जम जाएगा।

ऐसे मामलों में जब संक्रमण बिना किसी चित्र के आता है, तो आप रूट लेआउट पर ktx से doOnPreDraw doOnPreDraw() एक्सटेंशन विधि का उपयोग कर सकते हैं और वहां पर startPostponedEnterTransition() शुरू करें।

बोनस : RecyclerView की बात करते हुए, यह केवल छवियों के लिए एक श्रोता जोड़ने के लिए पर्याप्त नहीं है। हमें RecyclerView की एक आइटम स्थिति को बनाए रखना चाहिए जहां से संक्रमण शुरू होता है। जब उपयोगकर्ता पिछली स्क्रीन पर वापस जाता है, तो हमें छवि को लोड की गई स्थिति की तुलना श्रोता पर बनाए रखने की स्थिति से करनी चाहिए और जब उनका मिलान किया जाता है तब ही संक्रमण शुरू कर देना चाहिए।

सभी को एक साथ रखना

इस लेख में, मैंने कुछ गोचरों को दिखाया है जिनका आप टुकड़ों के साथ साझा संक्रमण और उनसे निपटने के तरीकों को लागू करने का सामना कर सकते हैं।

संक्षेप में, यहाँ वे हैं:

1. टुकड़ों को ध्यान में रखें पदानुक्रम (माता-पिता के टुकड़े के बारे में मत भूलना)
2. RecyclerView के मामले में, हमेशा गतिशील रूप से संक्रमण नामों का निर्माण करें (स्रोत + गंतव्य)
3. किसी भी ग्लाइड परिवर्तनों को अक्षम करें
4. अपने तर्क के बारे में postPostponeTransition() और startPostponedEnterTransition() सही तरीके से कॉल करें।

पढ़ने के लिए धन्यवाद और अगली बार देखने के लिए!

PS यदि आपको आश्चर्य है कि छवि कोनों को कैसे चेतन किया जाए, तो यहां कोड , बस बाकी साझा किए गए एनीमेशन बदलावों को जोड़ें।