UITextField Set Border

Question

I want to make my login interface a little bit more fancy. So I wanted to build somethin like this:

Thats what i Have to far:

    self.usernameTextField.layer.borderWidth = 1.0f;
self.usernameTextField.layer.borderColor = [[UIColor colorWithRed:171.0/255.0 green:171.0/255.0 blue:171.0/255.0 alpha:1.0] CGColor];
self.usernameTextField.layer.cornerRadius = 5;
self.usernameTextField.clipsToBounds      = YES;

    self.passwordTextField.layer.borderWidth = 2.0f;
self.passwordTextField.layer.borderColor = [[UIColor colorWithRed:171.0/255.0 green:171.0/255.0 blue:171.0/255.0 alpha:1.0] CGColor];
self.passwordTextField.layer.cornerRadius = 5;
self.passwordTextField.clipsToBounds      = YES;

How can I connect them? There is still a gap between the two UITextFields..

your problem is that you have the corner to every angle of your textFiled — Mirko Catalano, Oct 28 '13 at 13:20
Are you sure that isn't a `UITableView` with rounded corners? — trojanfoe, Oct 28 '13 at 13:23
possible duplicate of [Having a UITextField in a UITableViewCell](http://stackoverflow.com/questions/409259/having-a-uitextfield-in-a-uitableviewcell) — trojanfoe, Oct 28 '13 at 13:28
@MarcJohnson: Just fix this image in imageView. And create two textField with no border. And fix the text field in correct position in imageview. Then customize the image with no text instead of text in imageview. you show the text (Email) as place holder — TamilKing, Oct 28 '13 at 13:37
You could also use `UIRectCorner` to create a path to mask around the views... — Wain, Oct 28 '13 at 13:50

Suresh · Accepted Answer · 2013-10-28T13:32:23.430

2

Put plain image background like your interface and put two text fields on that image and set boarder style like below.

[yourTextField setBorderStyle:UITextBorderStyleNone];

edited Oct 28 '13 at 13:32

answered Oct 28 '13 at 13:25

Suresh

1,005
9
16

you can set the UITextField to Boarder Style None in Story board. Then I was able to change the height and added the image! – MarcJohnson Oct 28 '13 at 13:42

score 0 · Answer 2 · answered Oct 28 '13 at 13:26

The example you show is almost certainly using a table view. If you want to mimic it created a grouped table view with 2 static rows and add your text fields to each row. Make sure the text fields border style is set to none (it should be the default in IB), then set your placeholder text and color. If you want the icons, that is probably just a small UIImageView to the left of the text field.

score 0 · Answer 3 · answered Oct 28 '13 at 13:26

0

You can set your UITextField border style to none.

[self.textField setBorderStyle:UITextBorderStyleNone];

and then use custom background images, to get the desired look.

answered Oct 28 '13 at 13:26

ManicMonkOnMac

1,466
13
21

score 0 · Answer 4 · answered Oct 28 '13 at 13:30

0

Create your both TextField custom type. Dont set any border style.. Fix the image in ImageView and then place the two text field frame for the text in imageview.

answered Oct 28 '13 at 13:30

TamilKing

1,633
11
22

UITextField Set Border

4 Answers4

Linked