Question

我试图在2个按钮之间放置2个按钮和1个行分隔符。这两个按钮和行位于一个名为＆＃34; customAlert＆＃34;的UIView中。这就是我希望它看起来像......

这是我尝试过的......

let boton1: UIButton = {
        let boton = UIButton(type: .system)
        boton.translatesAutoresizingMaskIntoConstraints = false
        boton.backgroundColor = .blue
        return boton
    }()

    let boton2: UIButton = {
        let boton = UIButton(type: .system)
        boton.backgroundColor = .yellow
        boton.translatesAutoresizingMaskIntoConstraints = false
        return boton
    }()

    let lineaSeparadora2: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .black
        return view
    }()

    customAlert.addSubview(boton1)
    customAlert.addSubview(boton2)
    customAlert.addSubview(lineaSeparadora2)

    boton1.topAnchor.constraint(equalTo: textfield1.bottomAnchor, constant: 4).isActive = true
    boton1.leftAnchor.constraint(equalTo: customAlert.leftAnchor, constant: 2).isActive = true
   // boton1.rightAnchor.constraint(equalTo: lineaSeparadora2.leftAnchor, constant: 0.5).isActive = true
    boton1.heightAnchor.constraint(equalToConstant: 50).isActive = true

    lineaSeparadora2.centerYAnchor.constraint(equalTo: textfield1.centerYAnchor, constant: 0).isActive = true
    lineaSeparadora2.leftAnchor.constraint(equalTo: customAlert.rightAnchor, constant: boton1.frame.size.width).isActive = true
    lineaSeparadora2.rightAnchor.constraint(equalTo: customAlert.leftAnchor, constant: boton2.frame.size.height).isActive = true
    lineaSeparadora2.bottomAnchor.constraint(equalTo: boton1.bottomAnchor, constant: 0)
    //lineaSeparadora2.widthAnchor.constraint(equalToConstant: 7).isActive = true

    boton2.topAnchor.constraint(equalTo: textfield1.bottomAnchor, constant: 4).isActive = true
    //boton2.leftAnchor.constraint(equalTo: lineaSeparadora2.rightAnchor, constant: 0.5).isActive = true
    boton2.rightAnchor.constraint(equalTo: customAlert.rightAnchor, constant: 2).isActive = true
    boton2.heightAnchor.constraint(equalToConstant: 50).isActive = true

感谢您的帮助!!!

Answer 1

您的主要问题是您不能将boton1.frame.size.width和boton2.frame.size.width用作constant作为约束，因为在您创建约束时，其值为{{1} }。

相反，我建议您设置约束以使0和boton1具有相等的宽度：

boton2

Answer 2

虽然还有其他方法可以绘制黑色分隔符，但目标看起来是（1）具有三个UIViews的水平布局，其中（2）视图＃1，＃2和＃3之间的间距相等（3））根据你的绘图，在视图＃3和尾随边距之间保持相同的间距。

此外，水平宽度在布局中是明确的。此外，垂直布局不是问题的一部分。

最简单的答案是使用layoutGuides，如this blog中所述。

我不是最好的视觉效果，但让我试试。从左到右水平，你想要：

前沿
Spacer 1
查看1（绿色）
Spacer 2
查看2（分隔符）
Spacer 3
查看3（蓝色）
Spacer 4

就“4个太空人”来说，是老派。相反，让我们谈谈“4 layoutGuides”。诀窍？导轨2,3和4的宽度相同 - 而导轨1就是它。（至少通过你的绘画。）

// create four layout guides

var spacers = [UILayoutGuide]()
for _ in 0...3 {
    spacers.append(UILayoutGuide())
}

// line up all views & spacers horizontally

spacer[0].leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
greenView.leadingAnchor.constraint(equalTo: spacer[0].trailingAnchor).isActive = true
spacer[1].leadingAnchor.constraint(equalTo: greenView.trailingAnchor).isActive = true
separatorView.leadingAnchor.constraint(equalTo: spacer[1].trailingAnchor).isActive = true
spacer[2].leadingAnchor.constraint(equalTo: separatorView.trailingAnchor).isActive = true
blueView.leadingAnchor.constraint(equalTo: spacer[2].trailingAnchor).isActive = true
spacer[3].leadingAnchor.constraint(equalTo: blueView.trailingAnchor).isActive = true
spacer[3].trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

// set the widths of the views, for instance:

greenView.widthAnchor.constraint(equalToConstant: 100).isActive = true
separatorView.widthAnchor.constraint(equalToConstant: 5).isActive = true
blueView.widthAnchor.constraint(equalToConstant: 100).isActive = true

// set the widths of spacers 2, 3, and 4 equal to each other

spacers[1].widthAnchor.constraint(equalTo: spacers[3].widthAnchor).isActive = true
spacers[2].widthAnchor.constraint(equalTo: spacers[3].widthAnchor).isActive = true

// since you probably want *something* for a left margin, set the left-most spacer to an explicit width

spacers[0].widthAnchor.constraint(equalToConstant: 10).isActive = true

这就是它。我忽略了任何垂直方向，只关注水平方向。关键是：

UILayoutGuides工作*就像UIView但没有开销。
设置前导/尾随布局后，定义宽度。（你可以得到幻想，也可以使用“大于或等于”和优先级。）
将4个垫片中的最后3个设置为宽度相等，但不设置显式宽度。
将最左侧的间隔（根据您的图纸）设置为具有比其他间隔更明确的宽度。

有一些布局的麻烦

2 个答案: