🖱️ 👨🏿‍🎤 ☝🏾 स्क्रॉल दृश्य के अंदर स्क्रॉल दृश्य 🏀 🧕🏾 😁

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

संभव अनुप्रयोग

आप निम्न लक्ष्यों को प्राप्त करने के लिए OLEContainerScrollView का उपयोग कर सकते हैं:

कई स्क्रॉल दृश्यों (या टेबल, या संग्रह) को एक के नीचे एक रखा जाना ताकि स्क्रॉलिंग के दौरान उनका सामान्य व्यवहार प्रभावित न हो। तालिकाओं या संग्रह के मामले में, हम सेल के पुन: उपयोग तंत्र के संचालन को बनाए रखने के बारे में बात कर रहे हैं।
एक जटिल UITableViewDataSource या UICollectionViewDataSource को एक टेबल या संग्रह में विभाजित करके कई सरल डेटा स्रोतों में कई वर्गों से मिलकर कई एकल-खंड तालिकाओं या संग्रह में एक के बाद एक करके।
उनके लेआउट का प्रबंधन किए बिना संग्रह के ऊपर या नीचे एक हेडर या पाद लेख ( हेडर या पाद लेख ) जोड़ना। इस मामले में, यह सरल UIScrollViews या UIView होगा ।

तालिकाओं और संग्रह में पुन: उपयोग कोशिकाओं

इससे पहले कि हम अपनी कक्षा के कार्यान्वयन को देखें, आइए देखें कि टेबल या संग्रह आम तौर पर कैसे काम करते हैं। UITableView और UICollectionView दोनों वर्ग, UIScrollView के वंशज हैं और समान व्यवहार करते हैं। हालांकि, महत्वपूर्ण अंतर यह है कि टेबल और संग्रह अपनी कोशिकाओं का पुन: उपयोग करते हैं । जब दृश्य स्क्रॉल करता है और सेल स्क्रीन से परे फैली होती है, तो यह सेल दृश्य पदानुक्रम से हटा दी जाती है (दूसरे शब्दों में, संदेश को हटा दिया जाता है FromSuperview इसे भेजा जाता है ) और पुन: उपयोग कतार में स्थानांतरित किया जाता है। उसी समय, एक नई सेल दिखाई देने से पहले, तालिका पुन: उपयोग के लिए प्रतीक्षा सूची से एक खाली सेल को बुलाती है और इसे अपने दृश्य पदानुक्रम पर फिर से रखती है। यह दृष्टिकोण महत्वपूर्ण मेमोरी खपत से बचा जाता है, नए प्रकार की मेमोरी बनाने और आवंटित करने (आवंटित करने) के महंगे संचालन की संख्या को कम करता है और सबसे तेज़ स्क्रॉलिंग सुनिश्चित करता है।

UITableView में सेल पुन: उपयोग का चित्रण। अदृश्य कोशिकाओं को दृश्य पदानुक्रम (एक नीली बिंदीदार रेखा द्वारा इंगित) से हटा दिया जाता है और स्क्रॉल करने के परिणामस्वरूप प्रदर्शित होने से पहले तालिका दृश्य में जोड़ा जाता है। ध्यान दें कि टेबल फ्रेम (हल्का नीला आयत) सामग्री आकार (सामग्री आकार, लाल बिंदीदार रेखा द्वारा परिकल्पित) से छोटा है, जैसा कि आमतौर पर स्क्रॉल दृश्य के साथ होता है। वीडियो डाउनलोड करें (H.264 प्रारूप में) ।

कंटेनर कार्यान्वयन के लिए एक सरल दृष्टिकोण

एक सामान्य कंटेनर में कई स्क्रॉल दृश्य रखने, एक स्क्रॉल दृश्य होने के नाते, एक काफी सरल कार्य है:

एक UIScrollView बनाएँ जो नेस्टेड स्क्रॉल दृश्य के लिए कंटेनर होगा।
कंटेनर में नेस्टेड स्क्रॉल दृश्य जोड़ें। यह या तो सरल स्क्रॉल दृश्य, या टेबल या संग्रह हो सकता है।
स्क्रॉल दृश्य को ऐसे फ़्रेम सेट करें ताकि वे अपनी संपूर्ण सामग्री ( contentSize ) में शामिल हों। स्क्रॉल दृश्यों की स्थिति को एक के बाद एक सेट करें।
नेस्टेड दृश्यों के फ्रेम के योग के रूप में कंटेनर का सामग्री आकार ( कंटेटसाइज़ ) सेट करें।

