模糊效果 - 背景 UITextField答案

【问题标题】：Blur effect - Background UITextField模糊效果 - 背景 UITextField
【发布时间】：2015-12-09 20:07:19
【问题描述】：

我使用 Swift 2 和 Xcode 7。

我想在我的 UITextField 的背景中进行模糊处理。我还没有找到backgroundView 的属性。仅限background（用于背景图片）或backgroundColor。

我会来在后台添加一个视图。但我不知道如何制作 UITextField。

你有解决办法吗？

【问题讨论】：

标签： ios swift uitextfield uiblureffect

【解决方案1】：

您只能添加某种视图以使其成为模糊视图。现在的问题是文本字段没有 backgroundView 属性，但它们确实有一个背景属性，我们可以在其中设置UIImage。所以我们也可以从UIView 生成UIImage

此方法将为传递的 UIView 创建一个 UIImage。

func imageWithView(view:UIView)->UIImage{
        UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
        view.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }

现在我们将使用适用于 iOS 8+ 的 UIBlurEffect 和 UIVisualEffectView

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibilityIsReduceTransparencyEnabled() {
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light) 
    //you can try for more values like .ExtraLight and .Dark

    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = textField.bounds
    blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
    textField.backgroundColor = UIColor.clearColor()

    //Set the blurred image made from blurred view as textfield's background
    textField.background = imageWithView(blurEffectView)
}

对于 Swift 3.0

func imageWithView(view:UIView)->UIImage {
       UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
       view.layer.render(in: UIGraphicsGetCurrentContext()!)
       let image = UIGraphicsGetImageFromCurrentImageContext()
       UIGraphicsEndImageContext()
       return image!
}

if !UIAccessibilityIsReduceTransparencyEnabled() {
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
    //you can try for more values like .extraLight and .dark

    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = textField.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    textField.backgroundColor = UIColor.clear

    //Set the blurred image made from blurred view as textfield's background
    textField.background = imageWithView(view: blurEffectView)
}

附上截图

希望对你有帮助

【讨论】：

【解决方案2】：

Swift 5、Xcode 10：

我通过继承 UIView 类来做到这一点，并为其添加了模糊效果和文本字段：

import UIKit

class BlurryTextField: UIView {

    private lazy var blurView: UIVisualEffectView = {
        let blurEffect = UIBlurEffect(style: .light)
        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.translatesAutoresizingMaskIntoConstraints = false
        blurView.clipsToBounds = true
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        return blurView
    }()

    lazy var textField: UITextField = {
        let view = UITextField()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .clear
        return view
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.layer.cornerRadius = 10
        self.clipsToBounds = true
        self.backgroundColor = .clear
        setupConstraints()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    private func setupConstraints() {
        self.addSubview(blurView)
        self.addSubview(textField)

        blurView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive     = true
        blurView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive   = true
        blurView.topAnchor.constraint(equalTo: self.topAnchor).isActive             = true
        blurView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive       = true

        textField.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive    = true
        textField.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive  = true
        textField.topAnchor.constraint(equalTo: self.topAnchor).isActive            = true
        textField.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive      = true
    }
}

然后在你的 UIViewController 中：

// Create an instance of BlurryTextField
private lazy var blurryTF: BlurryTextField = {
    let view = BlurryTextField()
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()

    // Add the instance to the top of our view
    view.addSubview(blurryTF)
    blurryTF.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    blurryTF.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    blurryTF.heightAnchor.constraint(equalToConstant: 55).isActive = true
}

这是我的方法的预览：

【讨论】：

【解决方案3】：

你有解决办法吗？

您始终可以将透明文本字段放在另一个视图的顶部。如果该视图恰好与文本字段的大小相同，它看起来就像文本字段的背景视图。您甚至可以将文本字段设置为“背景”视图的子视图，以便更轻松地将它们一起移动。

【讨论】：

【解决方案4】：

您可以将背景颜色设置为白色，并更改其 alpha 值：

myTextField.alpha = 0.5;

可能不完全符合您的要求，但更容易实现。

【讨论】：