为 UIButton 添加模糊效果答案

【问题标题】：Add a blur effect to a UIButton为 UIButton 添加模糊效果
【发布时间】：2014-08-28 14:00:20
【问题描述】：

如何使按钮背景变得模糊？

我发现用这个得到一个模糊的效果：

let blur = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Light))
blur.frame = buttonForDisabling.frame
self.tableView.addSubview(blur)

这是可行的，但只会在与我的按钮相同的框架下产生模糊效果。我想要一个背景模糊的按钮。在 iOS8 中可以吗？

【问题讨论】：

标签： swift uikit ios8

【解决方案1】：

如果您使用带有图像的按钮，请将图像视图放在前面：

buttonForDisabling.bringSubview(toFront: buttonForDisabling.imageView!)

或者只是使用这个扩展：

import Foundation
import UIKit

extension UIButton
{
    func addBlurEffect()
    {
        let blur = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        blur.frame = self.bounds
        blur.isUserInteractionEnabled = false
        self.insertSubview(blur, at: 0)
        if let imageView = self.imageView{
            self.bringSubview(toFront: imageView)
        }
    }
}

【讨论】：

仅供参考，如果有人从 ViewDidLoad 以编程方式设置约束，则需要调用此函数，因为按钮边界都将为零。这就是为什么在其他答案中您可能会看到在此函数中添加了约束，因此模糊视图的大小相应地。
添加 clipsToBounds = true ，如果使用cornerRadius

【解决方案2】：

这可以通过像您一样创建模糊并将其插入到 UIButton 的 titleLabel 下方来完成。禁用用户交互以使触摸不会被视觉效果视图拦截并转发到按钮，这一点很重要。

Swift 4.2：

let blur = UIVisualEffectView(effect: UIBlurEffect(style:
            UIBlurEffect.Style.light))
blur.frame = buttonForDisabling.bounds
blur.isUserInteractionEnabled = false //This allows touches to forward to the button.
buttonForDisabling.insertSubview(blur, at: 0)

【讨论】：

【解决方案3】：

使用了 Sherwin 的 great answer，但它并不适合我，因为我使用自动布局，并且在此代码运行时我的框架为 .zero。所以我修改了代码以使用自动布局，现在这对我有用：

import Foundation
import UIKit

extension UIButton {
    func addBlurEffect(style: UIBlurEffect.Style = .regular, cornerRadius: CGFloat = 0, padding: CGFloat = 0) {
        backgroundColor = .clear
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: style))
        blurView.isUserInteractionEnabled = false
        blurView.backgroundColor = .clear
        if cornerRadius > 0 {
            blurView.layer.cornerRadius = cornerRadius
            blurView.layer.masksToBounds = true
        }
        self.insertSubview(blurView, at: 0)

        blurView.translatesAutoresizingMaskIntoConstraints = false
        self.leadingAnchor.constraint(equalTo: blurView.leadingAnchor, constant: padding).isActive = true
        self.trailingAnchor.constraint(equalTo: blurView.trailingAnchor, constant: -padding).isActive = true
        self.topAnchor.constraint(equalTo: blurView.topAnchor, constant: padding).isActive = true
        self.bottomAnchor.constraint(equalTo: blurView.bottomAnchor, constant: -padding).isActive = true

        if let imageView = self.imageView {
            imageView.backgroundColor = .clear
            self.bringSubviewToFront(imageView)
        }
    }
}

【讨论】：

【解决方案4】：

@tuvok 的 Swift 5 版本的出色响应。我还更新了它并添加了控制各个方面的选项，例如：

• style：模糊风格

• cornerRadius：允许您将其设为圆形或圆形

• padding：如果您想使用cornerRadius，但又想让按钮的大小更大以进行命中测试，这很有用。

extension UIButton {
    func addBlurEffect(style: UIBlurEffect.Style = .regular, cornerRadius: CGFloat = 0, padding: CGFloat = 0) {
        backgroundColor = .clear
        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: style))
        blurView.frame = bounds.inset(by: UIEdgeInsets(horizontal: padding, vertical: padding))
        blurView.isUserInteractionEnabled = false
        blurView.backgroundColor = .clear
        if cornerRadius > 0 {
            blurView.layer.cornerRadius = cornerRadius
            blurView.layer.masksToBounds = true
        }
        self.insertSubview(blurView, at: 0)
        if let imageView = self.imageView{
            imageView.backgroundColor = .clear
            self.bringSubviewToFront(imageView)
        }
    }
}

【讨论】：