इस प्रकार, जब हम प्रत्येक नेस्टेड स्क्रॉल दृश्य को फ्रेम का आकार उनकी सामग्री के आकार से अधिक या उसके बराबर सेट करते हैं, तो हमें एक ऐसी स्थिति मिलती है जिसमें ये स्क्रॉल दृश्य कभी स्क्रॉल नहीं होंगे - केवल स्क्रॉल करने योग्य ऑब्जेक्ट कंटेनर होगा। यह नेस्टेड स्क्रॉल दृश्य और उनके कंटेनर के बीच स्पर्श से निपटने में हस्तक्षेप से बचा जाता है।

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

एकाधिक स्क्रॉल दृश्यों के लिए कंटेनर को लागू करने के लिए एक सरल दृष्टिकोण का एक उदाहरण। एक सामान्य कंटेनर में दो सारणियों को साक्षात्कार के रूप में जोड़ा जाता है, जो अपने आप में एक स्क्रॉल दृश्य (एक काले स्ट्रोक के साथ एक आयत) है। तालिकाओं के फ्रेम (हल्के नीले और हल्के पीले आयत) को पूरी तरह से प्रत्येक तालिका की सामग्री (लाल धराशायी स्ट्रोक) में बदल दिया जाता है। ध्यान दें कि यह कोशिकाओं के पुन: उपयोग को कैसे प्रभावित करता है - यह बंद हो गया, एक ही समय में प्रत्येक पंक्ति की सभी कोशिकाएं मौजूद हैं, भले ही कोशिका दिखाई दे रही हो (कंटेनर के फ्रेम के अंदर, एक काले आयत) या नहीं। वीडियो डाउनलोड करें (H.264 प्रारूप में) ।

OLEContainerScrollView

अब मैं स्क्रॉल दृश्य के लिए अपने कंटेनर के बारे में बात करूंगा। OLEContainerScrollView , UIScrollView का वंशज है, जो डेक या स्टैक (ओएस एक्स में NSStackView के समान) में स्वचालित रूप से इसमें संलग्न विचारों की व्यवस्था करता है। यह कंटेनर सभी प्रकार के दृश्यों के साथ काम करता है, न केवल स्क्रॉल दृश्यों के साथ, हालांकि यह स्क्रॉल दृश्य को एक विशेष तरीके से संभालता है।

दृश्य जोड़ना

कंटेनर में दृश्य जोड़ने के लिए, आपको addSubviewToContainer: विधि का उपयोग करना होगा। मुझे मौजूदा addSubview पर निर्भर होने के बजाय कंटेनर को जोड़ने और हटाने के लिए नए तरीके बनाने के लिए मजबूर किया गया था : / removeFromSuperview जोड़ी , क्योंकि मैं निजी सामग्री दृश्य में विचार जोड़ना चाहता था, और सीधे कंटेनर में नहीं। इस तकनीक ने हमें स्वयं UIScrollView की निजी उप-प्रजाति से हस्तक्षेप से बचने की अनुमति दी, जो स्क्रॉल संकेतक प्रदर्शित करने के लिए बनाई गई हैं, जब बाद में हम नेस्टेड विचारों के माध्यम से सॉर्ट करेंगे और उनके आकार समायोजित करेंगे।

जैसे ही कंटेनर में दृश्य जोड़ा जाता है, निम्नलिखित होता है:

यदि नया दृश्य UIScrollView (या इनहेरिटर ) का एक उदाहरण है, तो सबव्यू का उपयोग करके अपनी स्वयं की स्क्रॉलिंग अक्षम की गई है ।scrollEnabled = NO; । तो केवल हमारे कंटेनर स्क्रॉल इशारों के प्रसंस्करण में लगे होंगे।
हम संलग्न दृश्य के आकार में परिवर्तन पर KVO सूचनाओं की सदस्यता लेते हैं। नियमित रूप से UIViews के लिए , हम फ़्रेम और सीमा गुणों में परिवर्तन का निरीक्षण करते हैं। स्क्रॉल दृश्य के लिए, हम सामग्री के आकार में सामग्री के माध्यम से परिवर्तनों का निरीक्षण करते हैं। ऐसा तब किया जाना चाहिए ताकि बाद में बाहर से उनके आकार को बदलते समय (रिलेटआउट) नेस्टेड विचारों को फिट किया जा सके।

