Wednesday, April 11, 2012

UITextView with corner radius: White background of the input itself overlaps the round corners

I am trying to create a text field in objective-c with a big corner radius, like the searchField in iOS.
In my xib i have added a UITextField.
I style the textfield in objective-C like this:

// corner radius
textField.layer.cornerRadius = 20.0f;
textField.layer.masksToBounds = YES;
textField.backgroundColor = [UIColor clearColor];

[textField setFont:[UIFont fontWithName:@"Univers-Condensed-Medium" size:18.0]];

Result: The corners of the input are not visible, some white background overlays these.
You can see the problem in this image:

Screenshot of the problem

I have tried several things like:

textField.leftView.opaque = NO;
textField.leftView.backgroundColor = [UIColor clearColor];

textField.inputView.opaque = NO;
textField.inputView.backgroundColor = [UIColor clearColor];

textField.rightView.opaque = NO;
textField.rightView.backgroundColor = [UIColor clearColor];

I even added an icon (just for testing) all gave the same result.
What do I need to do to make the corners visible?

1 comment:

  1. I had done some test and no white background overlaps, it is just this way the textfield look like when you change the corner radius. Try to change the background color of the UIView that the textfield is inside, and see that it will be always this way.

    Unfortunately, if you want to change the cornerRadius and want it to be displayed in the way you posted here, maybe you need to use some background image, I do not know.

    If I was you I will use the textField without the cornerRadius.