How can i make a more rounded UITextField? Like the search field in Safari on iPad

Question

HI I'm trying to get a UITextField to look like the google search field available in the safari app on iPad. The purpose of the field will be the same (a search box).

I know i could use a UISearchBar but I would have to use hackish code to get rid of the magnifying glass icon and the background and I don't want that.

I'm attaching an image with the TextField used by apple as their search box. How can I modify an UITextField to look and behave like the search field in this screenshot?

I tried to modified the UITextField's layer roundedCorners property but this doesn't work as expected.

Any help is very much appreciated!

Thank you!

Answer 1

You can set the Corner-Radius on any UIView-Subclass.

1. Add the QuartzCore.framework to your project
2. add #import <QuartzCore/QuartzCore.h> in your UIViewController Subclass (where you have access to the UITextfield instance of your choice
3. within viewDidLoad / viewWillAppear (or any other place where your UITextfield is allready instantiated call [yourTextField.layer setCornerRadius:14.0f];
4. play around with the cornerRadius value until it looks good

Answer 2

Use the below code.It works for me:

searchField= [[UITextField alloc] initWithFrame:CGRectMake(0,0,150,31)];
searchField.delegate = self;
searchField.autoresizingMask = UIViewAutoresizingFlexibleWidth;
searchField.textColor = [UIColor colorWithRed:102.0/255 green:102.0/255 blue:102.0/255 alpha:1.0];
searchField.textAlignment = UITextAlignmentLeft;
searchField.font = [UIFont fontWithName:@"Helvetica" size:15];
searchField.autocorrectionType = UITextAutocorrectionTypeNo;
searchField.contentVerticalAlignment =UIControlContentVerticalAlignmentCenter;
searchField.clearsOnBeginEditing = NO;
searchField.autocapitalizationType = UITextAutocapitalizationTypeNone;
searchField.autocorrectionType = UITextAutocorrectionTypeNo;
searchField.keyboardType = UIKeyboardTypeURL;
searchField.returnKeyType = UIReturnKeySearch;        
searchField.clearButtonMode = UITextFieldViewModeWhileEditing;
searchField.rightViewMode = UITextFieldViewModeUnlessEditing;
searchField.layer.cornerRadius = 17;
searchField.placeholder=@"Google Search";
searchField.borderStyle = UITextBorderStyleRoundedRect;//To change borders to rounded
searchField.layer.borderWidth = 1.0f; //To hide the square corners 
searchField.layer.borderColor = [[UIColor grayColor] CGColor]; //assigning the default border color
UIBarButtonItem *searchFieldItem = [[UIBarButtonItem alloc] initWithCustomView:searchField];

Answer 3

Set background property of UITextField to an appropriate image, like this one:

Answer 4

Why don't you try a trick with making separate image of the input field you need and placing it under the real textField control. However, you will have to manipulate the colors of the textField you're placing over in order to make it transparent.

Answer 5

Use a graphic with the rounded edges you want and then position a textview on top.