RecyclerView के पेशेवर उपयोग के लिए सुझाव। भाग २

पिछले लेख को जारी रखते हुए, इसमें मैं ItemDecoration और ItemAnimator बारे में बात ItemDecoration और एक सरल अनुप्रयोग के उदाहरण का उपयोग करके RecyclerView में उनके काम के सिद्धांत को समझाने की कोशिश करता हूँ जो कि Github पर उपलब्ध है।

1. मदकरण

ItemDecoration उपयोग RecyclerView में सूची आइटम को सजाने के लिए किया जाता है।

ItemDecoration साथ ItemDecoration आप view घटकों के बीच डिवाइडर जोड़ सकते हैं, उन्हें संरेखित कर सकते हैं, या उन्हें समान अंतराल पर विभाजित कर सकते हैं। view घटकों के बीच एक साधारण विभाजक जोड़ने के लिए, DividerItemDecoration वर्ग का उपयोग करें, जो समर्थन लाइब्रेरी संस्करण 25.1.0 और उच्चतर में पाया जा सकता है। निम्नलिखित कोड टुकड़ा इसके कार्यान्वयन को प्रदर्शित करता है:

 mDividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(), mLayoutManager.getOrientation()); recyclerView.addItemDecoration(mDividerItemDecoration); 

अपना स्वयं का विभाजक बनाने का सबसे अच्छा तरीका है RecyclerView.ItemDecoration वर्ग का विस्तार करना। नमूना आवेदन में, मैंने GridLayoutManager उपयोग किया और RecyclerView लिए CharacterItemDecoration को लागू किया:

 recyclerView.addItemDecoration(new CharacterItemDecoration(50)); 

यहाँ CharacterItemDecoration अपने निर्माता को 50 पिक्सेल में ऑफसेट ( eng। ऑफसेट) सेट करता है और getItemOffsets(...) ओवरराइड getItemOffsets(...) । getItemOffsets() विधि के अंदर, प्रत्येक outRects फ़ील्ड इंडेंटेशन और इंडेंटेशन के समान प्रत्येक view घटक के लिए निर्धारित पिक्सेल की संख्या निर्धारित करता है। चूँकि मैंने GridLayoutManager उपयोग किया था और ग्रिड तत्वों के बीच समान दूरी तय करना चाहता था, इसलिए मैं प्रत्येक समान तत्व के लिए 25 पिक्सेल (यानी ऑफसेट / 2) के दाईं ओर इंडेंट सेट करता हूं और प्रत्येक विषम तत्व के बाईं ओर 25 पिक्सेल तक इंडेंट करता हूं, जबकि शीर्ष इंडेंट को समान रखता हूं। सभी तत्वों के लिए।

2. आइटमएनीमेटर

ItemAnimator उपयोग RecyclerView अंदर तत्वों को view या घटकों को view लिए किया जाता है।

चलिए DefaultItemAnimator को बढ़ाकर और कई तरीकों को ओवरराइड करके अपने एप्लिकेशन को इंस्टाग्राम की तरह बनाते हैं।

 public boolean canReuseUpdatedViewHolder(@NonNull RecyclerView.ViewHolder viewHolder) { return true; } 

canReuseUpdatedViewHolder(...) विधि निर्धारित करती है कि क्या इस तत्व के डेटा में परिवर्तन होने पर समान ViewHolder उपयोग किया ViewHolder । यदि यह false , तो ViewHolders - पुराने और अद्यतन - दोनों को animateChange(...) विधि से पारित कर दिया जाता है।

 public ItemHolderInfo recordPreLayoutInformation(@NonNull RecyclerView.State state, @NonNull RecyclerView.ViewHolder viewHolder, int changeFlags, @NonNull List<Object> payloads) { if (changeFlags == FLAG_CHANGED) { for (Object payload : payloads) { if (payload instanceof String) { return new CharacterItemHolderInfo((String) payload); } } } return super.recordPreLayoutInformation(state, viewHolder, changeFlags, payloads); } public static class CharacterItemHolderInfo extends ItemHolderInfo { public String updateAction; public CharacterItemHolderInfo(String updateAction) { this.updateAction = updateAction; } } 

