Final result:
Step 1.
Add collection view on view controller add the constraints to expand the view controller and there is a cell in collection view .
Add UIImageView and Label on the cell and there is the reusable collection cell named as MovieCollectionViewCell
Step2.
Add collection view cell to the class by Cocoa Touch which subclass of UICollectionViewCell named as MovieUICollectionViewCell
Connecting MovieCollectionViewCell as class and identifier
Step 3. Connect UIImageView and Label of MovieCollectionViewCell
Move to storyboard, use assistant mode, and press option tab MovieCollectionViewCell.swift
Step 4.
Implement collection in VeiwController.swift
Link collectionVeiw to VeiwController.swift
class ViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// specify number of row, number of items, etc
collectionView.dataSource = self // specify width and height of the cell, etc
collectionView.delegate = self
}
}
using extention specify the methods dataSource needs by inherited protocol UICollectionViewDataSource
extension ViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
}
}Step 5.
Add Pictures in Assets folder
Create the Movie.swift and be aware of movies is a global variable!
import UIKitstruct Movie {
let title: String
let image: UIImage
}let movies: [Movie] = [ Movie(title: "agentsOfShield", image: UIImage(named: "agentsOfShield")!), Movie(title: "blindspot", image: UIImage(named: "blindspot")!), Movie(title: "boldType", image: UIImage(named: "boldType")!), Movie(title: "dcLegendsOfShield", image: UIImage(named: "dcLegendsOfShield")!), Movie(title: "doomPatrol", image: UIImage(named: "doomPatrol")!), Movie(title: "hightown", image: UIImage(named: "hightown")!), Movie(title: "inTheDark", image: UIImage(named: "inTheDark")!), Movie(title: "pennyDreadful", image: UIImage(named: "pennyDreadful")!), Movie(title: "siren", image: UIImage(named: "siren")!), Movie(title: "theHundred", image: UIImage(named: "theHundred")!),]
Use global variablemovies to implement the methods in ViewController.swift
extension ViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return movies.count }
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MovieCollectionViewCell", for: indexPath) as! MovieCollectionViewCell
// Populate cell from movies array
cell.setup(with: movies[indexPath.row])
return cell
}
}
Create function setup in MovieCollectionViewCell.swift
class MovieCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var movieImageView: UIImageView!
@IBOutlet weak var movieTitle: UILabel!
// function to binding the movie image and text on storyboard
func setup(with movie: Movie) {
movieImageView.image = movie.image
movieTitle.text = movie.title
}
}
Step 6. specify the width and height of each cell.
add UICollectionViewDelegateFlowLayout in ViewController.swift
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: 150, height: 300) }
}
add collectionView.delegate
collectionView.collectionViewLayout = UICollectionViewFlowLayout() will activate the function
class ViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
collectionView.dataSource = self
collectionView.delegate = self
collectionView.collectionViewLayout = UICollectionViewFlowLayout()
}
}Step 7. print the movie titles by using didSelectItemAt
extension ViewController: UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { print(movies[indexPath.row].title) }
}
Done!
