अनंत UIScrollView

कई अनुप्रयोगों में, आप स्क्रॉलिंग का सामना कर सकते हैं जो सामग्री के अंत में विपरीत दिशा में कभी नहीं लपेटता है। यह तकनीक कई प्लेटफार्मों पर कई वर्षों तक मानक रही है। दूसरी ओर, इस प्रभाव को प्राप्त करने के लिए कई तृतीय-पक्ष पुस्तकालय हैं। लेकिन आपको किसी तीसरे पक्ष के पुस्तकालय की आवश्यकता नहीं है। इस तकनीक में बहुत सरल तर्क है।

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



हम चाहते हैं कि जब उपयोगकर्ता अपनी संख्या को पार करना चाहते हैं, तो स्क्रॉल ऑफ़ कंटेंट ऑफ़सेट को सीमित न करें। इसलिए, हमें UIScrollView में दो और पृष्ठ जोड़ने की आवश्यकता है। अंतिम पृष्ठ शून्य इंडेक्स में जोड़ा जाएगा, और पहला पेज इंडेक्स (नंबरऑफइम्स + 1) में जोड़ा जाएगा। फिर, यदि उपयोगकर्ता "नंबरऑफिट्स" पेज को देखता है, तो स्क्रॉल कंटेंट x ऑफ़सेट 0 पर सेट हो जाता है। यदि उपयोगकर्ता इंडेक्स 0 को देखता है, तो स्क्रॉलव्यू एक्स कंटेंट ऑफ़सेट "पेजसाइज़ * नंबरऑफिम्स" पर सेट हो जाएगा।



पहली बात यह है कि UIView से विरासत में प्राप्त एक नया वर्ग बनाना है।



BannerView नीचे के रूप में होना चाहिए:

import UIKit class BannerView: UIView { override init(frame: CGRect) { super.init(frame: frame) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } } 

