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: