How to create CollectionView Layout in an iOS App?

iOSApps/ApplicationsMobile Development

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
   }
}
raja
Published on 30-Aug-2019 14:46:52
Advertisements