エンジニア日記

日々の開発あれこれ

SwiftのUIColectionViewでセルを均等に配置し、セルとセルの間に罫線を表示する

やり方

罫線は背景色を表示する方法をとる。
(この例の場合は黒)
よって、セルとセルの間に均等にスペースが空くように配置する

イメージ

キャプチャ

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class ViewController: UIViewController,UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    let linePoint: CGFloat = 1     // 罫線の太さ
    let numberOfCols: CGFloat = 6  // 1行に表示するセルの数

    // セルのレイアウト調整
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        // セルのサイズ = (端末の横幅 - (罫線の太さ*(1行に表示するセルの個数-1=外の線を引いた内側の線の数))) / 1行に表示するセルの個数
        let size = floor((collectionView.frame.size.width - (linePoint*(numberOfCols-1))) / numberOfCols)
        return CGSizeMake(size, size)
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(0.0, 0.0, 0.0, 0.0)
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return linePoint
    }
    
    ......
}