Section Insets & Min Spacing of CollectionView

danieljang

DanielJang

Posted on October 2, 2021

Section Insets & Min Spacing of CollectionView

[Simulator]

  • iPhone 13Pro (Display portrait dimension : 390 x 844 points)

[Basic layout of storyboard]

1. Insert "Collection View Controller" from object library.

Alt Text

2. Change background color and set identifier of Collection View Cell by attribute inspector of storyboard

  • Background : Tint Color
  • Identifier : Cell Alt Text

3. Set collection view by size inspector of storyboard.

  • Cell Size: Width 100, Height 100
  • Min Spacing: For Cells 10, For Lines 10
  • Section Insets: Top 10, Bottom 10, Left 10, Right 10
  • Estimate Size: None Alt Text

4. Assign ViewController.swift to Collection View Controller by Identity inspector of storyboard.

  • Class: ViewController Alt Text

[Basic coding of ViewController.swift]

import UIKit

class ViewController: UICollectionViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        return cell
    }
}
Enter fullscreen mode Exit fullscreen mode

After building...

You could see below result.
Alt Text

Let's Test by several setting conditions

1. First please go to storyboard again

  • Click "Collection View"
  • Go to Attributes inspector tab
  • Check Scroll direction as "Vertical"

2. About Min Spacing of "For Cells"

  • Go to Size inspector tab
  • Change Min Spacing of "For Cells" from 10 to 150
  • DO NOT Change Min Spacing of "For Lines" Alt Text

Build and Check result...

If you change Min Spacing value of "For Cells" under Scroll direction as "Vertical" then distance is changed between each cells horizontally.

Alt Text

3. About Min Spacing of "For Lines"

  • Go to Size inspector tab
  • Change Min Spacing of "For Lines" from 10 to 150
  • DO NOT Change Min Spacing of "For Cells" as 10

Build and Check result...

If you change Min Spacing value of "For Lines" under Scroll direction as "Vertical" then distance is changed between each cells Vertically.

Alt Text

4. About Section Insets

  • Go to Size inspector tab
  • Change Section Insets values as below image Alt Text ##Build and Check result... ###If you change Section Insets then there is no change between each cells's distance. Just changed distance between top, bottom, left and right of safe area of display and collection of cells. Alt Text

Summery Image

Alt Text

Please test when Scroll direction is "Horizontal". Result will be inverted comparing to "Vertical"

💖 💪 🙅 🚩
danieljang
DanielJang

Posted on October 2, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related