带有自定义大小元素和中心项目的 UIStackView - Swift - 以编程方式

Question

我想在我的底部设置一个有 3 个视图的 UIStackView，以便中心视图位于中心，其他视图也相应调整，我还希望能够设置宽度和高度锚点对于所有 3 个视图。这是期望的结果：

这是我得到的：

这是我正在使用的代码：

bottomStackView = UIStackView(arrangedSubviews: [pickerView, downloadContentButton,  shareButton])
    bottomStackView.alignment = .center
    bottomStackView.distribution = .fill
    bottomStackView.axis = .horizontal
    bottomStackView.spacing = 5
    bottomStackView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bottomStackView)
    
    bottomStackView.anchor(top: nil, leading: view.leadingAnchor, bottom: view.safeAreaLayoutGuide.bottomAnchor, trailing: view.trailingAnchor)
    bottomStackView.heightAnchor.constraint(equalToConstant: 150).isActive = true
    bottomStackView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
    
    pickerView.heightAnchor.constraint(equalToConstant: 120).isActive = true
    shareButton.heightAnchor.constraint(equalToConstant: 150).isActive = true
    shareButton.widthAnchor.constraint(equalTo: pickerView.widthAnchor).isActive = true
    
    downloadContentButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
    downloadContentButton.widthAnchor.constraint(equalToConstant: 30).isActive = true
    
    shareButton.widthAnchor.constraint(equalToConstant: 80).isActive = true
    shareButton.heightAnchor.constraint(equalToConstant: 80).isActive = true

Answer 1

我想你是在追求这种东西：

或者，如果我们变宽：

如果是这个想法，那么一个关键错误就是当你说：

bottomStackView.distribution = .fill

你其实想要.equalDistribution。为了演示，我完全用代码创建了示例，因此您可以看到所有设置：

let sv = UIStackView()
sv.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(sv)
sv.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20).isActive = true
sv.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20).isActive = true
sv.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20).isActive = true
sv.heightAnchor.constraint(equalToConstant: 160).isActive = true

sv.distribution = .equalSpacing
sv.alignment = .center

let v1 = UIView()
v1.translatesAutoresizingMaskIntoConstraints = false
v1.widthAnchor.constraint(equalToConstant: 120).isActive = true
v1.heightAnchor.constraint(equalToConstant: 150).isActive = true
v1.backgroundColor = .red
sv.addArrangedSubview(v1)

let v2 = UIView()
v2.translatesAutoresizingMaskIntoConstraints = false
v2.widthAnchor.constraint(equalToConstant: 80).isActive = true
v2.heightAnchor.constraint(equalToConstant: 80).isActive = true
v2.backgroundColor = .yellow
sv.addArrangedSubview(v2)


let v3 = UIView()
v3.translatesAutoresizingMaskIntoConstraints = false
v3.widthAnchor.constraint(equalToConstant: 120).isActive = true
v3.heightAnchor.constraint(equalToConstant: 150).isActive = true
v3.backgroundColor = .blue
sv.addArrangedSubview(v3)

带有自定义大小元素和中心项目的 UIStackView - Swift - 以编程方式

UIStackView with custom size elements and item in the center - Swift - Programmatically

swift

uistackview

programmatically