使用自动布局管理UITextField的动态位置 [英] Manage UITextField's dynamic position using auto layout

问题描述

我的客户的要求如下:

我将创建约15个textFields(在服务器上预定义)的注册表单.注册字段中的字段信息来自服务器.在某些情况下，有可能不需要某些字段.因此，我将获得该特定情况所需的字段.

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.

例如假设服务器上的预定义字段数为15.即名字，姓氏，电话号码，出生日期，图片，电子邮件，地址，邮政编码等.

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.

但是在某些情况下，有时可能不需要电子邮件ID字段.因此我不会从服务器获取该字段.因此，在应用程序端，我必须从预定义的字段列表中隐藏电子邮件文本字段.

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.

案例1:

案例2:

在这种情况下，我正在做的是(应用程序端)我为所有预定义字段创建textFields.然后我隐藏根据服务器响应不需要的文本字段.即电子邮件文本字段或任何其他文本字段.

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.?

推荐答案

是的，使用自动版式完全可以实现.

Yes, this is perfectly possible with Auto Layout.

您无需手动重新放置，此工作将通过自动布局完成.

您必须执行以下操作:

1. 使用UIScrollView并在其中添加所有UITextField.这样就可以轻松地管理内容的大小和位置的变化.在这里，scrollView的内容大小也由自动"布局管理，因此请不要手动进行.
2. 不要手动为UITextField分配框架.例如通过创建文本字段时使用CGRect.
3. 使用VFL(可视格式语言).这是一种功能强大的自动布局语言，可让您使用代码在运行时动态更改.

4. 为所有UITextFields添加约束，并最初将hidden属性设置为No/False.通过服务器响应和查询，使它们可见并只需调用以下方法即可更新自动布局约束.

1. 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.
2. Don't assign frame manually for UITextField. e.g. By using CGRect when creating textField.
3. Use VFL (Visual Formatting Language). This is a powerful auto layout language which can gives you power to dynamic changes on runtime using code.

4. 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];

您可以将这些方法放在动画块中，以提供充裕的UI体验.

You can put these method in animation block for ample UI experience.

注意:请记住，VFL并非易事，使用时必须要小心.

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

添加示例代码可以为您提供帮助(但是在Swift中是在Objective C中进行转换)，而且VFL的参数和值可能会有变化，因为该代码符合我的要求.看看并根据您的需要进行更改.

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.

使用VFL创建UIScrollView:

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]))

在UIScrollView中添加UITextField:

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)
    }

}

这篇关于使用自动布局管理UITextField的动态位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！