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
|
1 2 3 4 5 6 |
- (CGRect) rightViewRectForBounds:(CGRect)bounds { CGRect textRect = [super rightViewRectForBounds:bounds]; textRect.origin.x -= 10; return textRect; } |
|
1 2 |
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 5, 26, 26)]; imgView.image = [UIImage imageNamed:@"img.png"]; |
|
1 2 3 4 |
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 32)]; [paddingView addSubview:imgView]; [txtField setLeftViewMode:UITextFieldViewModeAlways]; [txtField setLeftView:paddingView]; |
|
1 2 3 4 5 6 7 8 9 10 11 |
-(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; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
- (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; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(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
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 |
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
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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 } |