如何使用自动布局在 Swift 中为可重用的 UIView 设置约束？

Posted 2023-03-15

【中文标题】如何使用自动布局在 Swift 中为可重用的 UIView 设置约束？

【英文标题】：How to set constraints for a reusable UIView in Swift with auto layout?

【发布时间】：2015-06-08 10:11:30

【问题描述】：

我正在尝试构建一个可重用的UIView，其宽度应等于其在 Swift 中的父视图。

由于其父视图的大小不同，我想我必须通过自动布局为它设置约束。

但我不知道如何在 Swift 中以编程方式进行操作。

这是可重用子视图的代码：

import UIKit

class bottomMenu: UIView 

@IBOutlet var bottomMenu: UIView!


required init(coder aDecoder: NSCoder) 
    super.init(coder:aDecoder)
    NSBundle.mainBundle().loadNibNamed("bottomMenu", owner: self, options: nil)

    bottomMenu.backgroundColor = UIColor.redColor()

    //How to make the width of the bottom Menu equal to its superview?

    self.addSubview(self.bottomMenu)
    

谁能教我怎么做？

谢谢

【问题讨论】：

你有自定义 UI 的 xib 吗？

是的，我有一个 xib。我已经将宽度设置为 320px。所以当我在 iPhone 5 上运行它时它可以正常工作。但是当我将设备更改为 iPhone 6 时，它无法匹配屏幕的宽度。这就是为什么我希望它可以与自动布局一起使用。

【参考方案1】：

您可以在 UIView 子类中使用 override didMoveToSuperview() 方法并在其中添加约束：

    override func didMoveToSuperview() 
        super.didMoveToSuperview()

        backgroundColor = UIColor.redColor()

        let views = ["view" : self];
        self.setTranslatesAutoresizingMaskIntoConstraints(false)

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

【参考方案2】：

为里面的元素添加约束。为每个元素添加顶部、底部、左侧和右侧的约束。如果您有任何需要相同大小的图像，请添加宽度和高度。如果您可以发布 UIView 的屏幕截图，我将添加更多信息，并且能够提供更多帮助。

如果您不熟悉自动布局，还可以查看http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1。

【参考方案3】：

以下代码为加载的视图提供了与超级视图相同的高度和宽度。 （不知道你想要什么高度）

bottomMenu.setTranslatesAutoresizingMaskIntoConstraints(false)

//Views to add constraints to
let views = Dictionary(dictionaryLiteral: ("bottomMenu",bottomMenu))

// Horizontal constraints
let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[bottomMenu]|", options: nil, metrics: nil, views: views)
self.addConstraints(horizontalConstraints)

// Vertical constraints
let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[bottomMenu]|", options: nil, metrics: nil, views: views)
self.addConstraints(verticalConstraints)

【讨论】：

我从 self.view.addConstraints(verticalConstraints) 中删除了“视图”，它可以工作了！谢谢

哦，是的，很抱歉。我看到您是从 UIView 子类而不是 UIViewController 调用的。查看更新的答案。

谢谢！抱歉，我没有赢得足够的声誉来支持您的回答