Question: How to increase width of textfield according to typed text?

Question

How to increase width of textfield according to typed text?

Answers 3
Added at 2017-01-03 06:01
Tags
Question

I need to increase a text field's width according to its content. When the user inputs text, then the textfield size should increase automatically. I have one close (X) button next to this text field.

I have constrained the text field and button so that the text field is centered on screen, and the button is adjacent to it. (Text field should be editable, button should be clickable)

Text field size is this:

enter image description here

When I enter text in it, the size should automatically increase:

enter image description here

How can I achieve this?

Answers
nr: #1 dodano: 2017-01-03 06:01

A cheeky workaround to get width for a particular string would be

func getWidth(text: String) -> CGFloat {
    let txtField = UITextField(frame: .zero)
    txtField.text = text
    txtField.sizeToFit()
    return txtField.frame.size.width
}

And to get the width,

let width = getWidth(text: "Hello world")
txtField.frame.size.width = width
self.view.layoutIfNeeded() // if you use Auto layout

If you have a constraint linked to txtField's width then do

yourTxtFieldWidthConstraint.constant = width
self.view.layoutIfNeeded() // if you use Auto layout

Edit We are creating a UITextField with a frame of basically all zeros. When you call sizeToFit(), it will set the frame of UITextField in a way that it will show all of its content with literally no extra spaces around it. We only wanted its width, so I returned the width of the newly created UITextField. ARC will take care of removing it from memory for us.

Update

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

        if textField.text != nil {
            let text = textField.text! as NSString
            let finalString = text.replacingCharacters(in: range, with: string)
            textField.frame.size.width = getWidth(text: finalString)
        }

        return true
    }
nr: #2 dodano: 2017-01-03 06:01

Implement following method of UITextFieldDelegate. Use approach provided by Matt to get required width of textField. In auto layout make sure you have centre and width constraints set for textfield. Create IBOutlet for your width constraint in code file. Also make sure you set delegate property of your textField

@IBOutlet weak var widthConstraint: NSLayoutConstraint!

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
     let width = getWidth(text : textField.text)
     if width > widthConstraint.constant {
         widthConstraint.constant = width
     }
     self.layoutIfNeeded() 
     return true
}
nr: #3 dodano: 2017-01-05 08:01

I solve my problem : use this for textfield not go outside of screen.

 func getWidth(text: String) -> CGFloat
{
    let txtField = UITextField(frame: .zero)
    txtField.text = text
    txtField.sizeToFit()
    return txtField.frame.size.width
}

func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool
{
    let width = getWidth(textField.text!)
    if UIScreen.mainScreen().bounds.width - 55 > width
    {
        txtWidthOfName.constant = 0.0
        if width > txtWidthOfName.constant
        {
            txtWidthOfName.constant = width
        }
        self.view.layoutIfNeeded()
    }
    return true
}
Source Show
◀ Wstecz