स्क्रॉल करते समय संरेखण

स्क्रॉल करने के दौरान, कंटेनर लगातार नीचे दिए गए विचारों के फ्रेम को इस तरह से संरेखित करता है:

जोड़ से क्रम में सभी नेस्टेड दृश्यों पर Iterates और उन्हें एक स्टैक में रखता है: पिछले एक के बाद प्रत्येक अगला दृश्य। सभी दृश्यों की चौड़ाई कंटेनर की चौड़ाई से समायोजित की गई है ताकि दृश्य कंटेनर ¹ में फिट हो जाए। साधारण यूआईवीवाई के लिए , उनके फ्रेम की ऊंचाई के अनुसार जगह आवंटित की जाती है। उनकी सामग्री को फिट करने के लिए स्क्रॉल दृश्य के लिए एक पर्याप्त स्थान आवंटित किया गया है, ऊंचाई contentSize.height से ली गई है। इसका अर्थ है कि स्क्रॉल दृश्य के बाद का दृश्य कंटेनर में रखा जाएगा ताकि स्क्रॉल दृश्य की संपूर्ण सामग्री उसके पहले फिट हो जाए।
कंटेनर सामग्री आकार में सभी नेस्टेड दृश्यों की सामग्री आकार होते हैं।

यह पहले से वर्णित सरल दृष्टिकोण के अनुरूप है। अब हमें कंटेनर में सभी स्क्रॉल दृश्यों के फ्रेम को संरेखित करने की आवश्यकता है ताकि उन्हें न्यूनतम आकार मिल सके जो कंटेनर के व्यूपोर्ट को भर देगा ( सीमा के अनुसार ):

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

नीचे दिए गए वीडियो को देखें कि यह एल्गोरिदम कैसे काम करता है। शुरुआत में, पहला टेबल पूरे कंटेनर दृश्यता (एक काले स्ट्रोक के साथ चिह्नित) को भरता है - टेबल फ्रेम (हल्का नीला आयत) कंटेनर की सीमा के बराबर है। इस मामले में, दूसरी तालिका पूरी तरह से दायरे से बाहर है - इसके फ्रेम की ऊंचाई 0 है, तालिका अदृश्य है। नतीजतन, इसमें कोशिकाओं को बनाने की आवश्यकता नहीं है (पीला बिंदीदार रेखा)।

जैसे ही उपयोगकर्ता कंटेनर की सामग्री को स्क्रॉल करता है, और दूसरी तालिका गुंजाइश में प्रवेश करती है, तालिका के फ्रेम की सीमा (हल्की पीली आयत) तब तक गुंजाइश की निचली सीमा से बढ़ना शुरू हो जाती है जब तक कि यह कंटेनर की ऊंचाई के बराबर न हो। उसी समय, पहली तालिका का फ्रेम शून्य से संकुचित होता है, जबकि तालिका को ऑफ-स्क्रीन निकाला जा रहा है। दोनों तालिकाएं प्रतिबंधों और किसी भी स्थिति के बिना कोशिकाओं के पुन: उपयोग की सभी संभावनाओं पर प्रतिबंध के बिना उपयोग कर सकती हैं।

OLEContainerScrollView के काम का प्रदर्शन । वीडियो डाउनलोड करें (H.264 प्रारूप में) ।

कोड

OLEContainerScrollView वर्ग इंटरफ़ेस इस तरह दिखता है:

कोड

@interface OLEContainerScrollView : UIScrollView - (void)addSubviewToContainer:(UIView *)subview; - (void)removeSubviewFromContainer:(UIView *)subview; @end

