Add lefthand margin to UITextField

Question

I want to put the left margin of a UITextField's text at 10 px. What is the best way to do that?

Solution 1

As I have explained in a previous comment, the best solution in this case is to extend the UITextField class instead of using a category, so you can use it explicitly on the desired text fields.

#import <UIKit/UIKit.h>

@interface MYTextField : UITextField

@end


@implementation MYTextField

- (CGRect)textRectForBounds:(CGRect)bounds {
    int margin = 10;
    CGRect inset = CGRectMake(bounds.origin.x + margin, bounds.origin.y, bounds.size.width - margin, bounds.size.height);
    return inset;
}

- (CGRect)editingRectForBounds:(CGRect)bounds {
    int margin = 10;
    CGRect inset = CGRectMake(bounds.origin.x + margin, bounds.origin.y, bounds.size.width - margin, bounds.size.height);
    return inset;
}

@end

A category is intended to add new functions to an existing class, not to override an existing method.

Solution 2

You can do it by extending UITextField class and overriding two methods:

- (CGRect)textRectForBounds:(CGRect)bounds;
- (CGRect)editingRectForBounds:(CGRect)bounds;

Here is the code:

The interface in MYTextField.h

@interface MYTextField : UITextField

@end

Its implementation in MYTextField.m

@implementation MYTextField

static CGFloat leftMargin = 28;

 - (CGRect)textRectForBounds:(CGRect)bounds
{
    bounds.origin.x += leftMargin;

    return bounds;
}

 - (CGRect)editingRectForBounds:(CGRect)bounds
{
    bounds.origin.x += leftMargin;

    return bounds;
}
@end

Solution 3

UITextField * textField = [[UITextField alloc]init];
[textField setDelegate:self];
[textField setFrame:CGRectMake(170,112,140,25)];
[textField setBorderStyle:UITextBorderStyleNone];
[textField setBackgroundColor:[UIColor clearColor]];
[self.View addSubview:noofChildTField];

UIView *paddingView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)] autorelease];
textField.leftView = paddingView;
textField.leftViewMode = UITextFieldViewModeAlways;

Try this code

Solution 4

For Swift 3 :

Make an outlet of the UITextField, say usernameTextField. Then write the following code in viewDidLoad()

let paddingView : UIView = UIView(frame: CGRect(x: 0, y: 0, width: 5, height: 20))
usernameTextField.leftView = paddingView
usernameTextField.leftViewMode = .always

Change the width: 5 to a greater value if more space is required.

Solution 5

I was hoping to see a setting in IB in the property inspector to adjust this value. Turns out I had set alignment and border style inadvertently to values that messed with the padding on the left.

You wouldn't think it would be a big deal to choose left justify and no border but it makes the words basically overlap or come right to the edge of the box and it doesn't look right.

Bad:

Good:

Fixed it right up for me. Hope this helps someone else as well.

View more solutions

Comments

[Bhavin_m]

For more detailed answer of this question refer this answer stackoverflow.com/questions/3727068/…

[Sabby]

Thanks it worked for me...But I have one issue,that it uses that for all the text fields in my application.I want that to be on particular view controllers text field.Can you help me in that.

[Riad Krim]

It's the expected behaviour of catégories, it's not the solution in this case. You have to extend UITextField and override the same methods. So use @clopez solution instead.

[Ricardo]

One question. How can I use this new extended class from Storyboard or Interface Builder? Thanks a lot.

[clopez]

Hi Ricardo, you need to select the element in Storyboard or Interface Builder and edit the custom class in Identity Inspector. grrrab.it/5rr3xy

[Paul.s]

The methods you are overriding are doing a few things that you are not accounting for e.g. not including borders and space occupied by overlay views... so I would call through to super first, which looks like this: return CGRectInset([super textRectForBounds:bounds], 10.f, 0.f);

[Aleks N.]

First I upvoted, but then downvoted. If you add 10 px for origin, you need to subtract 20 px from the width to keep the same margin on the left and on the right. Plus overridding methods through a category is really a bad idea dude, as folks already noted above.

[Riad Krim]

The question is about left margin ONLY.

[Can Aksoy]

what is the original bounds values for resetting?

[pablasso]

@TwiterZX it doesn't matter that they asked for "left margin only". The point is that is wrong to teach bad practices, specially ones that lead to hard bugs like overriding methods in categories.

[Riad Krim]

@pablasso I know, I was not able to change it when first posted the answer, now it's done

[Alex Zavatone]

Why not bounds.origin.y - 20 ?

[denbec]

Just one idea to make this a one-liner: return UIEdgeInsetsInsetRect(bounds, UIEdgeInsetsMake(0, 10, 0, 0));

[Chris Ho]

great! thank you! just modify CGRectMake 5 to much more value if we need bigger margin.

[pkamb]

+1 for noticing that UITextBorderStyleRoundedRect adds a nice left padding to the TextField, whereas UITextBorderStyleNone plus your own (right-angle) border puts the text right up against the edge.

[chrisoneiota]

This is much nicer than subclassing... :)

[Ian Bradbury]

This is not answering the question

[Corbin Miller]

This works in essence, but has the side effect of making a light border around the control if you make your own layer borders (like rounded or oval edges); so you still need to use UITextBorderStyleNone along with padding method to get the right effect.