Tutorial to Create GRID VIEW using collection view in Swift 3 (IOS)

In this tutorial we are going to learn how to show data in Grid using collection view
-It is very simple process if you follow this tutorial step by step
create a ViewController file named HomeVC, add a view controller to it
Now you create a new Cocoa touch class and in the dropdown option you have to chose the UICollectionViewCell

name the class as Homecollection
now in the main Viewcontroller you have to drag CollectionView in to the ViewController
once you have done that all you have to do is select the Colelction View cell and expand it to the size you want your single entity of the grid should look like
After this put elements like textbox, label, imageview whatever you want into this Grid
once you have done that just hold the Collection View in the Scene menu and hold control and drag it to the View controller, if done properly it will show you something like this




All you have to do is to click on dataSource and delegate and make them selected
Now in the HomeVC after UIViewController add UICollectionViewDataSource, UICollectionViewDelegate
once you have done this then you can open the Homecollection and drag the outlert of the imageview to it
YOU ARE ALL set
Write all the functions of the UICollectionViewDataSource, UICollectionViewDelegate and once done properly you can bring all images in the GRID view. as @IBOutlet weak var photoCollection: UICollectionView!
drag the outlet of collectionView in the HomeVC as photoCollection and write the identifier in the identifier inspector as “cell”
in the func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

let cell : HomeCollection = (photoCollection.dequeueReusableCell(withReuseIdentifier: “cell”, for: indexPath as IndexPath) as? PhotosCVC)!

cell.layer.cornerRadius = 10
cell.layer.masksToBounds = true

cell.populate(data: webRes[indexPath.row])
print(webRes[indexPath.row])

cell.layoutMargins = UIEdgeInsets.zero
cell.preservesSuperviewLayoutMargins = false
eturn cell

 

GRID VIEW using collection view in Swift 3 IOS

GRID VIEW using collection view in Swift 3 IOS

 

Image Courtesy:

Figures: google.com/images


Written and submitted by: Niket Singh

Leave a Reply

Your email address will not be published. Required fields are marked *