और यहां लेआउटस् यू साक्षात्कार विधि का कार्यान्वयन है, जो सभी काम करता है:

 @implementation OLEContainerScrollView ... - (void)layoutSubviews { [super layoutSubviews]; // Translate the container view's content offset to contentView bounds. // This keeps the contentview always centered on the visible portion of the container view's // full content size, and avoids the need to make the contentView large enough to fit the // container view's full content size. self.contentView.frame = self.bounds; self.contentView.bounds = (CGRect){ self.contentOffset, self.contentView.bounds.size }; // The logical vertical offset where the current subview (while iterating over all subviews) // must be positioned. Subviews are positioned below each other, in the order they were added // to the container. For scroll views, we reserve their entire contentSize.height as vertical // space. For non-scroll views, we reserve their current frame.size.height as vertical space. CGFloat yOffsetOfCurrentSubview = 0.0; for (UIView *subview in self.contentView.subviews) { if ([subview isKindOfClass:[UIScrollView class]]) { UIScrollView *scrollView = (UIScrollView *)subview; CGRect frame = scrollView.frame; CGPoint contentOffset = scrollView.contentOffset; // Translate the logical offset into the sub-scrollview's real content offset and frame size. // Methodology: // (1) As long as the sub-scrollview has not yet reached the top of the screen, set its scroll position // to 0.0 and position it just like a normal view. Its content scrolls naturally as the container // scroll view scrolls. if (self.contentOffset.y < yOffsetOfCurrentSubview) { contentOffset.y = 0.0; frame.origin.y = yOffsetOfCurrentSubview; } // (2) If the user has scrolled far enough down so that the sub-scrollview reaches the top of the // screen, position its frame at 0.0 and start adjusting the sub-scrollview's content offset to // scroll its content. else { contentOffset.y = self.contentOffset.y - yOffsetOfCurrentSubview; frame.origin.y = self.contentOffset.y; } // (3) The sub-scrollview's frame should never extend beyond the bottom of the screen, even if its // content height is potentially much greater. When the user has scrolled so far that the remaining // content height is smaller than the height of the screen, adjust the frame height accordingly. CGFloat remainingBoundsHeight = fmax(CGRectGetMaxY(self.bounds) - CGRectGetMinY(frame), 0.0); CGFloat remainingContentHeight = fmax(scrollView.contentSize.height - contentOffset.y, 0.0); frame.size.height = fmin(remainingBoundsHeight, remainingContentHeight); frame.size.width = self.contentView.bounds.size.width; scrollView.frame = frame; scrollView.contentOffset = contentOffset; yOffsetOfCurrentSubview += scrollView.contentSize.height; } else { // Normal views are simply positioned at the current offset CGRect frame = subview.frame; frame.origin.y = yOffsetOfCurrentSubview; frame.size.width = self.contentView.bounds.size.width; subview.frame = frame; yOffsetOfCurrentSubview += frame.size.height; } } self.contentSize = CGSizeMake(self.bounds.size.width, fmax(yOffsetOfCurrentSubview, self.bounds.size.height)); } @end

बाकी कोड काफी बॉयलरप्लेट है, आप गिटहब पर इससे परिचित हो सकते हैं।

ऑटो लेआउट

ऑटो लेआउट के बारे में कुछ शब्द: OLEContainerScrollView आंतरिक रूप से इस फ़ंक्शन का उपयोग नहीं करता है, और ऑटो लेआउट स्पेसर्स ( UIScrollView और ऑटो लेआउट बहुत अच्छे दोस्त नहीं हैं , वैसे भी ) इस व्यवहार को लागू करना संभव नहीं है। हालांकि, अन्य वस्तुओं के साथ इस वर्ग का उपयोग करने में कोई समस्या नहीं होनी चाहिए जो स्वयं के लेआउट के लिए ऑटो लेआउट का उपयोग करते हैं। जैसा कि मैंने पहले कहा था, आप मैनुअल लेआउट और ऑटो लेआउट को काफी आसानी से मिला सकते हैं।

अरे, पॉडसेक कहाँ है?

मैंने जानबूझकर OLEContainerScrollView से कोकोपोड (अभी तक) नहीं बनाया है। मैंने अपनी विशिष्ट समस्या को हल करने के लिए इस वर्ग को लिखा है, और मेरा मानना है कि इसमें एक सामान्य घटक के रूप में विकसित होने की पर्याप्त क्षमता है। बेशक, अभी तक यह नहीं है। सीमाएँ इस प्रकार हैं:

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

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

निष्कर्ष

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

OLEContainerScrollView वर्तमान में पूरी तरह से कार्यात्मक घटक नहीं है, लेकिन मुझे आशा है कि यह आपकी मदद से ऐसा हो जाएगा। किसी भी मामले में, इस घटक को लिखने से मुझे UIScrollView डिवाइस और UIKit समन्वय प्रणाली के बारे में मेरी समझ को गहरा करने में मदद मिली।

पाद टिप्पणियों:

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

अनुवादक से

गहरी समझ के लिए UIScrollView के अंडरस्टैंडिंग आर्टिकल को पढ़ना भी उचित है।

स्क्रॉल दृश्य के अंदर स्क्रॉल दृश्य