CODEWITHSUNDEEP
swiftuiviewuikitxibcornerradius
artexhibit
artexhibit

Reputation: 319

Strange cornerRadius behaviour on UIView from xib

I created a custom Numpad keyboard through xib and wanted to initialize it with a rounded corners.

Here is the code I use:

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.layer.cornerRadius = 30
    self.layer.masksToBounds = true
    self.addSubview(view)
    view.frame = self.bounds
    self.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
}

But then I receive the strange view look in area where cornerRadius is implemented:

How to remove that grey background which is visible near the rounded corners?

UPDATE:

According to View Debugger it seems like this grey layer between yellow square and Visual Effect View is a UICompatibilityInputViewController:

How I presenting the Numpad:

1.I created a NumpadView as a UIView subclass in a xib:

2.In my VC I just change a standard textField.inputView property on my custom NumpadView:

import UIKit

class NumpadViewController: UIViewController, UITextFieldDelegate {

@IBOutlet weak var textField: UITextField!

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

Test project on Github

Upvotes: 0

Views: 104

Answers (2)

DonMag
DonMag

Reputation: 77462

Another option to get your "rounded corners"...

Get rid of the Visual Effect View in your Numpad class, and set a layer mask on the superview at run-time.

In class NumpadView: UIView, UIInputViewAudioFeedback:

override func layoutSubviews() {
    super.layoutSubviews()
    guard let sv = superview else { return }
    let maskLayer = CAShapeLayer()
    let bez = UIBezierPath(roundedRect: bounds, cornerRadius: 16)
    maskLayer.path = bez.cgPath
    sv.layer.mask = maskLayer
}

Looks like this:

enter image description here

Upvotes: 1

yoninja
yoninja

Reputation: 1962

Sure, the NumpadView object has rounded corner. However, you are using it like this:

textField.inputView = NumpadView(target: textField, view: view)

So, that part which is not rounded is the textField's inputView. I'm not quite sure if you can modify its layer to have corner radius. But, if you really want to get that rounded corner effect, an easier approach is just to add the NumpadView directly to the parent view and anchored to the bottom. Then show it via the begin editing delegate of the textfield (and hide via end editing).

Upvotes: 1

Related Questions