Ahmed jamal
Ahmed jamal

Reputation: 73

Make Custom Text Fields

I'm Beginner in IOS development, and now I'm creating a form for user registration. However the text field that is default in xcode doesn't look pretty please anyone can tell me how to make a custom text field such us in Facebook application or Lynda application.

Upvotes: 5

Views: 17136

Answers (4)

Anbu.Karthik
Anbu.Karthik

Reputation: 82759

if you want to change in Storyboard or xib using

Attribute

enter image description here

In UITextField Attribute property has BorderStyle set as None , you can customize the width and height , whatever you need you can change

the UITextBorderStyle Property type as

UITextBorderStyleNone,
UITextBorderStyleLine,
UITextBorderStyleBezel,
UITextBorderStyleRoundedRect

If set to UITextBorderStyleRoundedRect, custom background images are ignored.else three things you can customize.

additional apple Reference

programmatically

Objective-C

UITextField *txtEmailfield = [[UITextField alloc] initWithFrame:CGRectMake(10, 200, 300, 40)];
txtEmailfield.font = [UIFont systemFontOfSize:15];
txtEmailfield.placeholder = @"Email(Required)";
txtEmailfield.autocorrectionType = UITextAutocorrectionTypeNo;
txtEmailfield.keyboardType = UIKeyboardTypeDefault;
txtEmailfield.returnKeyType = UIReturnKeyDone;
txtEmailfield.clearButtonMode = UITextFieldViewModeWhileEditing;
txtEmailfield.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
txtEmailfield.delegate = self;
txtEmailfield.borderStyle=UITextBorderStyleNone;
[self.view addSubview:txtEmailfield];

Swift

var txtEmailfield = UITextField(frame: CGRectMake(10.0, 20.0, 300.0,40.0))
txtEmailfield.backgroundColor = UIColor.redColor()
txtEmailfield.borderStyle = UITextBorderStyle.None
txtEmailfield.font=UIFont.systemFontOfSize(12)
txtEmailfield.placeholder="Email(Required)"
txtEmailfield.autocorrectionType=UITextAutocorrectionType.No
txtEmailfield.keyboardType=UIKeyboardType.Default
txtEmailfield.returnKeyType=UIReturnKeyType.Done
txtEmailfield.delegate = self
txtEmailfield.clearButtonMode=UITextFieldViewMode.WhileEditing
txtEmailfield.contentVerticalAlignment=UIControlContentVerticalAlignment.Center
self.view.addSubview(txtEmailfield)

Upvotes: 8

Pepeng Hapon
Pepeng Hapon

Reputation: 367

If you just want to change the UI of the textField, you can do this in your storyboard or nib:

enter image description here

Notice the Border Style, the default one is RoundRect (the 4th one). but if you want to customize the UI, choose the 1st one (BorderStyle: None)

Now you can put background image or change it's color and text as you what you wanted.

Upvotes: 0

ImWH
ImWH

Reputation: 944

Create a subclass that inherits from UITextfield, then rewrite some methods or add some custom views in layoutsubviews. And you can check this page from apple to see what UITextfield have. https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/

Upvotes: 0

Honey Lakhani
Honey Lakhani

Reputation: 83

There are various properties in UITextField class which you can use to customize the text field. e.g borderStyle property to customize the border whether you want rounded rect or line etc.. Go through the below link : https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/

Upvotes: 0

Related Questions