iOS开发：如何创建带模糊背景的Facebook反应栏？

嘿，我完全懂你的困扰——在动态变化的模糊背景上做类似Facebook的反应指示器，固定白色边框确实会因为背景变化显得违和甚至“消失”。这里有几个实用的方案，能帮你搞定这个问题：

方案一：用内阴影替代固定边框 #

内阴影能让你的图标在任何模糊背景下都保持清晰轮廓，而且不会和背景冲突。你可以给每个UIImageView添加一个内阴影图层：

func addInnerShadow(to imageView: UIImageView) {
    let innerShadowLayer = CALayer()
    innerShadowLayer.frame = imageView.bounds
    
    // 配置内阴影参数，可根据需求调整
    innerShadowLayer.shadowColor = UIColor.black.cgColor
    innerShadowLayer.shadowOffset = CGSize(width: 0, height: 0)
    innerShadowLayer.shadowOpacity = 0.3
    innerShadowLayer.shadowRadius = 2
    
    // 创建遮罩，确保阴影只在视图内部显示
    let maskLayer = CAShapeLayer()
    maskLayer.path = UIBezierPath(rect: imageView.bounds).cgPath
    maskLayer.fillRule = .evenOdd
    innerShadowLayer.mask = maskLayer
    
    imageView.layer.addSublayer(innerShadowLayer)
}

// 给三个指示器视图添加内阴影
addInnerShadow(to: imageViewOne)
addInnerShadow(to: imageViewTwo)
addInnerShadow(to: imageViewThree)

如果你的指示器是圆形的，记得把UIBezierPath(rect:)换成UIBezierPath(ovalIn:)，效果会更贴合。

方案二：用双层容器模拟自适应“边框” #

给每个UIImageView套一个稍大的容器视图，容器用半透明白色（或适配模糊背景的浅色）做背景，这样既起到了边框的作用，又能随背景模糊自然融合：

func createIndicatorContainer(for imageView: UIImageView) -> UIView {
    // 容器比图标大4pt，模拟边框宽度
    let containerSize = CGSize(width: imageView.frame.width + 4, height: imageView.frame.height + 4)
    let container = UIView(frame: CGRect(origin: .zero, size: containerSize))
    
    // 半透明白色适配模糊背景，可调整alpha值
    container.backgroundColor = UIColor.white.withAlphaComponent(0.8)
    container.layer.cornerRadius = containerSize.width / 2 // 圆形指示器用这个
    container.clipsToBounds = true
    
    // 把图标居中放在容器里
    imageView.center = container.center
    container.addSubview(imageView)
    
    return container
}

// 替换原来的图标视图为容器视图
let containerOne = createIndicatorContainer(for: imageViewOne)
// 将containerOne添加到父视图的对应位置，替代原来的imageViewOne

方案三：动态适配背景颜色的边框 #

通过获取模糊背景的平均颜色，自动切换边框的深浅色，确保边框始终可见：

// 获取视图的平均颜色
func getAverageColor(from view: UIView) -> UIColor? {
    UIGraphicsBeginImageContext(view.bounds.size)
    view.layer.render(in: UIGraphicsGetCurrentContext()!)
    let snapshot = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    guard let cgImage = snapshot?.cgImage else { return nil }
    let pixelData = cgImage.dataProvider?.data
    let data = CFDataGetBytePtr(pixelData)
    
    let width = cgImage.width
    let height = cgImage.height
    var totalRed: CGFloat = 0, totalGreen: CGFloat = 0, totalBlue: CGFloat = 0
    
    for y in 0..<height {
        for x in 0..<width {
            let pixelIndex = (y * width + x) * 4
            totalRed += CGFloat(data![pixelIndex])
            totalGreen += CGFloat(data![pixelIndex + 1])
            totalBlue += CGFloat(data![pixelIndex + 2])
        }
    }
    
    let totalPixels = width * height
    let avgRed = totalRed / CGFloat(totalPixels) / 255
    let avgGreen = totalGreen / CGFloat(totalPixels) / 255
    let avgBlue = totalBlue / CGFloat(totalPixels) / 255
    
    return UIColor(red: avgRed, green: avgGreen, blue: avgBlue, alpha: 1.0)
}

// 在背景变化时更新边框颜色
func updateIndicatorBorderColors() {
    guard let bgColor = getAverageColor(from: yourBlurBackgroundView) else { return }
    
    // 计算背景亮度，决定边框用深色还是浅色
    let luminance = (0.299 * bgColor.cgColor.components![0]) + 
                    (0.587 * bgColor.cgColor.components![1]) + 
                    (0.114 * bgColor.cgColor.components![2])
    
    let borderColor = luminance > 0.5 ? UIColor.darkGray.cgColor : UIColor.lightGray.cgColor
    
    imageViewOne.layer.borderColor = borderColor
    imageViewOne.layer.borderWidth = 2
    imageViewTwo.layer.borderColor = borderColor
    imageViewTwo.layer.borderWidth = 2
    imageViewThree.layer.borderColor = borderColor
    imageViewThree.layer.borderWidth = 2
}

你可以在背景模糊效果更新时调用updateIndicatorBorderColors()，让边框实时适配。

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