ड्रिबल से लेकर एंड्रॉइड मोशन तक

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

इस लेख में, हम डिजाइनर इवान Parfyonov द्वारा विकसित यूजर इंटरफेस को प्लेट्स स्टूडियो के लिए लागू करने का प्रयास करेंगे।


सबसे पहले, दो टुकड़े बनाएँ: RecyclerFragment और DetailsFragment ।

Android संक्रमण की रूपरेखा?

एंड्रॉइड ट्रांजिशन फ्रेमवर्क अच्छा काम करता है, लेकिन कुछ बारीकियां हैं। सबसे पहले, हम चाहते हैं कि सब कुछ हमारे लिए कम से कम एपीआई 19 पर काम करे, और दूसरी बात, हमें एक ही समय में कई उपयोगकर्ता तत्वों को एनिमेट करने की आवश्यकता है और उनमें से कुछ केवल एक ही टुकड़े में मौजूद हैं। इसलिए, हम ViewPropertyAnimator का उपयोग करके मैन्युअल रूप से संक्रमण तत्व (साझा तत्व संक्रमण) का एनीमेशन लागू करते हैं।

सभी क्रम में

1. हम सूची से चयनित तत्व के अंतिम निर्देशांक ( DerailsFragment में इसके निर्देशांक) की गणना करते हैं, सूची एक DerailsFragment है;
2. हम वर्तमान निर्देशांक ( RecyclerFragment में निर्देशांक) को सहेजते हैं और उन्हें DetailsFragment पास करते हैं (यह एपीआई <21 के साथ रिवर्स एनीमेशन के लिए आवश्यक है);
3. सूची से चयनित आइटम की एक प्रति बनाएं;
4. हम चयनित तत्व को अदृश्य बनाते हैं (प्रतिलिपि नहीं, बल्कि स्वयं तत्व);
5. चरण 3 में बनाई गई प्रतिलिपि को मूल टुकड़े के मूल लेआउट में जोड़ें, हमारे मामले में यह RecyclerFragment ;
6. हम शेष इंटरफ़ेस तत्वों का एनीमेशन शुरू करते हैं और बनाई गई प्रतिलिपि को चरण 1 से अंतिम निर्देशांक तक ले जाते हैं;
7. जब एनीमेशन खत्म हो जाता है, तो एक लेनदेन बनाएं और DetailsFragment दिखाएं;
8. हम DetailsFragment में इंटरफ़ेस तत्वों का एनीमेशन शुरू करते हैं।

यूआई एलिमेंट्स एनिमेशन

Toolbar को चेतन करने के लिए Toolbar हम RecyclerFragment में एक अतिरिक्त View बनाएंगे और इसे स्क्रीन के पीछे शीर्ष पर रखेंगे। यह View ViewPropertyAnimator का उपयोग करके DetailsFragment (gif पर नीला रंग) में Toolbar कंटेनर में एनिमेटेड होगा।

 <View android:id="@+id/details_toolbar_helper" android:layout_width="wrap_content" android:layout_height="@dimen/details_toolbar_container_height" android:background="@color/colorPrimary" app:layout_constraintTop_toTopOf="parent"/> // In RecyclerFragment details_toolbar_helper.translationY = -details_toolbar_helper.height 

BottomNavigationView और RecyclerView एनिमेशन भी ViewPropertyAnimator का उपयोग करके कार्यान्वित किए BottomNavigationView , कुछ भी जटिल नहीं है (पारदर्शिता और चलती बदलते)।

संक्रमण ढांचे से थोड़ा

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

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

वांछित परिणाम प्राप्त करने के लिए, हम मैन्युअल रूप से सूची से चयनित तत्व की एक प्रति बनाएंगे, इसे ओवरले परत में जोड़ें और फिर चेतन करें। लेकिन यहाँ एक छोटी सी समस्या दिखाई देती है, ViewGroupOverlay add(view: View) लिए प्रलेखन ViewGroupOverlay add(view: View) विधि कहती है:

यदि दृश्य में माता-पिता हैं, तो दृश्य को ओवरले में जोड़े जाने से पहले उस माता-पिता से हटा दिया जाएगा।

लेकिन RecyclerView यह काम नहीं करता है, ओवरले परत में जोड़े जाने के बाद, चयनित आइटम को RecyclerView से हटाया नहीं जाता है।

यहां तब होता है जब हम चयनित आइटम को ओवरले परत में जोड़ते हैं:



और हमें इसकी आवश्यकता है:



इसलिए, हम ओवरले परत का उपयोग नहीं करेंगे, और हम प्रतिलिपि को तुरंत रूट लेआउट में जोड़ देंगे। चयनित आइटम की सामग्री की एक प्रति बनाएँ, इसे ImageView जोड़ें और निर्देशांक सेट करें:

 fun View.copyViewImage(): View { val copy = ImageView(context) val bitmap = drawToBitmap() copy.setImageBitmap(bitmap) //  pre-Lollipop   ,   card view  ,      card view return (if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { CardView(context).apply { cardElevation = resources.getDimension(R.dimen.card_elevation) radius = resources.getDimension(R.dimen.card_corner_radius) addView(copy) } } else { copy }).apply { layoutParams = this@copyViewImage.layoutParams layoutParams.height = this@copyViewImage.height layoutParams.width = this@copyViewImage.width x = this@copyViewImage.x y = this@copyViewImage.y } } 

यदि आप सूची से सीधे चयनित आइटम को एनिमेट कर सकते हैं तो कॉपी क्यों बनाएं?

क्योंकि RecyclerView खुद भी एनिमेटेड होगा और, तदनुसार, इसके सभी तत्व, जिसमें चयनित एक भी शामिल है, जिसे हम अलग से चेतन करना चाहते हैं।

उसके बाद, रूट मार्कअप में एक कॉपी जोड़ें और एनीमेशन शुरू करें।

 override fun onClick(view: View) { val fragmentTransaction = initFragmentTransaction(view) val copy = view.createCopyView() root.addView(copy) view.visibility = View.INVISIBLE startAnimation(copy, fragmentTransaction) } 

और यहाँ है कि हम क्या मिला:

फिनिश लाइन

ऊपर दिया गया gif एनीमेशन एक RecyclerFragment , और इसके पूरा होने के बाद हमें DetailsFragment दिखाने की आवश्यकता होती है।

 .withEndAction { fragmentTransaction?.commitAllowingStateLoss() } 

हम क्यों कम कर रहे हैं

यदि आप इसका उपयोग नहीं करते हैं और एनीमेशन के समय होगा, उदाहरण के लिए, स्क्रीन ओरिएंटेशन में बदलाव, तो हमें IllegalStateExeption मिलेगा। यहाँ इसके बारे में अच्छी तरह से लिखा गया है।

अगला, हम DetailsFragment में आवश्यक उपयोगकर्ता इंटरफ़ेस तत्वों का एनीमेशन शुरू करते हैं।

इसे सभी मिलकर चलाएं

मूल के समान नहीं है, लेकिन यह समान दिखता है।

उदाहरण

स्रोत कोड GitHub पर उपलब्ध है , और लेख अंग्रेजी में भी उपलब्ध है।

आपका ध्यान के लिए धन्यवाद!