RecyclerView layout रेंडरिंग शुरू करने के लिए recordPreLayoutInformation(...) विधि को कॉल करता है। ItemAnimator को view घटक के बारे में आवश्यक जानकारी रिकॉर्ड करने, स्थानांतरित करने, हटाने या हटाने से पहले दर्ज करना होगा। इस विधि द्वारा लौटाए गए डेटा को संबंधित एनीमेशन विधि (हमारे मामले में, यह animateChange(...) स्थानांतरित किया जाएगा।

 @Override public boolean animateChange(@NonNull RecyclerView.ViewHolder oldHolder, @NonNull RecyclerView.ViewHolder newHolder, @NonNull ItemHolderInfo preInfo, @NonNull ItemHolderInfo postInfo) { if (preInfo instanceof CharacterItemHolderInfo) { CharacterItemHolderInfo recipesItemHolderInfo = (CharacterItemHolderInfo) preInfo; CharacterRVAdapter.CharacterViewHolder holder = (CharacterRVAdapter.CharacterViewHolder) newHolder; if (CharacterRVAdapter.ACTION_LIKE_IMAGE_DOUBLE_CLICKED.equals(recipesItemHolderInfo.updateAction)) { animatePhotoLike(holder); } } return false; } private void animatePhotoLike(final CharacterRVAdapter.CharacterViewHolder holder) { holder.likeIV.setVisibility(View.VISIBLE); holder.likeIV.setScaleY(0.0f); holder.likeIV.setScaleX(0.0f); AnimatorSet animatorSet = new AnimatorSet(); ObjectAnimator scaleLikeIcon = ObjectAnimator.ofPropertyValuesHolder (holder.likeIV, PropertyValuesHolder.ofFloat("scaleX", 0.0f, 2.0f), PropertyValuesHolder.ofFloat("scaleY", 0.0f, 2.0f), PropertyValuesHolder.ofFloat("alpha", 0.0f, 1.0f, 0.0f)); scaleLikeIcon.setInterpolator(DECELERATE_INTERPOLATOR); scaleLikeIcon.setDuration(1000); ObjectAnimator scaleLikeBackground = ObjectAnimator.ofPropertyValuesHolder (holder.characterCV, PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0.95f, 1.0f), PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0.95f, 1.0f)); scaleLikeBackground.setInterpolator(DECELERATE_INTERPOLATOR); scaleLikeBackground.setDuration(600); animatorSet.playTogether(scaleLikeIcon, scaleLikeBackground); animatorSet.start(); } 

RecyclerView , animateChange(...) विधि को कॉल करता है, जब एडेप्टर तत्व, notifyItemChanged(int) विधि को कॉल करने से पहले और बाद में दोनों प्रस्तुत करता है। इस विधि का उपयोग तब भी किया जा सकता है जब notifyDataSetChanged() कॉल किया जाता है, यदि एडेप्टर स्थिर पहचानकर्ताओं का उपयोग करता है। यह आवश्यक है ताकि RecyclerView समान ViewHolders में view घटकों का पुन: उपयोग कर सके। ध्यान दें कि यह विधि तर्कों के रूप में लेती है: (ViewHolder oldHolder, ViewHolder newHolder, ItemHolderInfo preInfo, ItemHolderInfo postInfo) । चूंकि हम ViewHolder का पुन: उपयोग कर रहे हैं, इसलिए पुराने फ़ोल्डर और newHolder दोनों समान हैं।

जब भी उपयोगकर्ता किसी भी आइटम पर डबल-क्लिक करता है, तो निम्न विधि कहलाती है:

 notifyItemChanged(position, ACTION_LIKE_IMAGE_DOUBLE_CLICKED); 

यह कॉल की पूरी श्रृंखला शुरू करता है: canReuseUpdatedViewHolder(...) , recordPreLayoutInformation(...) और, आखिरकार, animateChange(...) , जो बदले में, इस मद में सूची आइटम और हृदय आइकन को एनिमेट करता है ( ऊपर GIF में उदाहरण)।

यह RecyclerView बारे में लेखों की एक श्रृंखला का दूसरा भाग है। यदि आप पहले भाग से चूक गए हैं, तो इसे यहाँ पढ़ें।

RecyclerView पर कुछ और अच्छे लेख:

• RecyclerView - समर्थन पुस्तकालय ListAdapter का उपयोग करते हुए कम कोड के साथ अधिक एनिमेशन
• RecyclerView में SnapHelper का उपयोग करना
• कोटलिन में RecyclerView एडाप्टर के लिए फ़ाइल टेम्पलेट

← पेशेवर उपयोग के लिए टिप्स RecyclerView। भाग 1