Swift 在另一个视图之上添加一个透明和模糊的视图

Posted 2023-03-28

【中文标题】Swift 在另一个视图之上添加一个透明和模糊的视图

【英文标题】：Swift add a transparent and blur view on top of another view

【发布时间】：2021-10-11 04:11:58

【问题描述】：

设计在这里：

所以按钮 stackview 在另一个 ImageView 上具有模糊和透明的视图。我怎样才能使这项工作？ 我尝试过模糊效果视图和视觉效果视图，但都未能实现这个设计。我也尝试使用 CIFilter 来模糊 StackView 的背景图像，但仍然不是同一个。

评论的答案，模糊效果和视觉视图的代码。实际效果见下图。

let test: UIView = 
    let test = UIView()
    test.backgroundColor = .clear
    return test
()
let blurEffect = UIBlurEffect(style: .extraLight)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.translatesAutoresizingMaskIntoConstraints = false
    pictureImageView.insertSubview(blurView, at: 0)
    blurView.snp.makeConstraints  (make) in
        make.centerX.equalTo(view)
        make.top.equalTo(view).offset(450)
        make.width.equalTo(169)
        make.height.equalTo(48)
    
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyView.translatesAutoresizingMaskIntoConstraints = false
    vibrancyView.contentView.addSubview(test)
    blurView.contentView.addSubview(vibrancyView)
    vibrancyView.snp.makeConstraints  (make) in
        make.centerX.equalTo(view)
        make.top.equalTo(view).offset(450)
        make.width.equalTo(169)
        make.height.equalTo(48)
    

更新，添加下面提到的alpha @Narjes 后，添加的唯一代码是blurView.alpha = 0.3，结果在这里，似乎缺少模糊效果。

【问题讨论】：

“我尝试过模糊效果视图和视觉效果视图，但都未能实现这个设计”在哪里？我们没有看到任何一行代码。

@ElTomato 添加

blurView.frame = CGRect(origin: CGPoint.zero, size: pictureImageView.frame.size)

【参考方案1】：

你的错误是这里没有设置 alpha

更新：将 UIBlurEffect 设置为 .regular 。

将 alpha 保持在 1.0 中，因为降低它也会减少模糊。

已更新：这是您要查找的内容：

        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
        blurView.translatesAutoresizingMaskIntoConstraints = false
        blurView.alpha = 1.0
        blurView.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
        pictureImageView.insertSubview(blurView, at: 0)
        blurView.center.x = self.view.center.x
        blurView.center.y = self.view.center.y * 1.7
        
        blurView.layer.cornerRadius = 10.0
        blurView.clipsToBounds = true
        blurView.layer.borderWidth = 2
        blurView.layer.borderColor = #colorLiteral(red: 0.1356498897, green: 0.3658460379, blue: 1, alpha: 1)

更新：结果将是这样的：updated image

提示：确保您使用 Xcode UI Debugger 解决 UI 问题，它将帮助您在运行时查看图层

【讨论】：

不。不设置 alpha 值不是关键问题。

但正如您在@o1xhack 图像中看到的那样，他的框架没有问题，他使用约束设置了框架，否则不会显示！据我了解，他的问题是透明度，因为他在下面有一个矩形。

@Narjes 我添加了 alpha 并将结果图片放入问题中。似乎我们的设计没有模糊的东西。

@o1xhack 为您修复并更新了答案。现在我明白了，你想要模糊的透明度，抱歉

@Narjes 感谢您的更新。所以看起来 alpha=1 会使模糊视图不透明。所以我想要的是一个可以看到图片imageview的下层的模糊透明视图。