Visual Effect View's Blur doesn't work on UIView from xib

Question

Created Aug ’22

Replies 1

Boosts 0

Participants 2

I created a custom Numpad keyboard through xib and wanted to add a blur effect to its background. So I add a Visual Effect View in xib: https://i.stack.imgur.com/QjiwP.png

Main View and Visual Effect View background color is set to Default and I also tried to use Clear Color.

The problem is when I initialize the Numpad, background has a light grey color without any blur effect: https://i.stack.imgur.com/LebUA.png

How to add a blur effect to the Numpad so yellow square can be blurred and visible?

Code for NumpadView:

import UIKit

class NumpadView: UIView {

@IBOutlet weak var resetButton: NumpadButton!
@IBOutlet weak var decimalButton: NumpadButton!

var target: UITextInput?
var view: UIView?

init(target: UITextInput, view: UIView) {
    super.init(frame: .zero)
    self.target = target
    self.view = view
    initializeSubview()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    initializeSubview()
}

func initializeSubview() {
    let xibFileName = "NumpadView"
    let view = Bundle.main.loadNibNamed(xibFileName, owner: self, options: nil)![0] as! UIView
    self.addSubview(view)
    view.frame = self.bounds
    self.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
}

Code for initializing in a VC:

import UIKit

class NumpadViewController: UIViewController, UITextFieldDelegate {

@IBOutlet weak var textField: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()
    textField.delegate = self
    textField.inputView = NumpadView(target: textField, view: view)
}
}

Boost

Answer 1

Frameworks Engineer OP

Apple

Aug ’22

Is the yellow square laid out underneath the input view? If not then there isn't going to be any contribution from it to the blur. Even if it is, the exact contribution is going to depend on the blur effect you use, different ones pull in different amounts of color from beneath the view. Finally since you seem to be using this as an input view are you sure the keyboard itself isn't already providing a blur? If it is, then you'd be double blurring which would (given the manipulations typically in effect) almost guarantee no color from below the two blurs would show through.

1