TaillookTech

モバイルアプリ開発を追っています

UICollectionViewでカラフルなUITableView風のViewを作る

概要

UICollectionViewのセルの大きさをアレしてUITableViewっぽくする.

作ったもの

TableViewのようなもの
f:id:taillook:20170222164517p:plain

手順

  1. StoryBoardにUICollectionViewを設置
  2. DelegateとかDataSourceをViewControllerと結ぶ
  3. ViewControllerにコードを書く

解説

viewDidLoad()にUICollectionViewFlowLayout()のインスタンスを作成し,cellのlayoutを変更する.
このとき,cellの横幅を親ビューと同じサイズにする.
これによりTableViewのようなViewが作成できる.
cellの色はランダムに指定している.

コード

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    @IBOutlet weak var CollectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 1, left: 1, bottom: 1, right: 1)
        layout.itemSize = CGSize(width: CollectionView.frame.size.width, height: CollectionView.frame.size.height/6)
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 0
        CollectionView.collectionViewLayout = layout
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        let testCell:UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        let r: CGFloat = CGFloat(arc4random_uniform(255)+1) / 255.0
        let g: CGFloat = CGFloat(arc4random_uniform(255)+1) / 255.0
        let b: CGFloat = CGFloat(arc4random_uniform(255)+1) / 255.0
        let color: UIColor = UIColor(red: r, green: g, blue: b, alpha: 1.0)
        testCell.backgroundColor = color

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