collectionViewで均等なマス目を作る

投稿日：2020年7月28日更新日：2020年8月3日

セル同士を0.5の線で区切りたいが、所々太くなってしまっている。
ボーダーを非表示にすると、わずかな隙間ができている。
セル同士の隙間を０にすることで、綺麗な0.5のボーダーにしたい。

//セルの大きさ・隙間を調整する関数
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let width: CGFloat = self.view.bounds.width / 7
        let height : CGFloat = width * 1.5
        return CGSize(width: width, height: height)
    }

解決策

画面の幅を７で割ると余りが出てしまうのが原因らしい。
余ったピクセルを１pxずつ前から順にセルに割り当てるとよい。

以下のように書き換えた。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
       　        
        let columns = 7
        let width = Int(UIScreen.main.bounds.width)
        let side = width / columns
        let rem = width % columns
        let addOne = indexPath.row % columns < rem
        let cellWidth = addOne ? side + 1 : side
        return CGSize(width: cellWidth, height: side)
    }

参考：https://stackoverflow.com/questions/29441547/uicollectionview-3-column-grid-1px-space-image-included

さらにセルの縦幅を横幅の1.5倍にしたい。
このままsideを1.5倍すると、Int型とDouble型の計算ができないためエラーとなる。
そこでInt型からDouble型に変換する。
CGsizeもwidthとheightの型を合わせる必要があるから、横幅もDouble型に変換する。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let columns = 7
        let width = Int(UIScreen.main.bounds.width)
        let side = width / columns
        let rem = width % columns
        let addOne = indexPath.row % columns < rem
        let cellWidth = addOne ? side + 1 : side
        //Double型に変換
        let dSide:Double = Double(side)
        let dCellHeight = dSide * 1.5
        let dCellWidth:Double = Double(cellWidth)
        return CGSize(width: dCellWidth, height: dCellHeight)
    }

参考：https://i-app-tec.com/ios/int-string-double.html#5

執筆者：swift