IOS

How to Set Left/Right Padding in UITEXTFIELD in IOS

There is a common ISSUE (How to Set Left/Right Padding in UITEXTFIELD in IOS ) we always faced while designing a IOS form and that is Padding and Margin of a UIControl.

Either way we faced the same issue whether we use Storyboard or Programmatically we create a form in IOS.

There are multiple ways to align the control
1- Programatically
2- Dragdrop ( Non-Constraint parameters)
3- Using Constraint parameters

But we will highlight few tips here

- (CGRect) rightViewRectForBounds:(CGRect)bounds {

CGRect textRect = [super rightViewRectForBounds:bounds];
textRect.origin.x -= 10;
return textRect;
}

UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 5, 26, 26)];
imgView.image = [UIImage imageNamed:@"img.png"];

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 32)];
[paddingView addSubview:imgView];
[txtField setLeftViewMode:UITextFieldViewModeAlways];
[txtField setLeftView:paddingView];

-(UIView*)paddingViewWithImage:(UIImageView*)imageView andPadding:(float)padding
{
float height = CGRectGetHeight(imageView.frame);
float width = CGRectGetWidth(imageView.frame) + padding;

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)];

[paddingView addSubview:imageView];

return paddingView;
}

- (void) modifyTextField:(UITextField *)textField
{
// Prepare the imageView with the required image
uint padding = 10;//padding for iOS7
UIImageView * iconImageView = [[UIImageView alloc] initWithImage:iconImage];
iconImageView.frame = CGRectMake(0 + padding, 0, 16, 16);

// Set the imageView to the left of the given text field.
textField.leftView = iconImageView;
textField.leftViewMode = UITextFieldViewModeAlways;
}

class CustomTextField : UITextField {

override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
let offset = 5
let width = 20
let height = width
let x = Int(bounds.width) - width - offset
let y = offset
let rightViewBounds = CGRect(x: x, y: y, width: width, height: height)
return rightViewBounds
}}

Create a new file that’s a subclass of UITextField instead of the default NSObject
Add a new method named – (id)initWithCoder:(NSCoder*)coder to set the image

 (id)initWithCoder:(NSCoder*)coder {
self = [super initWithCoder:coder];

if (self) {

self.clipsToBounds = YES;
[self setRightViewMode:UITextFieldViewModeUnlessEditing];

self.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"textfield_edit_icon.png"]];
}

return self;
}

You may have to import #import <QuartzCore/QuartzCore.h>

Add the rightViewRectForBounds method above

In Interface Builder, click on the TextField you would like to subclass and change the class attribute to the name of this new subclass

let downarrow = UIImageView(image: UIImage(named: "down_arrow"))
downarrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"down_arrow"]];
downarrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height);
downarrow.contentMode = UIViewContentModeCenter;

textField.rightView =downarrow;
textField.rightViewMode = UITextFieldViewModeAlways;

In Swift 2:

let downarrow = UIImageView(image: UIImage(named: "down_arrow"))
downarrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height);
downarrow.contentMode = UIViewContentMode.Center
self.textField.rightView =downarrow
self.textField.rightViewMode = UITextFieldViewMode.Always

In Swift 3

let downarrow = UIImageView(image: UIImage(named: "arrowDrop"))
if let size =downarrow.image?.size {
downarrow.frame = CGRect(x: 0.0, y: 0.0, width: size.width + 10.0, height: size.height)
}
downarrow.contentMode = UIViewContentMode.center
self.textField.rightView =downarrow
self.textField.rightViewMode = UITextFieldViewMode.always

In Swift 5

class CustomTextField: UITextField {
func invalidate() {
let errorImage = UIImageView(image: UIImage(named: "errorImage"))
errorImage.frame = CGRect(x: 8, y: 8, width: 16, height: 16)
rightView = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 32))
rightView?.addSubview(errorImage)
rightViewMode = .always
}
}

func addImageViewInsideMyTextField() {
let someView = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 24))
let imageView = UIImageView(image: UIImage(named: "accountImage"))
imageView.frame = CGRect(x: 16, y: 0, width: 24, height: 24)
imageView.contentMode = .scaleAspectFit
someView.addSubview(imageView)

self.myTextField.leftView = someView
self.myTextField.leftViewMode = .always
}