আমি কীভাবে ব্যবহার করতে হয় তা শেখার চেষ্টা করছি UICollectionView। ডকুমেন্টেশন একটু কঠিন বুঝতে এবং টিউটোরিয়াল যে আমি উদ্দেশ্য সি বা দীর্ঘ জটিল প্রকল্পে পারেন ছিলেন পাওয়া যায়।
যখন আমি কীভাবে ব্যবহার করতে হয় তা শিখছিলাম UITableView, আমরা iOS আইওএস 8 এর সাথে সুইফটস কীভাবে একটি সাধারণ টেবিলভিউ তৈরি করতে পারি এবং আমাকে চালিত করার জন্য সুইফটের একটি খুব বেসিক সেটআপ এবং ব্যাখ্যা ছিল। এর জন্য কি এরকম কিছু আছে UICollectionView?
নীচের উত্তরটি আমার এটি করতে শেখার চেষ্টা attempt
উত্তর:
এই প্রকল্পটি এক্সকোড 10 এবং সুইফট 4.2 দিয়ে পরীক্ষা করা হয়েছে।
এটি কেবল একটি একক ভিউ অ্যাপ্লিকেশন হতে পারে।
একটি নতুন কোকো টাচ ক্লাস ফাইল তৈরি করুন (ফাইল> নতুন> ফাইল ...> আইওএস> কোকো টাচ ক্লাস)। এর নাম দিন MyCollectionViewCell। আপনি স্টোরিবোর্ডে আপনার ঘরে যোগ করেছেন এমন দর্শনগুলির জন্য এই শ্রেণিটি আউটলেটগুলিকে ধারণ করবে।
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var myLabel: UILabel!
}আমরা এই আউটলেটটি পরে সংযুক্ত করব।
ভিউকন্ট্রোল.আরউইফ্টটি খুলুন এবং আপনার নীচের সামগ্রীটি নিশ্চিত করুন:
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
// MARK: - UICollectionViewDataSource protocol
// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.items.count
}
// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// get a reference to our storyboard cell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell
// Use the outlet in our custom class to get a reference to the UILabel in the cell
cell.myLabel.text = self.items[indexPath.item]
cell.backgroundColor = UIColor.cyan // make cell more visible in our example project
return cell
}
// MARK: - UICollectionViewDelegate protocol
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// handle tap events
print("You selected cell #\(indexPath.item)!")
}
}মন্তব্য
UICollectionViewDataSourceএবং UICollectionViewDelegateসংগ্রহগুলি অনুসরণ করে যে প্রোটোকলগুলি তা অনুসরণ করে। আপনি UICollectionViewFlowLayoutপ্রোগ্রামের মাধ্যমে দর্শনের আকার পরিবর্তন করতে প্রোটোকল যুক্ত করতে পারেন তবে এটি প্রয়োজনীয় নয়।আপনার স্টোরিবোর্ডে ভিউ কন্ট্রোলারে একটি সংগ্রহ দেখুন টেনে আনুন। আপনি যদি চান তবে এটি প্যারেন্ট ভিউ পূরণ করতে বাধা যুক্ত করতে পারেন।
নিশ্চিত করুন যে অ্যাট্রিবিউট ইন্সপেক্টরটিতে আপনার ডিফল্টগুলিও রয়েছে
কালেকশন ভিউয়ের উপরের বামের ছোট্ট বক্সটি একটি সংগ্রহ ভিউ সেল। আমরা এটিকে আমাদের প্রোটোটাইপ সেল হিসাবে ব্যবহার করব। ঘরে একটি লেবেল টেনে আনুন এবং এটি কেন্দ্র করুন। আপনি চাইলে কক্ষের সীমানা পুনরায় আকার দিতে পারেন এবং লেবেলটিকে কেন্দ্র করে প্রতিবন্ধকতা যুক্ত করতে পারেন।
সংগ্রহ ভিউ সেলের জন্য বৈশিষ্ট্য পরিদর্শকের আইডেন্টিফায়ার বাক্সে "সেল" (উদ্ধৃতি ব্যতীত) লিখুন। দ্রষ্টব্য যে এটি let reuseIdentifier = "cell"ভিউকন্ট্রোলআর সুইফটে একই মান ।
এবং কক্ষের জন্য পরিচয় পরিদর্শকটিতে, শ্রেণীর নামটি সেট করুন MyCollectionViewCell, আমরা তৈরি আমাদের কাস্টম ক্লাসটি।
myLabelমধ্যে MyCollectionViewCellবর্গ। (আপনি নিয়ন্ত্রণ-টানতে পারেন ।)delegateএবং dataSourceদেখুন কন্ট্রোলার করতে। (ডকুমেন্টের আউটলাইনে কালেকশন ভিউতে ডান ক্লিক করুন Then তারপরে ভিউ কন্ট্রোলারের কাছে যোগ তীরটি ক্লিক করুন এবং টেনে আনুন))
কক্ষের লেবেলটিকে কেন্দ্র করে সীমাবদ্ধতা যুক্ত করার পরে এবং পিতামাতার দেয়ালে কালেকশন ভিউটি পিন করার পরে দেখতে দেখতে এটি দেখতে কেমন।
উপরের উদাহরণটি কাজ করে তবে এটি কুরুচিপূর্ণ। এখানে কয়েকটি জিনিস যা আপনি খেলতে পারেন তা এখানে:
পেছনের রং
ইন্টারফেস বিল্ডারে, আপনার সংগ্রহ দেখুন> বৈশিষ্ট্য পরিদর্শক> দেখুন> পটভূমিতে যান ।
কক্ষের ব্যবধান
কক্ষগুলির মধ্যে ন্যূনতম ব্যবধানকে একটি ছোট মানকে পরিবর্তন করা আরও ভাল দেখায়। ইন্টারফেস বিল্ডারে, আপনার সংগ্রহ দেখুন> আকার পরিদর্শক> নূন্যতম ব্যবধানে যান এবং মানগুলি আরও ছোট করুন। "সেলগুলির জন্য" হ'ল অনুভূমিক দূরত্ব এবং "লাইনগুলির জন্য" উল্লম্ব দূরত্ব।
ঘরের আকৃতি
আপনি যদি গোলাকার কোণ, একটি সীমানা এবং এর মতো চান তবে আপনি ঘরের সাথে চারদিকে খেলতে পারেন layer। এখানে কিছু নমুনা কোড। আপনি cell.backgroundColor = UIColor.cyanউপরের কোডের পরে এটি সরাসরি রাখবেন ।
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8স্তরটি আপনি যে স্তরটি করতে পারেন তার জন্য এই উত্তরটি দেখুন (ছায়া, উদাহরণস্বরূপ)।
আলতো চাপলে রঙ পরিবর্তন করা
কোষগুলি টেপগুলিতে দর্শনীয়ভাবে প্রতিক্রিয়া জানায় এটি আরও ভাল ব্যবহারকারীর অভিজ্ঞতা অর্জন করে। এটি অর্জনের একটি উপায় হ'ল ঘরের স্পর্শ করার সময় পটভূমির রঙ পরিবর্তন করা। এটি করতে আপনার ViewControllerক্লাসে নিম্নলিখিত দুটি পদ্ধতি যুক্ত করুন :
// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.red
}
// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.cyan
}আপডেট বর্ণনটি এখানে:
@IBOutletজন্য myLabelকোডে, আপনি এটির মতো একটি ক্র্যাশ পেতে হবে।
self.collectionView.registerClass(MyCollectionViewCell.self, forCellWithReuseIdentifier: "Cell")। আপনার যদি এখনও সমস্যা হয় তবে চেক ওয়েদার reuseIdentifierএকই dequeueReusableCellWithReuseIdentifierএবং স্টোরিবোর্ডে একই
ইউআইકોোলিকেশনভিউয়ের প্রতিনিধি এবং ডেটাসোর্সেস
//MARK: UICollectionViewDataSource
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1 //return number of sections in collection view
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10 //return number of rows in section
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath)
configureCell(cell, forItemAtIndexPath: indexPath)
return cell //return your cell
}
func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
cell.backgroundColor = UIColor.blackColor()
//Customise your cell
}
override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
let view = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView
return view
}
//MARK: UICollectionViewDelegate
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// When user selects the cell
}
override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
// When user deselects the cell
}জন্য swift 4.2-
//MARK: UICollectionViewDataSource
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return 1 //return number of sections in collection view
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10 //return number of rows in section
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath as IndexPath)
configureCell(cell: cell, forItemAtIndexPath: indexPath)
return cell //return your cell
}
func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
cell.backgroundColor = UIColor.black
//Customise your cell
}
func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
let view = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", for: indexPath as IndexPath) as UICollectionReusableView
return view
}
//MARK: UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
// When user selects the cell
}
func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
// When user deselects the cell
}ইউআইকোলিকেশনভিউ বাস্তবায়ন বেশ আকর্ষণীয়। আপনি সাধারণ উত্স কোড ব্যবহার করতে পারেন এবং এই লিঙ্কগুলি ব্যবহার করে একটি ভিডিও টিউটোরিয়াল দেখতে পারেন:
https://github.com/Ady901/Demo02CollectionView.git
https://www.youtube.com/watch?v=5SrgvZF67Yw
extension ViewController : UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return nameArr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DummyCollectionCell", for: indexPath) as! DummyCollectionCell
cell.titleLabel.text = nameArr[indexPath.row]
cell.userImageView.backgroundColor = .blue
return cell
}
}
extension ViewController : UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let alert = UIAlertController(title: "Hi", message: "\(nameArr[indexPath.row])", preferredStyle: .alert)
let action = UIAlertAction(title: "OK", style: .default, handler: nil)
alert.addAction(action)
self.present(alert, animated: true, completion: nil)
}
}ইউআইসিওলেকশনভিউটি ইউআইটিএবলভিউয়ের মতোই তবে এটি আমাদের কেবল গ্রিড ভিউ তৈরির অতিরিক্ত কার্যকারিতা দেয় যা ইউআইটিএবলভিউতে কিছুটা সমস্যাযুক্ত। এটি একটি দীর্ঘ পোস্ট হবে আমি একটি লিঙ্ক উল্লেখ করেছি যেখানে থেকে আপনি সহজ পদক্ষেপে সবকিছু পাবেন।