Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create CollectionView Layout in an iOS App?
CollectionView with TableView are two of many fundamental concept of iOS development, every developer should master both to be a good developer.
In this post we will be focussing mainly on CollectionView, CollectionView is same as table view with some difference, Collection View supports both horizontal and vertical scrolling which looks like a grid. CollectionView in iOS is also referred to grid view in Android.
To read more about it you can refer https://developer.apple.com/documentation/uikit/uicollectionview
As you can see Collection View consists of Supplementary View and Cell, The collection view presents items onscreen using a cell, which is an instance of the UICollectionViewCell class that your data source configures and provides.
your data source configures and provides.
In addition to its cells, the supplementary views can be things like section headers and footers that are separate from the individual cells but still convey some sort of information. Support for supplementary views is optional and defined by the collection view’s layout object, which is also responsible for defining the placement of those views.
So in this post, we will see how to create Collection View,
So Let’s get started,
Step 1 − Open Xcode and create a single view application and name it SampleCollectionView.
Step 2 − In Main. storyboard add UICollectionView as shown below,
Step 3 − Select on collection view cell and name the reuse identifier as “cell” as shown below.
Step 4 − Create a new Cocoa touch file name it CollectionViewCell of type UICollectionViewCell and add class the same to cell as shown below.
Step 5 − Create @IBOutlet of collection view in ViewController.swift.
Step 6 − Now add delegate and data source to collection view
Step 7 − Open ViewController.swift and confirm to UICollectionViewDelegate and UICollectionViewDataSource
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource
Step 8 − Implement mandatory delegate methods as shown below
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
}Step 9 − Run the application, you can scroll vertically, to make collection view scroll horizontal,
Change the Scroll Direction property to horizontal.
Complete code
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
}
}
337 Views
