tvOS技术问题：UIImageView圆角实现且保留焦点弹出动画

这个坑我之前做tvOS项目时踩过！确实，直接给UIImageView设置cornerRadius+maskToBounds = true会把系统默认的焦点缩放动画搞没——因为maskToBounds会强制裁剪layer超出边界的部分，而系统的焦点动画本质是对cell的layer做缩放变换，这时候放大后的内容会被直接剪掉，看起来就像动画失效了。

下面分享两个无性能开销的可行方案，都是苹果官方应用（比如iTunes影片）大概率在使用的思路：

方案一：用容器View包裹UIImageView（最简单） #

核心思路是把圆角裁剪的逻辑从UIImageView转移到它的父容器上，让系统的焦点动画能正常作用于整个cell：

1. 在cell中创建一个UIView作为图片的容器，给这个容器设置cornerRadius和clipsToBounds = true；
2. 将UIImageView添加到容器内，设置合适的contentMode（比如.scaleAspectFill），不需要给UIImageView设置任何圆角相关属性；
3. 给容器和图片添加约束，让图片填满容器。

代码示例（Swift）：

override init(frame: CGRect) {
    super.init(frame: frame)
    setupCell()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    setupCell()
}

private func setupCell() {
    // 创建图片容器
    let imageContainer = UIView()
    imageContainer.clipsToBounds = true
    imageContainer.layer.cornerRadius = 8 // 你需要的圆角大小
    imageContainer.translatesAutoresizingMaskIntoConstraints = false
    contentView.addSubview(imageContainer)
    
    // 创建UIImageView
    let imageView = UIImageView()
    imageView.contentMode = .scaleAspectFill
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageContainer.addSubview(imageView)
    
    // 添加约束
    NSLayoutConstraint.activate([
        imageContainer.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        imageContainer.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
        imageContainer.topAnchor.constraint(equalTo: contentView.topAnchor),
        imageContainer.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        
        imageView.leadingAnchor.constraint(equalTo: imageContainer.leadingAnchor),
        imageView.trailingAnchor.constraint(equalTo: imageContainer.trailingAnchor),
        imageView.topAnchor.constraint(equalTo: imageContainer.topAnchor),
        imageView.bottomAnchor.constraint(equalTo: imageContainer.bottomAnchor)
    ])
    
    self.imageView = imageView
}

当cell获得焦点时，系统会缩放整个cell（包括容器View），而容器的裁剪只会作用于内部的图片，完全不影响动画效果，而且性能和原生实现几乎无差别。

方案二：用CAShapeLayer作为mask（更灵活） #

如果不想额外加容器View，可以给UIImageView的layer设置一个自定义的CAShapeLayer作为mask，替代maskToBounds：

1. 给UIImageView设置cornerRadius，但不要设置maskToBounds；
2. 创建一个CAShapeLayer，用圆角矩形路径作为它的path，然后把这个layer设为UIImageView.layer.mask；
3. 注意在layoutSubviews中更新mask的路径，因为cell的bounds可能会变化（比如横竖屏切换）。

代码示例（Swift）：

private func setupImageView() {
    imageView.layer.cornerRadius = 8
    // 不要设置maskToBounds！
    let maskLayer = CAShapeLayer()
    maskLayer.path = UIBezierPath(roundedRect: imageView.bounds, cornerRadius: imageView.layer.cornerRadius).cgPath
    imageView.layer.mask = maskLayer
}

override func layoutSubviews() {
    super.layoutSubviews()
    // 每次布局更新mask的路径，保证圆角始终正确
    guard let maskLayer = imageView.layer.mask as? CAShapeLayer else { return }
    maskLayer.path = UIBezierPath(roundedRect: imageView.bounds, cornerRadius: imageView.layer.cornerRadius).cgPath
}

这种方法的好处是不需要额外的view层级，mask层会跟着UIImageView的layer一起参与系统的缩放动画，圆角效果和动画都能完美保留，性能同样没有问题。

为什么不推荐Core Graphics处理图片？ #

你提到的Runtime用Core Graphics裁剪图片的方法，确实会带来额外的性能开销——每个cell的图片都要单独裁剪，当collectionView滚动时，大量的图片处理会导致掉帧，尤其是在tvOS这种对流畅度要求极高的平台上，完全没必要用这种笨方法。

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