以编程方式带边距的 UITextField 自动布局答案

【问题标题】：UITextField autolayout with margins programmatically以编程方式带边距的 UITextField 自动布局
【发布时间】：2016-05-29 03:56:43
【问题描述】：

我是 AutoLayout 的新手，我想以 100% 的宽度显示我的 UITextField，左右边距一致为 15px，如下所示：

通常我会使用 CGRect 执行此操作，将宽度设置为包含视图的宽度 - 30px，然后将左侧偏移 15px：

searchTextField.frame = CGRectMake(15, 0, view.frame.width - 30, 50)

但我想为这类事情学习 AutoLayout，因为这是这些天要走的路。我应该注意我正在以编程方式做所有事情——这里没有故事板。

如果有人可以帮助我，我会很高兴的！

更新

哇！谢谢大家的回复。我相信他们所有人都会实现我想要做的，但只有一个:)

【问题讨论】：

标签： ios swift autolayout uitextfield cgrect

【解决方案1】：

通常我用于处理约束的 cocoapod，但如果您需要纯苹果解决方案文档说明：

在以编程方式创建时，您有三种选择约束：可以使用布局锚点，可以使用 NSLayoutConstraint 类，也可以使用可视化格式语言。

在您的情况下使用 NSLayoutConstraints 的方法是：

NSLayoutConstraint(item: textField, attribute: .Leading, relatedBy: .Equal, toItem: parentView, attribute: .LeadingMargin, multiplier: 1.0, constant: 15.0).active = true

NSLayoutConstraint(item: textField, attribute: .Trailing, relatedBy: .Equal, toItem: parentView, attribute: .TrailingMargin, multiplier: 1.0, constant: -15.0).active = true

NSLayoutConstraint(item: textField, attribute: .Top, relatedBy: .Equal, toItem: parentView, attribute: .TopMargin, multiplier: 1.0, constant: 50.0).active = true

请记住，如果您在视图中没有任何约束，它们将被自动添加，您必须处理它们以及通过在运行时添加新约束而产生的冲突。为避免这种情况，您可以手动创建 textField 并将其添加到视图中，或者在 Interface Builder 中设置低优先级的约束。

【讨论】：

【解决方案2】：

假设文本字段的父级是view，在view.addSubview(searchTextField)之后执行此操作：

NSLayoutConstraint.activateConstraints([
    searchTextField.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 15),
    searchTextField.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor, constant: -15),
    ])

【讨论】：

喜欢activateConstraints:

【解决方案3】：

使用此代码：

let topConstraint = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Top, relatedBy: .Equal, toItem: self.view, attribute: NSLayoutAttribute.Top, multiplier: 1.0, constant: 0)

let trailingConstraint  = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Trailing, relatedBy: .Equal, toItem: self.view, attribute: NSLayoutAttribute.Trailing, multiplier: 1.0, constant: 15)

let leadingConstraint = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Leading, relatedBy: .Equal, toItem: self.view, attribute: NSLayoutAttribute.Leading, multiplier: 1.0, constant: 15)

let heightConstraint = NSLayoutConstraint(item: textField, attribute: NSLayoutAttribute.Height, relatedBy: .Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 50)

self.view.addConstraint(topConstraint )
self.view.addConstraint(trailingConstraint)
self.view.addConstraint(leadingConstraint)
self.view.addConstraint(heightConstraint)

【讨论】：

【解决方案4】：

在情节提要中设置约束。

单击文本字段，然后单击左下角的。从那里你可以选择这样的约束。

【讨论】：

我的错——我应该明确指出我正在尝试在不使用情节提要的情况下做到这一点。到目前为止，一切都是通过代码完成的。
嗯，这当然不是“要走的路”。但是，如果必须在代码中完成，那么您需要创建 NSLayoutConstraint 对象并将其添加到父视图（如果它们处理视图之间的间距）或文本字段本身（如果它指定高度或宽度）。

【解决方案5】：

要使用自动布局，您需要为您的文本字段定义约束。这里，我创建了与其父视图相关的四个约束（前导、尾随、顶部和高度）。

func addLabelConstraints(superView:UIView) {

    let leading = NSLayoutConstraint(item: searchTextField, attribute: .Leading, relatedBy: .Equal, toItem: superView, attribute: .Leading, multiplier: 1, constant: 15)
    superview!.addConstraint(leading)

    let trailing = NSLayoutConstraint(item: searchTextField, attribute: .Trailing, relatedBy: .Equal, toItem: superView, attribute: .Trailing, multiplier: 1, constant: 15)
    superView.addConstraint(trailing)

    let top = NSLayoutConstraint(item: searchTextField, attribute: .Top, relatedBy: .Equal, toItem: superView, attribute: .Top, multiplier: 1, constant: 0)
    superView.addConstraint(top)

    let height = NSLayoutConstraint(item: searchTextField, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 0, constant: 50)
    superView.addConstraint(height)
 }

【讨论】：