IOS TOPICS

IOS Introduction
Swift UI Label
Swift UI Button
Swift UI Text Field
Swift UI Slider
Swift UI Switch
Swift UI Stepper
Swift UI Date Picker
Swift UI Segmented Control
Views
Table View
Collection Views
SCROLL VIEW
iOS Content View
iOS View Controllers
iOS Bar interface
iOS Navigation interface
iOS Architect Pattern
iOS Libraries
iOS Web request and parsing
iOS user defaults
iOS Coredata and database

create Collection Views


How to create Collection Views in Applications?

Launch a new project in Xcode from the Launchpad on your Mac. You should see the welcome screen as shown below.

ios output

(If you don’t then go to file>new>playground)

ios output

Click on “Create a new Xcode project

ios output

The dialog that pops up allows you to choose a template for your project. For the purposes of this article choose “App” under “Application.”

ios output

The following dialog box opens up. Here you can name the project CollectionView, choose the type of interface as “Storyboard” and select the Life Cycle as “SwiftUI App” & finally the language you want to continue in as “Swift”.

ios output

Finally, choose where you’d like to save the file and click create.

ios output

In the canvas, next to the code editor, click Resume to display the preview. If it isn’t visible, go to Editor and click Editor and Canvas to view it.

From the left hand side of the window, select ContentView.swift.
Delete the reference file.

ios output

Go to story board and delete the View Controller Scene

ios output

From the top right corner use the plus sign to find a Collection View Controller. Drag and drop it into the storyboard.

ios output

At this point you’ll see a single tiny on the storyboard

ios output

Now we need to create the source code file for this Collection View Controller. Do do so we need to add a Cocoa Touch Class from the New File option

ios output

XCode gives it the default name of CollectionViewController and we can go ahead with that. Just make sure it’s a subclass of UICollectionViewController.

ios output

At this point XCode inserts a template code for us.

ios output

We need to go ahead and remove most of the the code created under CollectionViewController.swift and leave just the following

ios output

Now let’s create a Data set for the values in our Grid

Code:

import UIKit class CollectionViewController: UICollectionViewController { let dataSource: [String] = ["Aanya", "Akhil" , "Ryan", "Suzie", "Lakshya", "Vivant", "Tejaswi", "Zayn"] override func viewDidLoad() { super.viewDidLoad() } }

Let’s let’s implement some methods allowed under CollectionViews

Code:

import UIKit class CollectionViewController: UICollectionViewController { let dataSource: [String] = ["Aanya", "Akhil" , "Ryan", "Suzie", "Lakshya", "Vivant", "Tejaswi", "Zayn"] override func viewDidLoad() { super.viewDidLoad() } override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return dataSource.count } override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { return UICollectionViewCell() } }

Going back to the main storyboard As we can see there’s an empty collection view cell class that we need to subclass it so that we can apply customizations to all the cells. To do so, we add another Cocoa Touch Class to the UICollectionViewTest class and make it a subclass of UICollectionViewCell. Let the default name stay.

ios output

At this point we need to make sure the story board always uses this custom view cell and to use a label for the data we input previously. First we open up the assistant editor from the top right and bring the main storyboard on the other side.

ios output

Now we go to the Identity inspector for the Collection View Cell and set Class, under Custom Class to point to our custom subclass by changing it to CollectionViewCell

ios output

Now we go to the library and drag and drop a label to the Cell’s content view.

ios output ios output

Now we need to create an outlet connection from this label to the cell and name it, say, “LabelName”.

ios output ios output

Make it private and use the following piece of code