How to set square edges for UITextField in iOS

Question

I'm trying to create a login page on my app with text fields that look like the email and password fields in this image:

enter image description here

I would like rounded tops and square bottoms. I know how to create fully rounded edges using quartz etc but I'm am unsure how to do half and half, I have found a few other posts on similar issues that suggest using something like myTextField.borderStyle = UITextBorderStyleRoundedRect; but obviously this does fully rounded not half.

Please refer this link for more info : http://stackoverflow.com/questions/19910361/uitextfield-with-corner-radius-only-on-top-or-bottom — Natarajan, Mar 20 '14 at 12:49
`UIView` with two `UITextField` objects as subviews and the `UIView`'s layer has rounded corners, and the subviews are clipped. if someone wants to work out as asnwer, go for it, but the idea is that. — holex, Mar 20 '14 at 13:06

score 1 · Accepted Answer · answered Mar 20 '14 at 12:59

1

Yes you can do this by setting textField's background image. It can be done in storyboad.

answered Mar 20 '14 at 12:59

Macrosoft-Dev

2,195
1
12
15

score 1 · Answer 2 · answered Mar 20 '14 at 13:03

1

I think the easiest way is to make a UIView and place both fields in that view. Then , you can set the view to have rounded corners. It will achieve exactly what you want.

answered Mar 20 '14 at 13:03

George

4,029
1
23
31

score 1 · Answer 3 · edited May 23 '17 at 11:43

Perhaps more complicated than the suggestion by @George and @Holex, but you could do something like this:

TopTextField:

UIBezierPath *topMaskPath = [UIBezierPath bezierPathWithRoundedRect:topTextField.bounds 
                                                  byRoundingCorners:UIRectCornerTopLeft| UIRectCornerTopRight                                                       
                                                        cornerRadii:CGSizeMake(10.0, 10.0)];
// Create the shape layer and set its path
CAShapeLayer *topMaskLayer = [CAShapeLayer layer];
topMaskLayer.frame = topTextField.bounds;
topMaskLayer.path = topMaskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
topTextField.layer.mask = topMaskLayer;

BottomTextField:

UIBezierPath *bottomMaskPath = [UIBezierPath bezierPathWithRoundedRect:topTextField.bounds 
                                                     byRoundingCorners:UIRectCornerBottomLeft| UIRectCornerBottomRight                                                       
                                                           cornerRadii:CGSizeMake(10.0, 10.0)];
// Create the shape layer and set its path
CAShapeLayer *bottomMaskLayer = [CAShapeLayer layer];
bottomMaskLayer.frame = bottomTextField.bounds;
bottomMaskLayer.path = bottomMaskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
bottomTextField.layer.mask = bottomMaskLayer;

Based on: here

score 0 · Answer 4 · answered Mar 20 '14 at 13:02

0

Try to use background image for textfield and buttons. Its only easiest way. I using images only for all my apps..

answered Mar 20 '14 at 13:02

Rajesh Loganathan

11,129
4
78
90

How to set square edges for UITextField in iOS

4 Answers4