约束问题：sizeToFit 不起作用

Question

我是 iOS 开发的新手，我开始使用自动布局和约束。我来自网页设计，所以有些行为让我很困惑。我正在尝试做一个垂直菜单，占据所有页面（以 X 和 Y 为中心）。 我为这个菜单制作了一个自定义类。目标是在我需要时轻松创建任何菜单：

myMenu = MyMenu([
            MyMenu.ButtonInfo("Galerie","icon_gallery",onclick:{return}),
            MyMenu.ButtonInfo("Camera","icon_camera",onclick:{return})
]);
myMenu.show()

此代码将创建并显示一个占据所有窗口的大菜单（后面有一个黑色的 0.5-opacity 布局）。这基本上是我想要创建的：

菜单说明（图片）：

我想以编程方式创建所有内容。因此，我首先创建了一个垂直 UIStackView，并向其中添加了自定义 UIView（我称之为“菜单按钮”的自定义类。每个“菜单按钮”都是左侧的图标和右侧的标签。 这是MenuButton自定义视图的代码

class MenuButton: UIView {

var labelView = UILabel()
var iconView:UIImageView

public var title:String
public var icon:String
public var callback: ()->Void

init(_ title:String, _ icon:String,_ callback:@escaping ()->Void )
{
    self.title = title
    self.icon  = icon
    self.callback = callback

    self.iconView = UIImageView(image:UIImage(named: icon)!)

    super.init(frame: CGRect.zero)

    self.frame = CGRect.zero
    self.translatesAutoresizingMaskIntoConstraints = false
    self.layoutIfNeeded()

    self.addSubview(iconView)
    self.addSubview(labelView)

    iconView.translatesAutoresizingMaskIntoConstraints = false
    labelView.translatesAutoresizingMaskIntoConstraints = false
    labelView.backgroundColor = UIColor.green


    iconView.trailingAnchor.constraint(equalTo: labelView.leadingAnchor).isActive = true

    labelView.text = title
    labelView.textColor = UIColor.white

    self.backgroundColor = UIColor.purple

// self.heightAnchor.constraint(equalToConstant:50.0).isActive = true
// self.widthAnchor.constraint(equalToConstant:50.0).isActive = true

    self.layer.borderWidth = 1
    self.layer.borderColor = UIColor.red.cgColor

   // this changes nothing so i commented it .. 
   //self.sizeToFit()




}



required init(coder aDecoder: NSCoder) {
    fatalError("This class does not support NSCoding")
}
}

这是创建堆栈视图并将 MenuButtons 添加到其中的代码：

func show()
{
    win.addSubview(modalView)
    // code for the 0.5-opacity dark layout behind the menu : this works well 
    modalView.addGestureRecognizer(UITapGestureRecognizer(
        target:self,action : #selector(dismiss)
    ))
    self.modalView.alpha = 0
    UIView.animate(withDuration:0.2){
        self.modalView.alpha = 1
    }

    // i create the vertical stackview : 
    let parentButtons = UIStackView()
    parentButtons.translatesAutoresizingMaskIntoConstraints = false
    parentButtons.distribution = .fillEqually
    parentButtons.axis = .vertical
    parentButtons.alignment = .fill

    parentButtons.sizeToFit() // ***2*** doesnt work ...
    parentButtons.layoutIfNeeded() // ***3*** do we need to call this only once after creating the view or everytime we need it to update?

    win.addSubview(parentButtons)

    // center my uistackview in the middle of the screen
    parentButtons.centerYAnchor.constraint(equalTo: win.centerYAnchor).isActive = true
    parentButtons.centerXAnchor.constraint(equalTo: win.centerXAnchor).isActive = true


    var btn1 = MenuButton("camera", "icon_camera",{ return })
    var btn2 = MenuButton("gallery", "icon_gallery",{ return })

    parentButtons.addArrangedSubview(btn1)
    parentButtons.addArrangedSubview(btn2)

}

这是结果，完全不是我所期望的......： 结果一：

我发现这两个 MenuButton 实际上是重叠的（我不明白为什么）。然后，从逻辑上讲，我想让 MenuButton 的尺寸使其至少可以包装它包含的所有子元素。我在文档中找到了“魔术”方法：.sizeToFit()。但是，当我在 MenuButton 类中取消注释 self.sizeToFit 时，什么也没有发生。没有紫色背景和红色边框（MenuButton 样式） 所以我的第一个问题是：我不明白为什么当我调用 self.sizeToFit() 时，我的菜单按钮的内容不适合标签和它包含的图标之间的最大值。我想要的就像一个大父 div 中的 2 个孩子“div”（相当于网络）；在这里，父级将自动调整大小以完全适合其子级：

<div class="menuButtonEquivalent">
   <div class="icon" style="float:left"><img ... /></div>
   <div class="label"> label ... </div>
</div>

然后，无论如何，我想尝试通过为 MenuButton 设置约束来解决问题：我取消注释 MenuButton 类中宽度和高度的约束。结果如下：

ButtonMenu 约束的结果：

所以稍微好一点，但我在这里有一个问题：为什么我的 MenuButton X 从标签而不是图标开始。为什么它不把所有的孩子都包在里面？为什么只有标签而不是图标或两者（我想要的）。

我还有第三个问题，每次创建孩子时都必须写详细的“.translatesAutoresizingMaskIntoConstraints = false”以使用自动布局吗？

我尝试以编程方式完成所有操作，而不是使用 nib 编辑器（在使用任何更高级别的工具之前，我想确切地知道一切是如何工作的）。

Answer 1

自动布局约束背后的理论

根据 iOS swift (0,0)，即 x 和 y 位于屏幕的左上角。在保持约束的同时，您必须小心，因为每个 iphone 屏幕都有自己的尺寸。为了满足这些需求，首先我们需要知道屏幕的尺寸，并在此基础上设置对齐方式。

例如：

x=50, y=50, width=z-(x+x) height=a-(y+y)

a 是屏幕的高度，z 是屏幕的宽度

在实际添加 UIview 然后设置约束时，不要忘记添加您的图像或任何可能的内容并给它们一个子关系。编码愉快！！！！