Section Insets & Min Spacing of CollectionView 
Tags: swift, uicollectionview, sectioninsets, minspacing
Published: 2021-10-02 12:43:09

###[Simulator]
- iPhone 13Pro (Display portrait dimension : 390 x 844 points)

###[Basic layout of storyboard]
####1. Insert "Collection View Controller" from object library.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bogz7yqi3ki6x9m1rxj2.png)

####2. Change background color and set identifier of Collection View Cell by attribute inspector of storyboard
  * Background : Tint Color
  * Identifier : Cell
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9v8aceoakpuun9hn8tj.png)

####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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2evbh0g8aakwc3fgigzy.png)

####4. Assign ViewController.swift to Collection View Controller by Identity inspector of storyboard.
  * Class: ViewController
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of7iu4en7pb32o5exzr7.png)


###[Basic coding of ViewController.swift]
```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
    }
}
```
####After building...
You could see below result.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdn0qoztso2t5y6lux1g.png)


##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1exa656xsxdt56k1xlp.png)

##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nwvyo9tcjhkdu2zh75c.png)

####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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hber4fjikth5646nyrjf.png)


####4. About Section Insets
  * Go to Size inspector tab
  * Change Section Insets values as below image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k0nywocdnnbwkxusxqv.png)
##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48raguuydmr193mbnt2h.png)

##Summery Image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aboo2ouegaa35o1ofey6.png)


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