CollectionView और TableView iOS डेवलपमेंट के कई मौलिक कॉन्सेप्ट्स में से दो हैं, हर डेवलपर को एक अच्छा डेवलपर बनने के लिए दोनों में मास्टर होना चाहिए।
इस पोस्ट में हम मुख्य रूप से CollectionView पर ध्यान केंद्रित करेंगे। CollectionView टेबल व्यू के समान है लेकिन कुछ अंतर के साथ, Collection View हॉरिजॉन्टल और वर्टिकल दोनों स्क्रॉलिंग को सपोर्ट करता है जो ग्रिड जैसा दिखता है। iOS में CollectionView को Android में ग्रिड व्यू भी कहा जाता है।
इसके बारे में यहाँ और पढ़ें: https://developer.apple.com/documentation/uikit/uicollectionview
जैसा कि आप देख सकते हैं Collection View में Supplementary View और Cell होते हैं, कलेक्शन व्यू एक सेल का उपयोग करके आइटम्स को ऑनस्क्रीन प्रस्तुत करता है, जो UICollectionViewCell क्लास का एक इंस्टेंस है जिसे आपका डेटा सोर्स कॉन्फिगर और प्रदान करता है।
सेल्स के अलावा, सप्लीमेंट्री व्यूज सेक्शन हेडर्स और फूटर्स जैसी चीजें हो सकती हैं जो इंडिविजुअल सेल्स से अलग होती हैं लेकिन फिर भी किसी प्रकार की जानकारी देती हैं। सप्लीमेंट्री व्यूज के लिए सपोर्ट वैकल्पिक है और कलेक्शन व्यू के लेआउट ऑब्जेक्ट द्वारा परिभाषित किया जाता है, जो उन व्यूज के प्लेसमेंट को परिभाषित करने के लिए भी जिम्मेदार होता है।
तो इस पोस्ट में, हम देखेंगे कि Collection View कैसे बनाएं
चरण 1: प्रोजेक्ट बनाएं
Xcode खोलें और सिंगल व्यू एप्लिकेशन बनाएं और नाम दें "SampleCollectionView"
चरण 2: UICollectionView जोड़ें
Main.storyboard में नीचे दिखाए अनुसार UICollectionView जोड़ें।
चरण 3: रीयूज आइडेंटिफायर सेट करें
कलेक्शन व्यू सेल पर चुनें और रीयूज आइडेंटिफायर को "cell" नाम दें।
चरण 4: कस्टम सेल क्लास बनाएं
नया Cocoa Touch फाइल बनाएं नाम दें CollectionViewCell टाइप UICollectionViewCell और उसी क्लास को सेल में जोड़ें।
चरण 5: आउटलेट बनाएं
ViewController.swift में कलेक्शन व्यू का @IBOutlet बनाएं।
चरण 6: डेलीगेट और डेटा सोर्स जोड़ें
चरण 7: प्रोटोकॉल कंफर्म करें
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSourceचरण 8: अनिवार्य डेलीगेट मेथड्स इम्प्लीमेंट करें
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 500
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.backgroundColor = UIColor.gray
return cell
}चरण 9: एप्लिकेशन चलाएं
आप वर्टिकली स्क्रॉल कर सकते हैं, कलेक्शन व्यू को हॉरिजॉन्टल स्क्रॉल करने के लिए, Scroll Direction प्रॉपर्टी को हॉरिजॉन्टल में बदलें।
पूरा कोड
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
@IBOutlet var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 500
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.backgroundColor = UIColor.gray
return cell
}
}
