Question

我是iOS开发的新手，我开始使用自动布局和约束。我来自Web设计，因此某些行为令我感到困惑。我试图做一个垂直菜单，将所有页面（以X和Y为中心）。我已经为此菜单创建了一个自定义类。目的是在需要时轻松创建任何菜单，就像这样：

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

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

菜单说明（图片）：

我想以编程方式创建所有内容。因此，我首先创建了一个垂直的UIStackView，然后向其中添加了自定义UIView（我称为“菜单按钮”的自定义类。每个“ MenuButtom”在左侧都是一个图标，在右侧是一个标签。这是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")
}
}

以下是创建stackview并将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)

}

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

我发现两个MenuButton实际上重叠了（我不明白为什么）。然后，从逻辑上讲，我想确定MenuButton的尺寸，使其至少可以包装它包含的所有子级。我在文档中找到了“魔术”方法：.sizeToFit（）。但是，当我取消注释MenuButton类中的self.sizeToFit时，什么也没有发生。没有紫色背景，没有红色边框（MenuButton样式）因此，我的第一个问题是：我不明白为什么在我调用self.sizeToFit（）时，菜单按钮的内容不适合标签和包含的图标之间的最大值。我想要的就像一个大的父div中的两个孩子“ 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的快捷方式，（0,0），即x和y位于屏幕的左上角。在保持约束的同时，您必须小心，因为每个iPhone屏幕都有其自己的尺寸。为了满足这些需求，我们首先需要知道屏幕的尺寸，然后才能设置对齐方式。

例如：

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

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

在实际添加UIview然后设置约束的同时，不要忘记添加图像或任何可能的图像并为它们建立子关系。编码愉快！！！

约束问题：sizeToFit不起作用

1 个答案: