Swift自定义三角形View在CollectionViewCell中失效，如何正确使用？

嘿，我之前也踩过这个坑！自定义的CAShapeLayer三角形View在ViewController里好好的，一放进CollectionViewCell就消失？大概率是没跟上cell的复用机制或者布局时机的问题。下面给你一步步解决的办法：

1. 让自定义View跟随布局变化重绘路径 #

CollectionViewCell的frame在初始化阶段往往还没确定（尤其是用AutoLayout的时候），如果你的三角形路径只在init里绘制一次，就会因为初始frame不对导致看不到。正确的做法是把路径更新逻辑放到layoutSubviews方法里——这个方法会在View的frame真正确定或变化时被调用：

class TriangleView: UIView {
    private let shapeLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBaseLayer()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseLayer()
    }
    
    private func setupBaseLayer() {
        // 先配置layer的基础属性
        shapeLayer.fillColor = UIColor.systemRed.cgColor
        layer.addSublayer(shapeLayer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 每次布局变化时重新生成三角形路径
        let trianglePath = UIBezierPath()
        // 这里以"顶部中点+底部左右角"的三角形为例，你可以按需修改
        trianglePath.move(to: CGPoint(x: bounds.midX, y: bounds.minY))
        trianglePath.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        trianglePath.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        trianglePath.close()
        
        // 更新layer的路径和frame，确保和View的边界对齐
        shapeLayer.path = trianglePath.cgPath
        shapeLayer.frame = bounds
    }
}

2. 在CollectionViewCell中正确添加并约束自定义View #

别直接给自定义View设固定frame，一定要用AutoLayout约束，这样cell复用或尺寸变化时，View能自动调整大小：

class CustomTriangleCell: UICollectionViewCell {
    static let reuseID = "CustomTriangleCell"
    
    let triangleView = TriangleView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupTriangleView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupTriangleView()
    }
    
    private func setupTriangleView() {
        triangleView.translatesAutoresizingMaskIntoConstraints = false
        // 记得把自定义View加到cell的contentView上，而不是直接加给cell本身
        contentView.addSubview(triangleView)
        
        // 这里设置成让三角形占满整个cell，你可以按需调整约束
        NSLayoutConstraint.activate([
            triangleView.topAnchor.constraint(equalTo: contentView.topAnchor),
            triangleView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            triangleView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            triangleView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
    
    // 可选：处理cell复用的状态重置
    override func prepareForReuse() {
        super.prepareForReuse()
        // 比如重置三角形颜色，避免复用旧状态
        triangleView.shapeLayer.fillColor = UIColor.systemRed.cgColor
    }
}

3. 确认CollectionView的注册与复用逻辑正确 #

确保你在ViewController里正确注册了cell，并且在cellForItemAt里正确获取和配置cell：

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    private var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupCollectionView()
    }
    
    private func setupCollectionView() {
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 120, height: 120)
        layout.minimumLineSpacing = 16
        layout.minimumInteritemSpacing = 16
        
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.register(CustomTriangleCell.self, forCellWithReuseIdentifier: CustomTriangleCell.reuseID)
        collectionView.backgroundColor = .systemBackground
        view.addSubview(collectionView)
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CustomTriangleCell.reuseID, for: indexPath) as! CustomTriangleCell
        // 可以在这里动态修改三角形属性，比如根据index设置不同颜色
        let hue = CGFloat(indexPath.item) / 20
        cell.triangleView.shapeLayer.fillColor = UIColor(hue: hue, saturation: 0.8, brightness: 0.8, alpha: 1).cgColor
        return cell
    }
}

4. 常见排查小技巧 #

• 给自定义View加个边框，确认它的frame是否正确：triangleView.layer.borderWidth = 1; triangleView.layer.borderColor = UIColor.systemBlue.cgColor
• 检查CAShapeLayer的fillColor/strokeColor有没有设置（默认是透明的）
• 如果用xib/storyboard创建cell，确保自定义View的translatesAutoresizingMaskIntoConstraints已经设为false

内容的提问来源于stack exchange，提问作者Halil İbrahim YILMAZ