Blur Effect - Background Uitextfield

Uitextfield background color blurry?

I found a solution where you place a view behind the UITextfield, and make it transparent.

let v = UIView()
v.frame = CGRect(x: 30, y: 100, width: 180, height: 30)
let blurEffect = UIBlurEffect(style: .light)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = v.bounds
blurView.backgroundColor = .clear
v.addSubview(blurView)

let p = UITextField()
p.frame = CGRect(x: 0, y: 0, width: 180, height: 30)
p.layer.isOpaque = true
p.backgroundColor = .clear
v.addSubview(p)

self.view.backgroundColor = .red
self.view.addSubview(v)

This is an example of proposed solution, with background image instead of red color, to emphasize the blur effect

self.view.backgroundColor = UIColor(patternImage: UIImage(named: "background") ?? UIImage())

UIKit - How to prevent default blur and focus background of UITextField?

Actually we always can inherit UIKit classes and do whatever layout/style we want. Here is very raw demo of how this can be done.

Prepared & tested with Xcode 12.1 / tvOS 14.0

So just substitute custom subclass of UITextField class

class MyTextField: UITextField {

    lazy var textLayer = CATextLayer()
    
    override func didMoveToSuperview() {
        super.didMoveToSuperview()
        layer.backgroundColor = UIColor.clear.cgColor

        textLayer.font = self.font
        textLayer.fontSize = 36
        textLayer.foregroundColor = UIColor.white.cgColor
        textLayer.alignmentMode = .center
        textLayer.frame = layer.bounds
        layer.addSublayer(textLayer)
        layer.borderWidth = 2
    }

    override func layoutSublayers(of layer: CALayer) {
        layer.borderColor = self.isFocused ? UIColor.black.cgColor : UIColor.clear.cgColor
        textLayer.frame = layer.bounds
        textLayer.string = self.text?.isEmpty ?? true ? self.placeholder : self.text
    }

    override func addSubview(_ view: UIView) {
        // blocks standard styling
    }

}

How to remove blur from UITextField keyboard

I found a trick that works, instead of trying to remove the blur from the keyboard I changed the background color of the UIPickerView to match the UIView background color using this line inside the numberOfRowsInComponent function:

picker.backgroundColor = UIColor.black

And if you are using a gradient color for your UIView background you can use this line:

picker.addGradientBackground(firstColor: UIColor.black, secondColor: UIColor.white)

But you have to manage the colors correctly to get the best results.

Also if you only have the hex values of the colors you can convert them to UIColor easily using this site

Additional note:

In my case, I was using a gradient color for my UIView background, and a function that moves UITextField when keyboard is presented which you can find here, thankfully this made it much easier, since I only needed to use only one color for the UIPickerView background which is the color at the bottom-most of the UIView background.

HTH

How to fix UITextField background image not displayed after iOS14?

maybe apple will fix the problem in future updates. Meanwhile, I found the temporary solution with swift 4.2 hope it will be helpful for you

    func makeTextFieldBorderstyle(){
    if #available(iOS 14.0, *) {
        self.YourTextField1.borderStyle = .line
        self.YourTextField2.borderStyle = .line
        self.YourTextField3.borderStyle = .line
      } 
    }

call this viewDidLoad

Creating a blurring overlay view

You can use UIVisualEffectView to achieve this effect. This is a native API that has been fine-tuned for performance and great battery life, plus it's easy to implement.

Swift:

//only apply the blur if the user hasn't disabled transparency effects
if !UIAccessibility.isReduceTransparencyEnabled {
    view.backgroundColor = .clear

    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    //always fill the view
    blurEffectView.frame = self.view.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    view.addSubview(blurEffectView) //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    view.backgroundColor = .black
}

Objective-C:

//only apply the blur if the user hasn't disabled transparency effects
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    self.view.backgroundColor = [UIColor clearColor];

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //always fill the view
    blurEffectView.frame = self.view.bounds;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:blurEffectView]; //if you have more UIViews, use an insertSubview API to place it where needed
} else {
    self.view.backgroundColor = [UIColor blackColor];
}

If you are presenting this view controller modally to blur the underlying content, you'll need to set the modal presentation style to Over Current Context and set the background color to clear to ensure the underlying view controller will remain visible once this is presented overtop.

---

Related Topics