How to add space at start of UITextField - iphone

I am creating an app that contain multiple UITextField. In the textField i have sated border type to none and background image. It display fine, But now my text is started from the lest border which does not look good, like this
How can i add space at the start of the textfield?

Try this
UILabel * leftView = [[UILabel alloc] initWithFrame:CGRectMake(10,0,7,26)];
leftView.backgroundColor = [UIColor clearColor];
textField.leftView = leftView;
textField.leftViewMode = UITextFieldViewModeAlways;
textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

Here's #Kalpesh's answer in Swift 3.x:
let leftView = UILabel(frame: CGRectMake(10, 0.0, 7, 26))
leftView.backgroundColor = .clearColor()
customField.leftView = leftView
customField.leftViewMode = .Always
customField.contentVerticalAlignment = .Center
Swift 4.x
let leftView = UILabel(frame: CGRect(x: 10, y: 0, width: 7, height: 26))
leftView.backgroundColor =.clear
customField.leftView = leftView
customField.leftViewMode = .always
customField.contentVerticalAlignment = .center

You should subclass UITextField and override drawText function.
check this for help
OR
You can do following:
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 15, height_of_textfiled)];
textField.leftView = paddingView;
textField.leftViewMode = UITextFieldViewModeAlways;

Objective c
For padding only placeholder this code will work
usernameTF.attributedPlaceholder = [[NSAttributedString alloc] initWithString:#" Your text"];
For padding both placeholder and text of the UITextField this below code will work
usernameTF.layer.sublayerTransform = CATransform3DMakeTranslation(40, 0, 30);
Swift 3.0
For padding only placeholder this code will work
yourTextField.attributedPlaceholder = NSAttributedString(string: " YourText")
For padding both placeholder and text of the UITextField this below code will work
usernameTF.layer.sublayerTransform = CATransform3DMakeTranslation(40, 0, 30)

You can subclass UITextField and override textRectForBounds and editingRectForBounds.
For example,
- (CGRect)textRectForBounds:(CGRect)bounds {
return CGRectMake(bounds.origin.x + 10, bounds.origin.y + 5, bounds.size.width - 20, bounds.size.height - 10);
}
- (CGRect)editingRectForBounds:(CGRect)bounds {
return CGRectMake(bounds.origin.x + 10, bounds.origin.y + 5, bounds.size.width - 20, bounds.size.height - 10);
}

Swift 4
yourTextField.layer.sublayerTransform = CATransform3DMakeTranslation(10, 0, 10)

You can put the textfield background image in an image view,above the imageview put your textfield a space left.

-(void)textField:(UITextField *) textField didBeginEditing {
if ([textField.text isEqualToString:#""] || textField.text == NULL) {
textField.text = #" ";
}
}

Related

How can I change the color of a UITextField clearButton?

I would like to change the color of the clearButton that appaers when you are writting on a UItextField. Any suggestion? I am not an advanced interface developer and I have no idea of how to do it.
You should create your own UIButton (with image, you'll need a png of you desiderated button), instance it and put this button in the rightView of your UITextField.
CGFloat myWidth = 26.0f;
CGFloat myHeight = 30.0f;
UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, myWidth, myHeight)];
[myButton setImage:[UIImage imageNamed:#"myButtonImage"] forState:UIControlStateNormal];
[myButton setImage:[UIImage imageNamed:#"myButtonImage"] forState:UIControlStateHighlighted];
[myButton addTarget:self action:#selector(doClear:) forControlEvents:UIControlEventTouchUpInside];
myTextField.rightView = myButton;
myTextField.rightViewMode = UITextFieldViewModeUnlessEditing;
You could need to refine alignments using (these are example values):
myButton.imageEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 0);
Then, you will need to implement method -(void) doClear(id)sender; that will clear your textfield.
Swift 4
I used Giorgio's answer and this is what I went with :
let height = textField.bounds.height / 3
let width = height + 10
let rect = CGRect(x: 0, y: 0, width: width, height: height)
let myButton = UIButton(frame: rect)
myButton.setImage(UIImage(named: "clear button white"), for: .normal)
textField.rightView = myButton
textField.rightViewMode = .always
myButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
The normal one :
enter image description here
This one :
enter image description here

center custom title in UINavigationBar?

I have a custom UINavigationBar title and a custom back button.
My problem is that the title is not centered on the iPhone.
It is as if my back button is pushing the title over to the right. Any Idea how I can center it?
int height = self.navigationController.navigationBar.frame.size.height;
int width = self.navigationController.navigationBar.frame.size.width;
UILabel *navLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width + 300, 20)];
navLabel.backgroundColor = [UIColor whiteColor];
navLabel.textColor = [UIColor redColor];
navLabel.font = [UIFont fontWithName:#"Helvetica" size:30];
navLabel.textAlignment = UITextAlignmentCenter;
self.navigationItem.titleView = navLabel;
[navLabel release];
((UILabel *)self.navigationItem.titleView).text = self.title;
Thanks!
edit I removed superfluous code and added this picture:
Notice how the title is pushed over to accomodate the button....
iOS is doing this because the frame you initialize is alway 300+width pixels. It is trying to center the full frame, the frame is larger than the space it wants to fit it in (because of the button) and therefore your label gets pushed to the right.
What you need to do is give the Frame of the navLabel the minimum size it needs.
So if your text is only 100px wide, but the frame is 400px, then iOS is trying to center the 400px inside the Navigation header, and doesn't have enough space. When you set the size to the actual 100px that is needed, iOS will center your header correctly, because there is plenty of space to center 100px.
The code snippet below should help you to detect the minimum size your frame needs, depending on the font and the text you try to put in.
Make sure the frame of the label is as small as possible, but does not exceed the max width.
(the width of the navigation bar).
UIFont* titleFont = [UIFont fontWithName:#"Helvetica" size:30];
CGSize requestedTitleSize = [titleText sizeWithAttributes:#{NSFontAttributeName: titleFont}];
CGFloat titleWidth = MIN(maxTitleWidth, requestedTitleSize.width);
UILabel *navLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, titleWidth, 20)];
navLabel.backgroundColor = [UIColor whiteColor];
navLabel.textColor = [UIColor redColor];
navLabel.font = [UIFont fontWithName:#"Helvetica" size:30];
navLabel.textAlignment = NSTextAlignmentCenter;
navLabel.text = titleText;
self.navigationItem.titleView = navLabel;
Swift 5.0
let titleFont = UIFont.systemFont(ofSize: 17.0)
let title = "My Title"
let titleSize = title.size(withAttributes: [.font: titleFont])
let frame = CGRect(x: 0, y: 0, width: titleSize.width, height: 20.0)
let titleLabel = UILabel(frame: frame)
titleLabel.font = titleFont
titleLabel.textColor = .red
titleLabel.textAlignment = .center
titleLabel.text = title
navigationItem.titleView = titleLabel
I had the same problem before. I had a UINavigationbar with right- and left-button.
I want to center an image on the UINavigationbar. So I had to put the image into an UIView with width 0.
The image self get a x-value which is half of own width.
UINavigationItem *item = navigationController.topViewController.navigationItem;
UIView *backView =[[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 30)];
[img_logo setFrame:CGRectMake(-45, 5, 90, 20)];
[backView addSubview:img_logo];
item.titleView = backView;
Nice answer! However sizeWithFont is now deprecated. You would want to do something like this now.
NSDictionary *textTitleOptions = [NSDictionary dictionaryWithObjectsAndKeys: [UIFont fontWithName:#"Helvetica" size:30], NSFontAttributeName, nil];
CGSize requestedTitleSize = [[NSString stringWithFormat:#"Your String"] sizeWithAttributes:textTitleOptions];
CGFloat titleWidth = MIN(self.view.frame.size.width, requestedTitleSize.width);
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, titleWidth, 44)];
I used autolayout constraints to solve this issue:
Add UILabel into a UIView.
Set constraints of centerX for the UILabel:
self.titleLabelCenterXConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f];
In the UIView layoutSubViews to adjust the centerX offset value:
- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat screenCenter = CGRectGetMidX([UIScreen mainScreen].bounds);
CGFloat diffCenter = screenCenter - CGRectGetMidX(self.frame);
self.titleLabelCenterXConstraint.constant = diffCenter;
}
set UIView to navigationItem titleView
Swift 2.3:
let tlabel = UILabel(frame: CGRectMake(0, 0, 200, 40))
tlabel.text = self.title
tlabel.textColor = UIColor.whiteColor()
tlabel.font = UIFont.boldSystemFontOfSize(17) //UIFont(name: "Helvetica", size: 17.0)
tlabel.backgroundColor = UIColor.clearColor()
tlabel.adjustsFontSizeToFitWidth = true
tlabel.textAlignment = .Center
self.navigationItem.titleView = tlabel
Swift 3 for #BHuelse's answer:
let image = UIImage(named: "logo")
let logoView = UIView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 30))
let imageView = UIImageView(frame: CGRect(x: -45, y: 5, width: 90, height: 20))
imageView.image = image
imageView.contentMode = .scaleAspectFit
logoView.addSubview(imageView)
self.navigationItem.titleView = logoView
The title is not centered in the navbar itself. It is centered between the left buttons and the right buttons of the navbar. This means that if you have a big button on the left, the title will be shifted to the right.
You can change the center by adding a centered constraint to your title and then modifying it so it's really the center of the navbar :
// Position the title in the middle of the navbar and not in the middle of buttons
fileprivate func centerTitle () {
if let navigation = self.navigationController {
let titleMiddle = navigation.navigationBar.convert(titleViewLabel.frame, from: titleViewLabel.superview).midX
let diff = navigation.navigationBar.center.x - titleMiddle
constraintTitleViewCentered.constant += diff
}
}

Resetting UITextField Left margin

I want to be align Left margin of UITextField.text to 10Px. please suggest me best way ?? same in roundedRect TesxtField where text start 10 px from left
have reached almost by overriding - (CGRect)textRectForBounds:(CGRect)bounds. now issue is when TextField goes in to edit mode their left margin reset to Zero .......
#implementation UITextField(UITextFieldCatagory)
- (CGRect)textRectForBounds:(CGRect)bounds {
CGRect theRect=CGRectMake(bounds.origin.x+10, bounds.origin.y, bounds.size.width-10, bounds.size.height);
return theRect;
}
Can you try UITextField's instance method drawTextInRect:?
I think you could use the leftView property for this.
You can add a leftView and rightView to a UITextfield. These views can be used to display an icon, but if it's an empty view it'll just take up space, which is what you want.
CGFloat leftInset = 5.0f;
UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, leftInset, self.bounds.size.height)];
self.leftView = leftView;
self.leftViewMode = UITextFieldViewModeAlways;
[leftView release];
Refer SO question UITextField custom background view and shifting text
Have you tried
-(CGRect)editingRectForBounds(CGRect)bounds;
Override the super's implementation, and tune the results. This way you don't need to calculate with leftView and rightView (if you use them).
- (CGRect)textRectForBounds:(CGRect)bounds {
CGRect ret = [super textRectForBounds:bounds];
ret.origin.x = ret.origin.x + 10;
ret.size.width = ret.size.width - 20;
return ret;
}
- (CGRect)editingRectForBounds:(CGRect)bounds {
return [self textRectForBounds:bounds];
}
swift:
let leftView:UIView = UIView(frame: CGRectMake(0, 0, 30, 1))
leftView.backgroundColor = UIColor.clearColor()
my_text_field.leftView = leftView;
my_text_field.leftViewMode = UITextFieldViewMode.Always;

How to add label above UIProgressView in UIToolbar?

I have a UIToolbar in which I have placed a UIProgressView successfully. However, I have seen some apps contain a small label above the UIProgressView which tells the user what the program is doing where progress is being made -- e.g. to download a file. However it seems that this cannot be done in UI Builder. Any ideas on the best way to add the label ablve the UIProgressView in the toolbar? Here is what I am interested in:
+------------------------------------------------+
| Uploading File |
| ================-------------------- [CANCEL] |
+------------------------------------------------+
Make a custom UIView that contains a UILabel and UIProgressView as subviews. You then insert the custom UIView into the toolbar.
You can actually also add text directly to a UIProgressView as a subview, ex:
UIProgressView *videoProgressView = [[UIProgressView alloc] initWithFrame:CGRectMake(40, self.view.frame.size.height/2, self.view.frame.size.width - 80, 40)];
UILabel *processing = [[UILabel alloc] initWithFrame:CGRectMake(0, -50, videoProgressView.frame.size.width, 25)];
processing.text = #"Processing Video...";
processing.textAlignment = NSTextAlignmentCenter;
[videoProgressView addSubview:processing];
[self.view addSubview:videoProgressView];
Just make sure UIProgressView's clipsToBounds property is set to NO.
Here's a Swift 5 implementation of Lyndsey Scott's answer used in my project:
let view = UIApplication.topViewController()!.view!
let progressView = UIProgressView(progressViewStyle: .default)
progressView.center = view.center
progressView.trackTintColor = .gray
progressView.frame = CGRect(x: 40, y: view.frame.size.height / 2, width: view.frame.size.width - 80, height: 40)
let progressViewLabel = UILabel(frame: CGRect(x: 0, y: -50, width: progressView.frame.size.width, height: 25))
progressViewLabel.text = "Migrating database:"
progressViewLabel.textAlignment = .center
progressView.addSubview(progressViewLabel)
view.addSubview(progressView)

UIButton title and image alignment query

I have a UIButton and I am trying to set a title and an image on it.
I would like to align the title for a UIButton to the left side and place an image aligned to the right. I am trying to get the look and feel of the button in Timer in Clocks app (the one which says "When Timer Ends").
I fiddled with contentHorizontalAlignment, contentEdgeInsets, titleEdgeInsets and imageEdgeInsets to achieve my goal, but to no avail. The documentation is also quite sparse for the same.
How can I achieve the same?
Also related questions, Timer in Clocks app has two set of Text, one aligned to the left and other aligned right with the image? How can that be done in a UIButton? ( I do not need that functionality though at the moment).
Here is the code I use for that:
//Right-align the button image
CGSize size = [[myButton titleForState:UIControlStateNormal] sizeWithFont:myButton.titleLabel.font];
[myButton setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -size.width)];
[myButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, myButton.imageView.image.size.width + 5)];
Change the imageEdgeInsets property on the UIButton and then just use setImage:forState:
The following code works:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = buttonRect;
[button setTitle:#"A title" forState:UIControlStateNormal];
[button setImage:buttonImage forState:UIControlStateNormal];
button.imageEdgeInsets = UIEdgeInsetsMake(0.0, WIDTH(button.titleLabel) + 10.0, 0.0, 0.0);
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
Remember that UIButton inherits from UIView, and so you can add subviews to it just like any other view. In your situation, you would create a button, then add a UILabel on the left side and a UIImage on the right:
// Create the button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
// Now load the image and create the image view
UIImage *image = [UIImage imageNamed:#"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(/*frame*/)];
[imageView setImage:image];
// Create the label and set its text
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(/*frame*/)];
[label setText:#"Your title"];
// Put it all together
[button addSubview:label];
[button addSubview:imageView];
You can also override the titleRectForContentRect: and imageRectForContentRect: methods of the UIButton in order position your text and image anywhere you want.
In Swift for anyone that cares (with a 10pt spacing):
let size = (self.titleForState(UIControlState.Normal)! as NSString).sizeWithAttributes([NSFontAttributeName:self.titleLabel!.font])
let offset = (size.width + 10)
self.imageEdgeInsets = UIEdgeInsetsMake(0, offset, 0, -offset)
self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, self.imageView!.frame.size.width + 10)
For using on iOS 9, i tried many answers in this thread but none of them suitable for me. I found answer for myself as follow:
class MyButton: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left
if self.imageView?.image != nil {
// Move icon to right side
self.imageEdgeInsets = UIEdgeInsets(
top: 0,
left: self.bounds.size.width - self.imageView!.image!.size.width,
bottom: 0,
right: 0)
// Move title to left side
self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)
}
}
}
SWIFT 3:
class MyButton: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.left
if self.imageView?.image != nil {
// Move icon to right side
self.imageEdgeInsets = UIEdgeInsets(
top: 0,
left: self.bounds.size.width - self.imageView!.image!.size.width,
bottom: 0,
right: 0)
// Move title to left side
self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)
}
}
}
I hope it will help somebody in the case as me!
Here's a subclass of UIButton in Swift that aligns the image on the left and the text in the centre. Set imageLeftInset to your desired value.
class LeftImageAlignedButton : UIButton {
var imageLeftInset : CGFloat = 10.0
override func layoutSubviews() {
super.layoutSubviews()
self.contentHorizontalAlignment = .Left
if let font = titleLabel?.font {
let textWidth = ((titleForState(state) ?? "") as NSString).sizeWithAttributes([NSFontAttributeName:font]).width
let imageWidth = imageForState(state)?.size.width ?? 0.0
imageEdgeInsets = UIEdgeInsets(top: 0, left: imageLeftInset, bottom: 0, right: 0)
titleEdgeInsets = UIEdgeInsets(top: 0, left: bounds.width/2 - textWidth/2.0 - imageWidth, bottom: 0, right: 0)
}
}
}
Create a UIButton subclass and override its layoutSubviews method to align your text & image programmatically. Or use something like https://github.com/stevestreza/BlockKit/blob/master/Source/UIView-BKAdditions.h so you can implement layoutSubviews using a block.