我有一个水平堆栈视图,有3个按钮:向后,播放,转发音乐应用程序。这是我目前的代码:
self.controlStackView.axis = .horizontal
self.controlStackView.distribution = .equalSpacing
self.controlStackView.alignment = .center
self.controlStackView.spacing = 10.0
self.controlStackView.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(self.controlStackView)
self.controlStackView.topAnchor.constraint(equalTo: self.artworkImageView.bottomAnchor, constant: 10.0).isActive = true
self.controlStackView.centerXAnchor.constraint(equalTo: self.contentView.centerXAnchor).isActive = true
这是什么它按如下方式分配按钮(由于对齐而从中心分配):
[backward] - 10 spacing - [play] - 10 spacing - [forward]
我可以增加间距,但它仍然是固定的。所以我设置前导和尾随锚来定义堆栈视图的最大宽度:
self.controlStackView.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
self.controlStackView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
这对布局有什么作用:
[left edge backward] - lots of spaaaaaaace - [centered play] - lots of spaaaaaaace - [right edge forward]
它分布在整个宽度上(左右中心之间有一个.equalSpacing)。但这也没有用。基本上我的目标是拥有真正相等的间距,包括边缘。
假设我的可用宽度为100,而我的3个按钮分别为10,20,10 - 这意味着剩下的空间有60个空。
我希望它像这样分发:
space - [backward] - space - [play] - space [forward] - space
因此,在我的按钮之间有4个空格,每个空间为15,因此我们填充剩下的60个空间。我当然可以在堆栈视图中实现填充以获取外部空间,但这将是非常静态的并且不是均匀分布的。
有没有人知道我是否可以通过这种方式实现它,使边缘包含在空间分布中?
谢谢
这非常简单,使用“spacer”视图。
添加一个间隔比按钮数量多,所以你有:
spacer - button - spacer - button - spacer
然后,将间隔物2到n的宽度限制为等于第一间隔物的宽度。 stackView将处理其余的!
这是一个例子(只需要在storyboard中使用viewController,其余部分通过代码完成):
class DistributeViewController: UIViewController {
let stackView: UIStackView = {
let v = UIStackView()
v.translatesAutoresizingMaskIntoConstraints = false
v.axis = .horizontal
v.alignment = .fill
v.distribution = .fill
v.spacing = 0
return v
}()
var buttonTitles = [
"Backward",
"Play",
"Forward",
// "Next",
]
var numButtons = 0
override func viewDidLoad() {
super.viewDidLoad()
// stackView will hold the buttons and spacers
view.addSubview(stackView)
// constrain it to Top + 20, Leading and Trailing == 0, height will be controlled by button height
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20.0),
stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0.0),
stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0.0),
])
// arrays to hold our buttons and spacers
var buttons: [UIView] = [UIView]()
var spacers: [UIView] = [UIView]()
numButtons = buttonTitles.count
// create the buttons and append them to our buttons array
for i in 0..<numButtons {
let b = UIButton()
b.translatesAutoresizingMaskIntoConstraints = false
b.backgroundColor = .blue
b.setTitle(buttonTitles[i], for: .normal)
buttons.append(b)
}
// create the spacer views and append them to our spacers array
// we need 1 more spacer than buttons
for _ in 1...numButtons+1 {
let v = UIView()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .red // just so we can see them... use .clear for production
spacers.append(v)
}
// addd spacers and buttons to stackView
for i in 0..<spacers.count {
stackView.addArrangedSubview(spacers[i])
// one fewer buttons than spacers, so don't go out-of-range
if i < buttons.count {
stackView.addArrangedSubview(buttons[i])
}
if i > 0 {
// constrain spacer widths to first spacer's width (this will make them all equal)
spacers[i].widthAnchor.constraint(equalTo: spacers[0].widthAnchor, multiplier: 1.0).isActive = true
// if you want the buttons to be equal widths, uncomment this block
/*
if i < buttons.count {
buttons[i].widthAnchor.constraint(equalTo: buttons[0].widthAnchor, multiplier: 1.0).isActive = true
}
*/
}
}
}
}
结果有3个按钮:
并有4个按钮:
和一对等宽按钮: