🔏 ♐️ 🏌️ पृष्ठांकन के दौरान लोड प्रदर्शित करने का एक वैकल्पिक तरीका 👩🏿‍🤝‍👨🏾 🙌 🈷️

मोबाइल एप्लिकेशन में पेज-दर-पेज लोडिंग के साथ काम करना काफी सरल विषय है और इसमें कोई कमी नहीं है।

डेवलपर का सामना एक समान कार्य के साथ अक्सर होता है और, तदनुसार, बार-बार एक ही काम करना उबाऊ और आलसी होता है।

लेकिन यहां तक कि सबसे सामान्य कार्य को दूसरे में हल किया जा सकता है, अधिक दिलचस्प तरीके से, नया ज्ञान प्राप्त करने और बस अपने मस्तिष्क को फैलाने के लिए।

पृष्ठ पर अंक लगाना

संक्षेप में, पृष्ठांकन के कार्यान्वयन पर सभी काम नीचे सूचीबद्ध वस्तुओं के होते हैं:

श्रोता को पुनर्नवीनीकरण दृश्य में जोड़ें;
प्राथमिक डेटा डाउनलोड करें;
उपयोगकर्ता द्वारा सूची में स्क्रॉल करने पर कॉलबैक पकड़ो;
सभी मदों के बाद सूची में डाउनलोड दिखाएं;
नई वस्तुओं के लिए अनुरोध भेजें;
डेटा फिर से प्रदर्शित करें।

हमारे मामले में, पेज पेजिंग तंत्र को लागू किया गया था, लेकिन उपयोगकर्ता द्वारा सूची में स्क्रॉल करने के दौरान लोड का कोई प्रदर्शन नहीं था।

ठीक है, एक आवेदन में एक बार ऐसा करना कोई समस्या नहीं है। यदि कई स्क्रीन हैं जहां इस कार्यक्षमता की आवश्यकता है, तो आप एक मूल एडाप्टर लिख सकते हैं जो एक अतिरिक्त प्रकार के दृश्य के साथ काम कर सकता है।

लेकिन, क्या होगा अगर कार्य कुछ अधिक जटिल है?

मान लीजिए कि कई नई परियोजनाएं नहीं हैं जिनमें बुनियादी कार्यक्षमता के साथ एक कोर मॉड्यूल है।

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

मैं समस्या को कैसे हल कर सकता हूं?

एक नया बेस एडेप्टर बनाएं जो डाउनलोड की प्रगति दिखाने में सक्षम होगा, सभी पुराने एडेप्टर + स्क्रीन को फिर से लिखता है जो एडेप्टर का उपयोग करते हैं, क्योंकि आपको प्रत्येक प्रस्तोता या दृश्य में प्रत्येक स्क्रीन पर लोड की डिस्प्ले स्थिति को नियंत्रित करना होगा।

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

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

इस बिंदु पर, मैंने ItemDecoration वर्ग का उपयोग करने के बारे में सोचा।

क्यों नहीं इस वर्ग का उपयोग सभी संबंधित कामों को करने के लिए किया जाता है

यह निर्धारित करना कि भार कब दिखाना है और कब छिपाना है
ड्राइंग डाउनलोड प्रगति

दुर्भाग्य से, इंटरनेट पर एक भी तैयार समाधान नहीं मिला - या तो किसी ने इसे लागू करने की कोशिश नहीं की, या बस कार्यान्वयन के बाद के अनुभव को साझा नहीं किया।

ItemDecoration का उपयोग करके पेजिंग के दौरान लोडिंग डिस्प्ले को लागू करने के लिए क्या आवश्यक है?

लोड को प्रस्तुत करने के लिए इंडेंट;
जब हम प्रगति दिखाने की आवश्यकता हो, तो ItemDecoration के कार्यान्वयन को समझें;
डाउनलोड खींचना;

मांगपत्र

कोई भी डेवलपर जिसने SpacingItemDecoration को कम से कम एक बार बनाया है, वह जानता है कि कैसे इंडेंट करना है। ItemDecoration getItemOffsets विधि हमें इसमें मदद करेगी:

override fun getItemOffsets(outRect: Rect, view: View, recyclerView: RecyclerView, state: RecyclerView.State) { super.getItemOffsets(outRect, view, parent, state) }

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

कैसे समझें कि सूची नीचे तक स्क्रॉल की गई है?

नीचे दिए गए कोड से हमें इसमें मदद मिलेगी:

  private fun isLastItem(recyclerView: RecyclerView, view: View): Boolean { val lastItemPos = recyclerView.getChildAdapterPosition(view) return lastItemPos == recyclerView.adapter!!.itemCount - 1 }

कुल मिलाकर, हमारे पास इंडेंटेशन को परिभाषित करने और लागू करने के लिए कोड है:

  override fun getItemOffsets(outRect: Rect, view: View, recyclerView: RecyclerView, state: RecyclerView.State) { super.getItemOffsets(outRect, view, recyclerView, state) when (isLastItem(recyclerView, view)) { true -> outRect.set(Rect(0, 0, 0, 120)) else -> outRect.set(Rect(0, 0, 0, 0)) } } private fun isLastItem(recyclerView: RecyclerView, view: View): Boolean { val lastItemPos = recyclerView.getChildAdapterPosition(view) return lastItemPos == recyclerView.adapter!!.itemCount - 1 }

एक तिहाई काम हो गया!

हम डाउनलोड की प्रगति को प्रदर्शित करने का समय निर्धारित करते हैं और प्रगति के प्रतिपादन को कहते हैं

ItemDecoration onDrawOver विधि हमें इसमें मदद करेगी:

  override fun onDrawOver(canvas: Canvas, recyclerView: RecyclerView, state: RecyclerView.State) { super.onDrawOver(canvas, recyclerView, state) }

OnDrawOver विधि केवल रेंडरिंग क्रम में onDraw विधि से भिन्न होती है। OnDrawOver सजावट केवल सूची आइटम द्वारा तैयार किए जाने के बाद प्रदान की जाएगी।

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

ऊपर वर्णित कार्यों को लागू करने के लिए कोड:

  override fun onDrawOver(canvas: Canvas, recyclerView: RecyclerView, state: RecyclerView.State) { super.onDrawOver(canvas, recyclerView, state) when (showLoading(recyclerView)) { true -> { PaginationProgressDrawer.drawSpinner(recyclerView, canvas) isProgressVisible = true } else -> { if (isProgressVisible) { isProgressVisible = false recyclerView.invalidateItemDecorations() } } } } private fun showLoading(recyclerView: RecyclerView): Boolean { val manager = recyclerView.layoutManager as LinearLayoutManager val lastVisibleItemPos = manager.findLastCompletelyVisibleItemPosition() return lastVisibleItemPos != -1 && lastVisibleItemPos >= recyclerView.adapter!!.itemCount - 1 }

ड्राइंग प्रगति

रेंडरिंग कोड काफी बड़ा है और इसे एक अलग फाइल में प्रस्तुत किया जाएगा, जिसका लिंक मैं नीचे प्रस्तुत करूंगा।

मैं केवल उन बारीकियों पर ध्यान देना चाहता हूं जो कार्यान्वयन के लिए आवश्यक हैं।

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

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

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

कोड संदर्भ:

PaginationLoadingDecoration
PaginationProgressDrawer

यदि आवश्यक हो, तो आप एक ProgressDrawer इंटरफ़ेस बना सकते हैं और कार्यान्वयन को PaginationLoadingDecoration में बदल सकते हैं।

डाउनलोड डेमो वीडियो:

पृष्ठांकन के दौरान लोड प्रदर्शित करने का एक वैकल्पिक तरीका