iOS UICollectionView 切圆角

简介

UICollectionView 是 iOS 开发中常用的UI控件之一，它类似于UITableView，用于展示大量的可滚动的内容。在实际开发中，我们经常需要对UICollectionView进行一些自定义的样式，其中包括给UICollectionView的cell添加圆角。本文将介绍如何在iOS UICollectionView中实现圆角效果，并给出示例代码。

UICollectionView 圆角实现方法

要在UICollectionView的cell中添加圆角效果，我们可以使用以下两种方法：

  1. 通过设置UICollectionViewFlowLayout的sectionInset和itemSize属性，将每个cell的frame设置为圆角矩形。
  2. 继承自UICollectionViewCell的自定义cell，在自定义cell的layoutSubviews方法中，用CAShapeLayer添加圆角效果。

下面分别介绍这两种方法的具体实现。

方法一：设置UICollectionViewFlowLayout的sectionInset和itemSize

首先，我们需要创建一个UICollectionViewFlowLayout对象，并将其赋值给UICollectionView的layout属性。然后，通过设置UICollectionViewFlowLayout的sectionInset和itemSize属性，将每个cell的frame设置为圆角矩形。

let flowLayout = UICollectionViewFlowLayout()
flowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
flowLayout.itemSize = CGSize(width: 100, height: 100)
collectionView.collectionViewLayout = flowLayout

接下来，我们需要在UICollectionView的delegate方法中，通过UICollectionViewDelegateFlowLayout协议中的方法返回UICollectionViewFlowLayout的sectionInset和itemSize属性。

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 100)
    }
}

通过以上代码，我们可以实现对UICollectionView的cell添加圆角效果。

方法二：自定义UICollectionViewCell

另一种方法是继承自UICollectionViewCell的自定义cell，在自定义cell的layoutSubviews方法中，用CAShapeLayer添加圆角效果。

首先，我们需要创建一个继承自UICollectionViewCell的自定义cell。

class CustomCollectionViewCell: UICollectionViewCell {
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 10).cgPath
        layer.mask = maskLayer
    }
}

然后，在UICollectionView的dataSource方法中，使用自定义的cell。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
    // 配置cell的内容
    return cell
}

通过以上代码，我们同样可以实现对UICollectionView的cell添加圆角效果。

示例代码

完整的示例代码如下：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.dataSource = self
        collectionView.delegate = self
        
        let flowLayout = UICollectionViewFlowLayout()
        flowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        flowLayout.itemSize = CGSize(width: 100, height: 100)
        collectionView.collectionViewLayout = flowLayout
        
        collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: "CustomCollectionViewCell")
    }
}

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
        // 配置cell的内容
        return cell
    }
}

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 100)
    }
}

class CustomCollectionViewCell: UICollectionViewCell {
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let maskLayer =