tvOS快速滚动后ImageView渐变边框尺寸异常问题

核心问题分析 #

1. 原代码未给渐变边框Layer设置name，导致重复调用时无法定位已有Layer，可能出现多层叠加；
2. tvOS聚焦缩放通过transform实现，View的bounds不会同步变化，直接基于bounds计算边框Frame会和缩放后的实际尺寸脱节；
3. 快速滚动时Cell复用，旧的边框状态未被清理，且未在布局更新时同步调整边框尺寸。

修复后的渐变边框实现代码 #

public extension UIView {
    private static let kLayerNameGradientBorder = "GradientBorderLayer"
    
    func addGradientBorder(width: CGFloat,
                           colors: [UIColor],
                           startPoint: CGPoint = CGPoint(x: 0.5, y: 0.0),
                           endPoint: CGPoint = CGPoint(x: 0.5, y: 1.0),
                           cornerRadius: CGFloat = 0) {
        // 查找已有渐变边框Layer，不存在则新建
        let borderLayer = gradientBorderLayer() ?? CAGradientLayer()
        borderLayer.name = UIView.kLayerNameGradientBorder // 补上name标记，确保后续能找到
        
        // 更新渐变核心属性
        borderLayer.colors = colors.map { $0.cgColor }
        borderLayer.startPoint = startPoint
        borderLayer.endPoint = endPoint
        
        // 保存边框配置参数，用于后续布局更新
        objc_setAssociatedObject(self, &AssociatedKeys.borderWidth, width, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        objc_setAssociatedObject(self, &AssociatedKeys.cornerRadius, cornerRadius, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        
        // 初始化Mask层（仅首次创建）
        if borderLayer.mask == nil {
            let mask = CAShapeLayer()
            mask.fillColor = UIColor.clear.cgColor
            mask.strokeColor = UIColor.white.cgColor
            mask.lineWidth = width
            borderLayer.mask = mask
        }
        
        // 添加到父Layer（仅首次创建时）
        if borderLayer.superlayer == nil {
            layer.addSublayer(borderLayer)
        }
        
        // 立即同步一次布局
        updateGradientBorderLayout()
    }
    
    // 专门用于更新边框布局的方法，适配尺寸/缩放变化
    func updateGradientBorderLayout() {
        guard let borderLayer = gradientBorderLayer(),
              let mask = borderLayer.mask as? CAShapeLayer,
              let width = objc_getAssociatedObject(self, &AssociatedKeys.borderWidth) as? CGFloat,
              let cornerRadius = objc_getAssociatedObject(self, &AssociatedKeys.cornerRadius) as? CGFloat else {
            return
        }
        
        // 考虑transform的缩放比例，计算实际显示尺寸
        let scale = transform.a // 等比缩放时，x/y方向缩放值一致
        let scaledBounds = CGRect(
            x: bounds.origin.x,
            y: bounds.origin.y,
            width: bounds.size.width * scale,
            height: bounds.size.height * scale
        )
        
        // 设置边框Layer的Frame，覆盖整个缩放后的View
        borderLayer.frame = CGRect(
            x: scaledBounds.origin.x - width/2,
            y: scaledBounds.origin.y - width/2,
            width: scaledBounds.size.width + width,
            height: scaledBounds.size.height + width
        )
        
        // 更新Mask路径，适配缩放后的圆角和尺寸
        mask.lineWidth = width
        let maskRect = CGRect(
            x: width/2,
            y: width/2,
            width: scaledBounds.size.width - width,
            height: scaledBounds.size.height - width
        )
        mask.path = UIBezierPath(roundedRect: maskRect, cornerRadius: cornerRadius * scale).cgPath
    }
    
    private func gradientBorderLayer() -> CAGradientLayer? {
        return layer.sublayers?.first { $0.name == UIView.kLayerNameGradientBorder } as? CAGradientLayer
    }
}

// 用于存储关联属性的Key
private enum AssociatedKeys {
    static var borderWidth = "borderWidth"
    static var cornerRadius = "cornerRadius"
}

CollectionViewCell 适配代码 #

class YourCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var logoView: UIImageView!
    
    override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
        super.didUpdateFocus(in: context, with: coordinator)
        
        coordinator.addCoordinatedAnimations({
            if self.isFocused {
                // 聚焦时执行缩放动画并添加渐变边框
                self.logoView.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
                self.logoView.addGradientBorder(
                    width: 4,
                    colors: AppTheme.Color.gradient,
                    startPoint: .topLeft,
                    endPoint: .bottomRight,
                    cornerRadius: 4
                )
            } else {
                // 失焦时恢复原始状态并移除边框
                self.logoView.transform = .identity
                self.logoView.gradientBorderLayer()?.removeFromSuperlayer()
            }
        }, completion: nil)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 每次布局更新时同步调整边框尺寸
        logoView.updateGradientBorderLayout()
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // Cell复用时重置状态，避免残留旧效果
        logoView.transform = .identity
        logoView.gradientBorderLayer()?.removeFromSuperlayer()
    }
}

关键修复点 #

1. 给渐变Layer添加name标记，确保能精准定位已有Layer，避免重复叠加；
2. 通过关联属性保存边框配置参数，在布局更新时复用；
3. 计算边框尺寸时考虑transform的缩放比例，匹配View实际显示大小；
4. 在layoutSubviews中同步更新边框布局，适配滚动、复用等场景下的尺寸变化；
5. 复用时重置Cell状态，清理旧边框和缩放效果。

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