CODEWITHSUNDEEP
iosuitextfield
Rakesh
Rakesh

Reputation: 1187

Add UILabel as a constant field to left of UITextField

I am facing on problem, I want to have a static text in UITextField.

Text like "UserName:" should appear constantly to the left side of UITextField. Editing the UITextField should start from where the "UserName:" text ends.

For example, in iPhone settings, if we go to Twitter app and try to add new account. The way the user name and password textfield looks like. I want to develop same like that.

Upvotes: 2

Views: 2590

Answers (5)

Schrodingrrr
Schrodingrrr

Reputation: 4271

I don't understand why everyone has has posted such off the track answers to such a simple issue.

You simply do this:

  • Create a UILabel, with UI complimenting you textField.
  • You set it's text (Username:, etc).
  • Assign it to your textField's leftView property.

That's it. You will have to check frames, but that is basic, and I believe you can do that without much effort.

UPDATE: Sample code

enter image description here

enter image description here

enter image description here

UITextField* aField = [[UITextField alloc] initWithFrame:CGRectMake(20, 200, 300, 40)];    
aField.placeholder = @"Please enter a username";    
aField.layer.borderWidth = 1.0f;    
aField.backgroundColor = [UIColor whiteColor];    
aField.layer.borderColor = [UIColor lightGrayColor].CGColor;    
aField.layer.cornerRadius = 3.0f;    

UILabel* aLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 90, 38)];    
aLabel.text = @"Username:";    
aLabel.font = aField.font;    
aLabel.textColor = [UIColor grayColor];    

aField.leftView = aLabel;    
aField.leftViewMode = UITextFieldViewModeAlways;    

[self.view addSubview:aField];

Only needs minor adjustments.

Upvotes: 7

Deepak
Deepak

Reputation: 1441

Please try this code. I am sure this will help you.

UILabel *lblLeft = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 70, 30)];
lblLeft.backgroundColor = [UIColor clearColor];
lblLeft.text = @"Name: ";
lblLeft.textColor = [UIColor lightGrayColor];
lblLeft.font = [UIFont systemFontOfSize:14.0];

txtYourTextField.leftView = lblLeft;

Happy Coding :)

Deepak

Upvotes: 0

Amit Kalghatgi
Amit Kalghatgi

Reputation: 367

Below code may cater your need.

UIView *vis = [[UIView alloc]initWithFrame:CGRectMake(0, 200, 320, 50)];

UILabel *lblUserName = [[UILabel alloc]initWithFrame:CGRectMake(5, 5, 120, 40)];


UITextField *txtUserName =[[UITextField alloc]initWithFrame:CGRectMake(125, 5, 180, 40)];
lblUserName.text= @"User Name";
txtUserName.placeholder = @"@User Name";
[vis addSubview:lblUserName];
[vis addSubview:txtUserName];
[vis setBackgroundColor:[UIColor whiteColor]];
[self.view addSubview:vis];

Regards,

Amit

Upvotes: 0

Shamsudheen TK
Shamsudheen TK

Reputation: 31311

Try to use two text fields (one partially overlap with other) or Implement the below code.

-(void)viewDidAppear:(BOOL)animated{

   yourTextField.text = @"UserName:";
}

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {

      //handle back spaces and error conditions

      NSString *editedText = [textField.text stringByReplacingCharactersInRange:range withString:string];

      if([editedText isEqualToString: @"UserName"])
      {
        return NO;
      }
      else
      {
          yourTextField.text =  editedText;
          return YES;
       }
}

Upvotes: 0

Allan Macatingrao
Allan Macatingrao

Reputation: 2101

For quick solution, do that with two overlapping textfields like this:

enter image description here

Then change the textfield border style to No border style and disable the user interaction of the below textfield:

enter image description here

Upvotes: -2

Related Questions