senty senty - 6 months ago 75
Swift Question

Auto-Stretching UITextField on typing

I have a

UITextField
that I created programatically. I want to have uneditable prefixed characters on the beginning and end, such as

"Hello [TextField] world".


First, I tried adding characters manually and with using
shouldChangeCharactersInRange
make but this approach won't work because if the user long press on the TextField and come to beginning, he can edit the first characters (so can mess the prefixed characters). This option didn't seem so convenient.




Another option could be creating an empty
UITextField
, and 2 static
UILabels
(for "Hello" and "world"). Here, another problem arises. As my
UITextField
's text is center aligned (and vertically centered in the view), I was giving it a width of the view and 0 for x-axis (so textField touches both left and right edges of the view). Instead, if I try to give the TextField a fixed width while creating, the width doesn't expand/stretch as user types in.

What I want to achieve is starting width of TextField from 0, and having static
UILabel
s on each sides like
"hello "[textField]" world"
; as user types in, increasing/stretching the textField's width to both left and right (as it's textaligned center). And as the textField's width stretches, push
UILabel
's towards the edge.. So:

| ["Hello "][textField][" world"] |

| ["Hello "][MyTextFieldTextIsNice][" world"] |


What is the proper way of achieving it without using Storyboard and programatically instantiating
UITextField
and
UILabel
s? How can I create auto-resizing textField as user types in that pushes the UILabels on the sides?

Answer

I use this kind of situation,Using Storyboard and both side of UITextField use UILabel with center alignment.

Below is the screenshot of storyboard.

enter image description here

Then I am doing delegate of the UITextField and uses following code.

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

    NSString *strForWholeString = [NSString stringWithFormat:@"%@%@",textField.text,string];

    CGSize fontSize = [strForWholeString sizeWithAttributes:
                       @{NSFontAttributeName:
                             [UIFont fontWithName:@"Helvetica" size:14]}];



    if (self.textfieldLayoutWidthConstraint.constant >= 40) {
        self.textfieldLayoutWidthConstraint.constant = fontSize.width + 40 ;
        [self.view layoutIfNeeded];
        [self.view setNeedsUpdateConstraints];
    }

    return YES;
}

Swift Code

func textField(textField: UITextField!, shouldChangeCharactersInRange range: NSRange, replacementString string: String!) -> Bool {

        let strForWholeString = NSString(format:"%@%@", textField.text!,string) as String

        let fontSize: CGSize = strForWholeString.sizeWithAttributes([NSFontAttributeName: UIFont.systemFontOfSize(14.0)])

        if self.textfieldLayoutWidthConstraint?.constant >= 40 {
            self.textfieldLayoutWidthConstraint!.constant = fontSize.width + 40 ;
            self.view.layoutIfNeeded();
            self.view.setNeedsUpdateConstraints();
        }
        return true
    }

May this helps lot.

You can download the sample code from here - Objective c

You can download the sample code from here - Swift

Output

enter image description here

Comments