模糊效果-背景UITextField

Question

我使用Swift 2和Xcode 7。

我想模糊我的UITextField的背景。 我还没有找到一个属性backgroundView 。 仅background （用于背景图像）或backgroundColor 。

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

你有解决方案吗 ？

Answer 1

您只能添加某种视图以使其成为模糊视图。 现在的问题是，文本字段没有backgroundView属性，但它们确实具有background属性，我们可以在其中设置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)
}

这是所附的屏幕截图

希望这可以帮助

Answer 2

你有解决方案吗？

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

Answer 3

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

myTextField.alpha = 0.5;

可能与您的要求不完全相同，但是易于实现。

Answer 4

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
}

这是我的方法的预览：