Section Insets & Min Spacing of CollectionView
DanielJang
Posted on October 2, 2021
[Simulator]
- iPhone 13Pro (Display portrait dimension : 390 x 844 points)
[Basic layout of storyboard]
1. Insert "Collection View Controller" from object library.
2. Change background color and set identifier of Collection View Cell by attribute inspector of storyboard
- Background : Tint Color
- Identifier : Cell
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
4. Assign ViewController.swift to Collection View Controller by Identity inspector of storyboard.
- Class: ViewController
[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
}
}
After building...
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"
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.
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.
4. About Section Insets
- Go to Size inspector tab
- Change Section Insets values as below image ##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.
Summery Image
Please test when Scroll direction is "Horizontal". Result will be inverted comparing to "Vertical"
💖 💪 🙅 🚩
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.