如何为UICollectionView分组与元素添加边框阴影并设置特定圆角？

嘿，这个需求其实不用非得啃自定义UICollectionViewLayout的硬骨头——当然如果你的布局是那种动态瀑布流、不规则排版的特殊情况另说，但针对常规的网格/列表布局，有几个更简单易上手的方案，我给你拆解清楚：

方案一：用UICollectionViewCompositionalLayout（iOS 13+，推荐） #

苹果在iOS13推出的这个现代布局框架，灵活性拉满，完全能搞定你的需求：

1. 给Section加顶部圆角+阴影 #

咱可以用**装饰视图（DecorationView）**来做每个section的背景，这样能完美包裹整个section的内容，还能单独设置阴影和顶部圆角：

• 先自定义一个继承自UICollectionReusableView的装饰视图：

class SectionBackgroundDecorationView: UICollectionReusableView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupStyle()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupStyle()
    }
    
    private func setupStyle() {
        backgroundColor = .white
        // 只设置顶部两个角为圆角
        layer.cornerRadius = 12
        layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
        // 配置阴影
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowOpacity = 0.15
        layer.shadowRadius = 6
        // 划重点：要显示阴影，千万别开masksToBounds！
    }
}

• 然后在创建CompositionalLayout的时候，注册这个装饰视图，并把它绑定到section上：

func makeCollectionViewLayout() -> UICollectionViewLayout {
    // 先定义item、group的尺寸（这里以每行3个item为例）
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    // 给item加一点点间距，避免边框重叠
    item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 1, bottom: 0, trailing: 1)
    
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .absolute(90))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    
    let section = NSCollectionLayoutSection(group: group)
    // 给section加内边距，让背景视图和cell之间有间隙
    section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
    
    // 绑定装饰视图作为section背景
    let sectionBackground = NSCollectionLayoutDecorationItem.background(elementKind: "SectionBackground")
    section.decorationItems = [sectionBackground]
    
    let layout = UICollectionViewCompositionalLayout(section: section)
    layout.register(SectionBackgroundDecorationView.self, forDecorationViewOfKind: "SectionBackground")
    return layout
}

2. 给最后一行Cell加底部圆角 #

在cellForItemAt方法里，判断当前cell是不是所在section最后一行的元素，然后单独设置底部圆角：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell
    
    // 计算当前section的总item数和每行item数
    let totalItemsInSection = collectionView.numberOfItems(inSection: indexPath.section)
    let itemsPerRow = 3 // 这里要和你布局里的每行数量一致
    
    // 判断是否是最后一行的cell
    let lastRowItemCount = totalItemsInSection % itemsPerRow
    let lastRowStartIndex = totalItemsInSection - (lastRowItemCount == 0 ? itemsPerRow : lastRowItemCount)
    let isInLastRow = indexPath.item >= lastRowStartIndex
    
    // 设置cell样式
    cell.backgroundColor = .white
    cell.layer.borderColor = UIColor.lightGray.cgColor
    cell.layer.borderWidth = 1
    cell.layer.cornerRadius = 12
    // 只有最后一行的cell才显示底部圆角
    cell.layer.maskedCorners = isInLastRow ? [.layerMinXMaxYCorner, .layerMaxXMaxYCorner] : []
    cell.layer.masksToBounds = true
    
    return cell
}

方案二：兼容iOS13以下的传统方案 #

如果需要支持更低版本的iOS，咱可以用自定义SectionHeader和Cell来实现：

• 自定义SectionHeader：把它做成section的顶部背景，设置顶部圆角和阴影，注意header的高度要足够覆盖到section的顶部区域，并且和cell的顶部无缝衔接。
• 自定义Cell：同样在cellForItemAt里判断是否是最后一行，设置底部圆角。另外，cell的边框要注意避免相邻cell重叠——比如只给cell加左、右、下边框，上边框留给header或者上一行cell的下边框。
• 阴影处理：把阴影加在SectionHeader的背景视图上，让它延伸覆盖整个section的范围（可以通过调整header的frame或者添加子视图来实现）。

什么时候需要自定义UICollectionViewLayout？ #

如果你的布局是动态高度瀑布流、不规则排版，或者需要非常精准地控制每个元素的frame，那自定义Layout确实能帮你更灵活地计算每个cell的位置和状态。但对于常规的网格/列表布局，上面两个方案完全够用，不用费力气写复杂的自定义Layout。

内容的提问来源于stack exchange，提问作者Marcel Gangwisch