Manage UITextField's dynamic position using auto layout

问题

My client’s requirement is as follows:

I am going to create registration form with around 15 textFields(Pre defined on server). Information of fields in registration fields are coming from server. There are chances that some fields are not required in some cases. So, I will get fields which are required for that particular case.

E.g. Suppose No. of predefined fields are 15 on server. i.e. FirstName, LastName, Phone no., Date of Birth, Picture, Email,Address,zipcode etc.

But there are chances that in some cases email id field is not required. so I will not get that field from server. So, application side I have to hide email textfield from predefined list of fields.

Also there are chances that multiple(any field) fields are not required. So I have to hide them too. I am trying to explain situation by image representation as follows.

Case 1:

Case 2:

In this case, what I am doing is(Application side) I create textFields for all predefined fields. then I am hiding textfield which is not required as per server response. i.e. email textfield or any other textField .

Now my question is, If any field is not required then the textfields should be repositioned and I am using auto layout in my application. I am hiding email textfield then How to set positions of next textfield like contact NO., Date of Birth etc.?

回答1:

Yes, this is perfectly possible with Auto Layout.

The most important thing here is:

You do not need to reposition it manually, this job will done by Auto layout.

You must do the following things:

Use UIScrollView and add all UITextField in that. So that content size and changing position will be easily managed. Here content size of scrollView is also managed by Auto layout, So don't do it manually.
Don't assign frame manually for UITextField. e.g. By using CGRect when creating textField.
Use VFL (Visual Formatting Language). This is a powerful auto layout language which can gives you power to dynamic changes on runtime using code.
Add constraints for all UITextFields and initially set hidden property to No/False. From your server response and query make them visible and update auto layout constraints by simply calling below methods.
```
// Change hidden property based on your response
// ........
// ........
// Below methods will update auto layout

[textField layoutIfNeeded];
[self.view layoutIfNeeded];
```
You can put these method in animation block for ample UI experience.

Note: Remember VFL is not an easy part you must have to take care when you are using it.

Adding sample code which can helps you (But it is in Swift convert it in Objective C), Also there may be a variation in parameters and values of VFL because this code was fit as per my requirement. Have a look and change it as per your need.

Create UIScrollView using VFL:

// Create scrollview to display content
self.scrollView = UIScrollView()
self.scrollView.delegate = self
self.scrollView.setTranslatesAutoresizingMaskIntoConstraints(false)
self.view.addSubview(self.scrollView)

// Visual formatting constraints of scrollview horizontal-vertical alignment with respect to view
self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options: NSLayoutFormatOptions(0), metrics: nil, views: ["scrollView" : scrollView]))

self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollView]|", options: NSLayoutFormatOptions(0), metrics: nil, views: ["scrollView" : scrollView]))

Add UITextField in UIScrollView:

func createRegistrationControls() {
    var previousTextField : UITextField! = nil

    // Remove all pervious views.
    for view in self.scrollView.subviews {
        view.removeFromSuperview()
    }

    for <YOUR NO OF TEXTFIELDS CONDITION> {
        let textField : UITextField! = UITextField()
        textField.borderStyle = UITextBorderStyle.RoundedRect
        textField.font = UIFont.systemFontOfSize(14)
        textField.clearButtonMode = UITextFieldViewMode.WhileEditing        
        textField.setTranslatesAutoresizingMaskIntoConstraints(false)
        textField.delegate = self
        self.scrollView.addSubview(textField)


        // Left constraint 
        self.scrollView.addConstraint(NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self.scrollView, attribute: NSLayoutAttribute.Left, multiplier: 1.0, constant: 10))

        // Right constraint 
        self.scrollView..addConstraint(NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: self.scrollView, attribute: NSLayoutAttribute.Right, multiplier: 1.0, constant: -10))

        // TOP Horizontal constraint
        let metrices = ["width" : self.view.bounds.width]            
        self.scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[textField(width)]", options: NSLayoutFormatOptions(0), metrics: metrices, views: ["textField" : textField]))

        if previousTextField == nil {
            // Top vertical constraint
            self.scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[textField]", options: NSLayoutFormatOptions(0), metrics: nil, views: ["textField" : textField]))
        } else {
            // Top constraint to previous view
            self.scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[previousTextField]-(10)-[textField]", options: NSLayoutFormatOptions(0), metrics: nil, views: ["textField" : textField, "previousTextField" : previousTextField]))
        }
        previousTextField = textField
    }

    if previousTextField != nil {
        // This below constraints will increase UIScrollView content size
        let constraint1 = NSLayoutConstraint.constraintsWithVisualFormat("H:[previousTextField]|", options: NSLayoutFormatOptions(0), metrics: nil, views: ["previousTextField" : previousTextField])
        self.scrollView.addConstraints(constraint1)

        let constraint2 = NSLayoutConstraint.constraintsWithVisualFormat("V:[previousTextField]|", options: NSLayoutFormatOptions(0), metrics: nil, views: ["previousTextField" : previousTextField])
        self.scrollView.addConstraints(constraint2)
    }

}