We will see how to achieve the grid layout by using the collection view.
Let's create a starter project from Xcode.
go to File -> New -> Project
Now select app then clicks on next and add your project name then create.
Next open the Main.storyboard and add a collection view in your view controller.
Add the required constraints to this collection-view.
Next select the collection view and set min spacing for cell and line both from the default value to 0 because we will set it from code.
Now jump to the ViewController, and add an IBOutlet connection from the storyboard collection view to this view controller.
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var gridCollectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
setUpCollectionView()
}
}
Let's do some modification to the collection view
private func setUpCollectionView() {
/// 1
gridCollectionView
.register(UICollectionViewCell.self,
forCellWithReuseIdentifier: "cell")
/// 2
gridCollectionView.delegate = self
gridCollectionView.dataSource = self
/// 3
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
/// 4
layout.minimumLineSpacing = 8
/// 5
layout.minimumInteritemSpacing = 4
/// 6
gridCollectionView
.setCollectionViewLayout(layout, animated: true)
}
- Register a default cell for collection view.
- Set the delegate actions to the current view controller.
- Create a custom flow layout for this.
- Set a
minimum line spacingwith your padding - Set the
minimum interim-item spacinghalf of the line-spacing. - Set this custom layout to the collection view.
Next add the data source to the current view controller.
swift
extension ViewController: UICollectionViewDataSource {
/// 1
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
/// 2
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
/// 3
cell.backgroundColor = .randomColor()
return cell
}
}
- Set the number of items in the collection view. We didn't add the number of sections so it will assign the default value to 1
- dequeueReusableCell with the given cell identifier from
setupCollectionViewmethod. - Setting the background color with a Random Color.
Now let's assign the delegate
extension ViewController: UICollectionViewDelegateFlowLayout {
/// 1
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAt section: Int) -> UIEdgeInsets {
/// 2
return UIEdgeInsets(top: 1.0, left: 8.0, bottom: 1.0, right: 8.0)
}
/// 3
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
/// 4
let lay = collectionViewLayout as! UICollectionViewFlowLayout
/// 5
let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing
/// 6
return CGSize(width: widthPerItem - 8, height: 250)
}
}
- First add the insetForSectionAt from UICollectionViewDelegateFlowLayout.
- Add the inset for collection view sections. I added left and right space 8 because I need to match the minimum line spacing between the cells.
- Add to assign the size for the cell so added the method from UICollectionViewDelegateFlowLayout
- Get the assigned layout from the collection view.
- distribute the width of cells.
- Return the size of each cell but make sure it should be less of line spacing.
Bonus: 🤔 How to create random colors?
💡 Use these extensions for creating the random colors.
/// Extension for random value get.
extension CGFloat {
static func randomValue() -> CGFloat {
return CGFloat(arc4random()) / CGFloat(UInt32.max)
}
}
/// Extension for random color using random value.
extension UIColor {
static func randomColor() -> UIColor {
return UIColor(
red: .randomValue(),
green: .randomValue(),
blue: .randomValue(),
alpha: 1.0
)
}
}
Top comments (0)