Changing inputView background color from blurry gray to anything else

Question

I am trying to change inputView background color from the default grayish to something else however I do not see any solution to that.

I have UIPickerView that opens when user touches the textField and it is bottom like keyboard as inputView. I am achieving it like this: myTextField.inputView = myPickerView.

Since I am using it inside inputView, I think I actually have to change it's backgroud color but do not know how.

It looks like this:

Now I want to change the background color of it.

I've already tried:

1. myPickerView.setValue(0.8, forKey: "alpha")
2. myPckerView.backgroundColor = UIColor.blue
3. self.inputView.backgroundColor = UIColor.blue
4. and pretty much every solution from SO

And this is the output(has some nasty blurry layer over it):

Do I have to create some kind of custom keyboard just for that or is there a workaround or Apple tells again what you can do and what not like robot?

Answer 1

OK - since you can get the UIPickerView appearance the way you want in a "normal" view, you can create a "normal" view to use as your.inputView and then add your picker view as a subview.

Here's a quick example - just add a UITextField in IB and connect it to the IBOutlet:

class MyViewController: UIViewController
{

    @IBOutlet weak var theTextField: UITextField!

    let cancelButton: UIButton = {
        let b = UIButton()
        b.setTitle("Cancel", for: .normal)
        b.translatesAutoresizingMaskIntoConstraints = false
        return b
    }()

    let doneButton: UIButton = {
        let b = UIButton()
        b.setTitle("Done", for: .normal)
        b.translatesAutoresizingMaskIntoConstraints = false
        return b
    }()

    let pvToolbar: UIView = {
        let v = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 40))
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .black
        return v
    }()

    let pvBackground: UIView = {
        let v = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
        v.backgroundColor = .white
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let pickerView: UIPickerView = {
        let p = UIPickerView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
        p.showsSelectionIndicator = true
        p.translatesAutoresizingMaskIntoConstraints = false
        return p
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // add buttons to the inputAccessoryView "toolbar"
        pvToolbar.addSubview(cancelButton)
        pvToolbar.addSubview(doneButton)

        cancelButton.leftAnchor.constraint(equalTo: pvToolbar.leftAnchor, constant: 8.0).isActive = true
        cancelButton.topAnchor.constraint(equalTo: pvToolbar.topAnchor, constant: 6.0).isActive = true
        cancelButton.bottomAnchor.constraint(equalTo: pvToolbar.bottomAnchor, constant: -6.0).isActive = true

        doneButton.rightAnchor.constraint(equalTo: pvToolbar.rightAnchor, constant: -8.0).isActive = true
        doneButton.centerYAnchor.constraint(equalTo: cancelButton.centerYAnchor).isActive = true

        // add pickerView to our plain UIView that will become our inputView
        pvBackground.addSubview(pickerView)

        pickerView.topAnchor.constraint(equalTo: pvBackground.topAnchor).isActive = true
        pickerView.bottomAnchor.constraint(equalTo: pvBackground.bottomAnchor).isActive = true
        pickerView.centerXAnchor.constraint(equalTo: pvBackground.centerXAnchor).isActive = true
        pickerView.widthAnchor.constraint(equalTo: pvBackground.widthAnchor, multiplier: 1.0).isActive = true

        pickerView.delegate = self
        pickerView.dataSource = self

        // pvBackground "contains" the actual pickerView
        theTextField.inputView = pvBackground

        theTextField.inputAccessoryView = pvToolbar

    }

}

extension AnimConstraintsViewController:  UIPickerViewDelegate, UIPickerViewDataSource {

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return "Row: \(row)"
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return 30
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        // simple label with centered text as our viewForRow
        let label = UILabel()
        label.backgroundColor = .white
        label.textColor = .black
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 17.0, weight: UIFontWeightRegular)
        label.text = "Row: \(row)"
        return label
    }
}

Result: