How to Style Uitextview to Like Rounded Rect Text Field

How to style UITextview to like Rounded Rect text field?

There is no implicit style that you have to choose, it involves writing a bit of code using the QuartzCore framework:

//first, you
#import <QuartzCore/QuartzCore.h>

//.....

//Here I add a UITextView in code, it will work if it's added in IB too
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];

//To make the border look very close to a UITextField
[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[textView.layer setBorderWidth:2.0];

//The rounded corner part, where you specify your view's corner radius:
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;

It only works on OS 3.0 and above, but I guess now it's the de facto platform anyway.

Rounding edge on UITextField

if you want to simplest way to do like on a screen look here>>>Sample Image

Grey view with clip subviews mode on, and 3 labels/textfields inside, and 2 black view with 1 pixel height

in code..

self.viewCorner.layer.cornerRadius = 6;
self.viewCorner.layer.borderWidth = 1;
self.viewCorner.layer.borderColor = [UIColor blackColor].CGColor;

After you set constraints to grey view and 2 views with 1 pixel height like this

Grey view

Sample Image

1 pixel height view

Sample Image

and result on IPad simulator

Sample Image

Thats all, you can do this for 5 minutes

iPhone - UITextView should look like a UITextField

In my self appointed role as interface-nazi, I feel compelled to point out that UITextField and UITextView have different appearances to communicate to users to expect a slightly different function.

In a textfield, a return ends editing. In a textview, it may only create a new line. In a textfield, links and phone numbers are not recognized. In a textview they are. Textviews can scroll. And so on...

You shouldn't create a non-standard interface element unless you have a strong compelling reason to do so. You should ask yourself how making a textview look like a textfield will help the user understand what actions they need to take to make the app work as they expect and wish it to.

Surprisingly small tweaks can create serious user confusion. A non-standard interface can introduce just slight pause, a half second, every time they use it. That minor confusion can degrade their perception of the utility of the app.

rounded corner to UITextField Xcode

Just create a UIView.

Put your two text fields in the UIView.
Remove the border style of UITextField.

yourView.layer.cornerRadius = 10.0
yourView.clipsToBounds = true


Related Topics



Leave a reply



Submit