Blur effect - Background UITextField

Question

I use Swift 2 and Xcode 7.

I would like to blur in the background of my UITextField. I have not found a property backgroundView. Only background (for background image) or backgroundColor.

I would have come to add a view in background. But I do not know how to make a UITextField.

Do you have a solution ?

Answer 1

You can set the background color to white, and change its alpha value:

myTextField.alpha = 0.5;

Probably not exactly what you asked, but much easier to implement.

Answer 2

You can only add some kind of view to make it a blur view. Now the problem is that textfields don't have a backgroundView property but they do have a background property where we can set an UIImage. So we can make a UIImage from a UIView too

This method will create a UIImage for the UIView passed.

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

Now we will use a UIBlurEffect and UIVisualEffectView which are available for iOS 8+

//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)
}

For 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)
}

Here is the screenshot attached

Hope this helps

Answer 3

Do you have a solution?

You can always put a transparent text field on top of another view. If that view happens to have the same size as the text field, it'll look just like the background view of the text field. You could even make the text field a subview of the "background" view, so that you can move them around together more easily.