Ios 约束问题：sizeToFit不'；行不通

我对iOS开发非常陌生，我开始使用自动布局和约束。我来自网页设计，所以有些行为让我很困惑。我试图做一个垂直菜单，占据所有页面（以X和Y为中心）。 我已经为这个菜单定制了一个类。目标是在我需要时轻松创建任何菜单，如下所示：

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

这段代码将创建并显示一个占据所有窗口的大菜单（后面有一个黑色的0.5不透明度布局）。以下是我想要创建的基本内容：

菜单图示（图像）：

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

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

下面是创建stackview并向其中添加菜单按钮的代码：

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)

}

这是结果，完全不是我所期望的…： 结果1:

我发现这两个MenuButton实际上是重叠的（我不明白为什么）。然后，从逻辑上讲，我希望使MenuButton的维度至少能够包含它包含的所有子项。我在文档中找到了“magic”方法：.sizeToFit（）.但是，当我在MenuButton类中取消注释self.sizeToFit时，不会发生任何事情。没有紫色背景和红色边框（MenuButton样式） 因此，我的第一个问题是：我不明白为什么我调用self.sizeToFit（）时，菜单按钮的内容没有扩展到标签和图标之间的最大值。我想要的就像一个大的父div（相当于web）中的两个子div；在这里，父div将自动调整大小以完全适合其子div：

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

标签。。。

然后，我希望通过对MenuButton设置一个约束来解决这个问题：我在MenuButton类中取消了对宽度和高度的约束。结果如下：

带有按钮菜单上的约束的结果：

所以它稍微好一点，但我有一个问题：为什么我的菜单按钮X从标签开始而不是从图标开始。为什么它没有将所有的子项都包含在其中？为什么只有标签而不仅仅是图标或两者（我想要的）

我还有第三个问题，是否每次创建子项时都必须编写详细的“

.translatesAutoresizingMaskIntoConstraints=false

”以使用自动布局

---

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

自动布局约束背后的理论

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

例如：

x=50，
y=50，
宽度=z-（x+x）
高度=a-（y+y）

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

---

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

自动布局约束背后的理论

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

例如：

x=50，
y=50，
宽度=z-（x+x）
高度=a-（y+y）

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

---

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

学习故事板。您的生活会轻松得多。学习故事板。您的生活会轻松得多。