Swift collectionview 客製化 cell

為什麼要客製化 cell

如果今天美術出圖無法使用collectionview內建cell呈現，那就必須自己客製化collectionview cell，你可以用Code客製化，也可以用Xib簡單完成客製化collectionview cell，本篇利用Xib教你上手客製化cell

1. 新增collectionview 客製化 cell+xib

2. 設定你所要的樣式

3. 並且宣告好cell物件

 @IBOutlet var iconImg: UIImageView!
 @IBOutlet var textLabel: UILabel!

4. 新增 collectionview

首先在你要新增的地方addSubView

override func initIMUI() {
        super.initIMUI()
        self.view.addSubview(self.collectionView)
}

這裡我用了懶加載下去呼叫
因為之前寫OC時會運用到
但目前還沒研究Swift的是否也需要
這之後可能也會再寫一篇研究
呼叫的就是以下程式碼
一些變數可以自己改變

lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        //section的間距
        layout.sectionInset = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
        //cell間距
        layout.minimumLineSpacing = 5
        //cell 長寬
        layout.itemSize = CGSize(width: 100, height: 30)
        //滑動的方向
        layout.scrollDirection = .horizontal
        //collectionView frame設定 x,y,寬,高
        let collectionView = UICollectionView(frame: CGRect(x: 0, y: kSafeTopPadding + kNavBarHeight, width: KScreenWidth, height: 50),collectionViewLayout: layout)
       //背景顏色
        collectionView.backgroundColor = UIColor.gray
       //你所註冊的cell
        collectionView.register(UINib(nibName:"HomeCell", bundle:nil),
                                forCellWithReuseIdentifier:"myCell")
        //宣告collectionView delegate
        collectionView.delegate = self
        collectionView.dataSource = self

        return collectionView
    }()

5. 加入 CollectionView delegate,dataSource

class HomeViewController: JGBaseViewController,UICollectionViewDataSource,UICollectionViewDelegate 

6. 加入collectionView的一些func

// MARK: - CollectionView
//多少count
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10;
}

//cell顯示控制
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell:HomeCell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath)
        as! HomeCell
    return cell
}

//sections數量
func numberOfSectionsInCollectionView(
    collectionView: UICollectionView) -> Int {
    return 2
}

//點擊事件
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    print("你選擇了第 \(indexPath.section + 1) 組的")
    print("第 \(indexPath.item + 1) ")
}

cell不一定需要再xib設定
cellForItemAt也可以分別設置任何 index row的個別樣式
cell圓角取cell高度的一半
就可以變成最圓的角

//cell顯示控制
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell:HomeCell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath)
        as! HomeCell
        //cell背景顏色
        cell.backgroundColor = UIColor.lightGray
        //圓角
        cell.clipsToBounds = true
        cell.layer.cornerRadius = cell.frame.height/2
        //文字
        cell.textLabel.text = "分類"
        cell.textLabel.textColor = UIColor.black
        //圖片
        cell.iconImg?.image = UIImage.init(named: "icBuyrecordArrowdwn")
        cell.iconImg?.backgroundColor = .clear
    return cell
}

Demo

目前先這樣後續會再做部分微調