About UICollectionView in IOS

About UICollectionView in IOS

UICollectionView, Manages an ordered collection of data item and present them using customizable layouts.

UICollectionView is same as the UITableView. UITableView manages a collection of data or information and display then on the screen in a single column layout whereas UICollectionView offers developers flexibility to present item using customize layout.

UICollectionView has three components:-

  1. Cell:

It is an instance of UICollectionViewCell . It represent a single item in the data collection.

  1. Supplementary views:

It is optional and usually used to implement the header or footer view of the sections.

  1. Decoration views:

It is another type of supplementary view but for decoration purpose only. It is not related to data collection. We create decoration view to enhance the visual appearance of the CollectionView.

Step 1:

Open the Excode and select the Single View Application.

UICollectionView

Step 2:

Create project with “ExCollectionView” name.

UICollectionView

Step 3:

Open the StoryBoard and there is a ViewController and drag the CollectionVIew inside the ViewController .

And set the Add New Constraints.

UIViewController

Step 4:

Select now the cell inside the UIViewController and add the UIImage in the UICollectionView cell and also set the UIImage constraints.

UIViewController

UIViewController

And open the ViewController.swift and add the extension of  UICollectionViewDataSource,UICollectionViewDelegatein the ViewCollection.swift.

And these three method in the ViewController.swift:

func numberOfSections(in collectionView: UICollectionView) -> Int {

        code

    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        code

    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) ->      UICollectionViewCell {

        code

    }

UICollectionViewCel

After that select the UICollectionViewCell and set the name of the reuseIdentifier = “MyCollectionViewCell”

Using Assistant Editor, add an IBOutlet to CollectionView in ViewController.swift

@IBOutlet weak var collectionView: UICollectionView!

Create a new Cocoa Touch Class file (File > New > File… > iOS > Cocoa Touch Class). Name it MyCollectionViewCell. This class will hold the outlets for the views that you add to your cell in the storyboard.

UIViewController

UIViewController

And open the ViewController.swift and add this code in the numberOfItemInSection in collectionview:

UIViewController

And go to the main story board and select the UIImage and set the image in the UIImage.

UIviewcontroller

And also add one method in the viewcontroller.swift:

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout:    UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        return (indexPath.section == 0) ? CGSize(width: collectionView.bounds.size.width, height: 200) : CGSize(width: collectionView.bounds.size.width/2 – 2, height: 170)

    }

And after the execude your code

UIImageView

It should be look like this. If you want to add multi image in the UIImageView then you use the array and pass the image in the array and cell in the cellForRowAtIndexPath method.

 

Also Read- About Intents in Android

If you are, looking to design andDevelop for your project then feel free to contact us at any time

Call Us- +91 9910781148, +1 8033353593
Email: company@tecorb.com
Skype- tecorb
“We maintain transparency with our customers. Our values and business ethics has given us repeated customers. We tend are proud to be a reliable outsourcing partner for many clients across the World.”

Published By- Rachit Sharma (IOS Developer)