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

Question

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

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

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

但是我想为这类事情学习 AutoLayout，因为现在这是一种方式。我应该指出，我正在以编程方式执行所有操作——此处没有情节提要。

如果有人能帮助我，我会很高兴！

更新

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

Answer 1

在故事板中设置约束。

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

Answer 2

要使用自动布局，您需要为您的文本定义约束field.Here，我创建了与其父视图相关的四个约束（Leading、Trailing、Top 和 Height）。

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

Answer 3

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

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

Answer 4

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

You have three choices when it comes to programmatically creating constraints: You can use layout anchors, you can use the NSLayoutConstraint class, or you can use the Visual Format Language.

在您的案例中使用 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 中设置低优先级约束。

Answer 5

使用此代码：

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)

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

UITextField autolayout with margins programmatically

uitextfield

ios

cgrect

autolayout

swift