यहां कुछ भी असामान्य नहीं है। अब हमें BannerView के लिए स्क्रॉलव्यू और सेटअप कोड जोड़ना होगा:

 import UIKit class BannerView: UIView { private let scrollView:UIScrollView = { let sc = UIScrollView(frame: .zero) sc.translatesAutoresizingMaskIntoConstraints = false sc.isPagingEnabled = true return sc }() // BannerView DataSources (1) private var itemAtIndex:((_ bannerView:BannerView , _ index:Int)->(UIView))! private var numberOfItems:Int = 0 override init(frame: CGRect) { super.init(frame: frame) setUpUI() } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setUpUI() { scrollView.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height) scrollView.delegate = self self.addSubview(scrollView) scrollView.showsHorizontalScrollIndicator = false } func reloadData(numberOfItems:Int , itemAtIndex:@escaping ((_ bannerView:BannerView , _ index:Int)->(UIView)) ) { self.itemAtIndex = itemAtIndex self.numberOfItems = numberOfItems reloadScrollView() } private func reloadScrollView() { guard self.numberOfItems > 0 else { return } if self.numberOfItems == 1 { let firstItem:UIView = self.itemAtIndex(self , 0) addViewToIndex(view: firstItem, index: 0) scrollView.isScrollEnabled = false return } let firstItem:UIView = self.itemAtIndex(self , 0) addViewToIndex(view: firstItem, index: numberOfItems+1) let lastItem:UIView = self.itemAtIndex(self , numberOfItems-1) addViewToIndex(view: lastItem, index: 0) for index in 0..<self.numberOfItems { let item:UIView = self.itemAtIndex(self , index) addViewToIndex(view: item, index: index+1) } scrollView.contentSize = CGSize(width: CGFloat(numberOfItems+2)*scrollView.frame.size.width, height: scrollView.frame.size.height) scrollView.contentOffset = CGPoint(x: self.scrollView.frame.size.width, y: self.scrollView.contentOffset.y) } private func addViewToIndex(view:UIView, index:Int) { view.translatesAutoresizingMaskIntoConstraints = false scrollView.addSubview(view) view.frame = CGRect(x: CGFloat(index)*scrollView.frame.size.width, y: 0, width: scrollView.frame.size.width, height: scrollView.frame.size.height) } } 

मैंने सादगी के लिए ऑटो लेआउट के बजाय फ्रेम का उपयोग किया। इसके अलावा, मैंने प्रतिनिधियों के बजाय क्लोजर का इस्तेमाल किया। यह ViewController में गंदगी से बचने में मदद करता है। क्लोजर के साथ, आप केवल बैनर व्यू का उपयोग इस प्रकार कर सकते हैं:

 // ViewController.swift bannerView = BannerView(frame: CGRect(x: 0, y: 64, width: self.view.frame.size.width, height: 200)) self.view.addSubview(bannerView) bannerView.reloadData(numberOfItems: 5) { (bannerView, index) -> (UIView) in let view = UIView() view.backgroundColor = UIColor.red return view } 

UIScrollView को दर्शाने के लिए, मैं scrollViewDidScroll (_ स्क्रॉल दृश्य: UIScrollView) के बजाय स्क्रॉलव्यूडाईंडकेंडेलरेटिंग (_ स्क्रॉल दृश्य: UIScrollView) का उपयोग करूंगा। क्योंकि हमें प्रत्येक स्क्रॉल दृश्य आंदोलन के साथ स्वैप स्थिति की गणना करने की आवश्यकता नहीं है।

 func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { let currentPage:Int = Int(scrollView.contentOffset.x / scrollView.frame.size.width) if currentPage == 0 { self.scrollView.contentOffset = CGPoint(x: scrollView.frame.size.width * CGFloat(numberOfItems), y: scrollView.contentOffset.y) } else if currentPage == numberOfItems { self.scrollView.contentOffset = CGPoint(x: 0, y: scrollView.contentOffset.y) } } 

और अंत में, हमारा कोड BannerView.swift के लिए इस तरह होगा:

 // BannerView.swift import UIKit class BannerView: UIView , UIScrollViewDelegate{ private let scrollView:UIScrollView = { let sc = UIScrollView(frame: .zero) sc.translatesAutoresizingMaskIntoConstraints = false sc.isPagingEnabled = true return sc }() private var itemAtIndex:((_ bannerView:BannerView , _ index:Int)->(UIView))! private var numberOfItems:Int = 0 override init(frame: CGRect) { super.init(frame: frame) setUpUI() } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func reloadData(configuration:BannerViewConfiguration? , numberOfItems:Int , itemAtIndex:@escaping ((_ bannerView:BannerView , _ index:Int)->(UIView)) ) { self.itemAtIndex = itemAtIndex self.numberOfItems = numberOfItems reloadScrollView() } private func reloadScrollView() { guard self.numberOfItems > 0 else { return } if self.numberOfItems == 1 { let firstItem:UIView = self.itemAtIndex(self , 0) addViewToIndex(view: firstItem, index: 0) scrollView.isScrollEnabled = false return } let firstItem:UIView = self.itemAtIndex(self , 0) addViewToIndex(view: firstItem, index: numberOfItems+1) let lastItem:UIView = self.itemAtIndex(self , numberOfItems-1) addViewToIndex(view: lastItem, index: 0) for index in 0..<self.numberOfItems { let item:UIView = self.itemAtIndex(self , index) addViewToIndex(view: item, index: index+1) } scrollView.contentSize = CGSize(width: CGFloat(numberOfItems+2)*scrollView.frame.size.width, height: scrollView.frame.size.height) scrollView.contentOffset = CGPoint(x: self.scrollView.frame.size.width, y: self.scrollView.contentOffset.y) } private func addViewToIndex(view:UIView, index:Int) { view.translatesAutoresizingMaskIntoConstraints = false scrollView.addSubview(view) view.frame = CGRect(x: CGFloat(index)*scrollView.frame.size.width, y: 0, width: scrollView.frame.size.width, height: scrollView.frame.size.height) } func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { let currentPage:Int = Int(scrollView.contentOffset.x / scrollView.frame.size.width) if currentPage == 0 { self.scrollView.contentOffset = CGPoint(x: scrollView.frame.size.width * CGFloat(numberOfItems), y: scrollView.contentOffset.y) } else if currentPage == numberOfItems { self.scrollView.contentOffset = CGPoint(x: 0, y: scrollView.contentOffset.y) } } private func setUpUI() { scrollView.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height) scrollView.delegate = self self.addSubview(scrollView) scrollView.showsHorizontalScrollIndicator = false } } 

परिणाम

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

→ GitHub पर पूर्ण स्रोत कोड पाया जा सकता है