iOS -在集合视图单元格周围添加边框，并在其下添加视图

在iOS开发中，为集合视图（UICollectionView）单元格添加边框并在其下方添加视图可以通过自定义单元格的布局来实现。以下是详细的步骤和示例代码：

基础概念

UICollectionViewCell: 这是集合视图中每个单元格的基类。
UIView: 用于创建边框和下方的视图。
Auto Layout: 用于布局视图，确保它们在不同屏幕尺寸上正确显示。

类型

边框视图: 可以使用UIView或CALayer来创建边框。
下方视图: 可以是任何类型的UIView，如标签、图像视图等。

应用场景

列表项分隔: 在列表项之间添加视觉分隔。
突出显示: 通过边框和下方的视图来突出显示特定的单元格。

示例代码

以下是一个简单的示例，展示如何在UICollectionViewCell中添加边框并在其下方添加一个视图。

1. 创建自定义单元格类

import UIKit

class CustomCollectionViewCell: UICollectionViewCell {
    
    let borderView = UIView()
    let bottomView = UIView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
    }
    
    private func setupViews() {
        // 设置边框视图
        borderView.backgroundColor = .clear
        borderView.layer.borderWidth = 1.0
        borderView.layer.borderColor = UIColor.black.cgColor
        borderView.layer.cornerRadius = 8.0
        
        // 设置下方视图
        bottomView.backgroundColor = .lightGray
        
        // 添加子视图
        contentView.addSubview(borderView)
        contentView.addSubview(bottomView)
        
        // 使用Auto Layout布局
        borderView.translatesAutoresizingMaskIntoConstraints = false
        bottomView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            borderView.topAnchor.constraint(equalTo: contentView.topAnchor),
            borderView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            borderView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            borderView.bottomAnchor.constraint(equalTo: bottomView.topAnchor),
            
            bottomView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            bottomView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            bottomView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            bottomView.heightAnchor.constraint(equalToConstant: 5.0)
        ])
    }
}

2. 在集合视图中使用自定义单元格

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: "CustomCell")
        
        view.addSubview(collectionView)
        
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
    
    // MARK: - UICollectionViewDataSource
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20 // 示例数据
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCollectionViewCell
        return cell
    }
    
    // MARK: - UICollectionViewDelegateFlowLayout
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.bounds.width, height: 100) // 自定义单元格大小
    }
}