Swift - 如何在水平 StackView 中设置可变数量按钮之间的间距？

Posted 2023-02-23

【中文标题】Swift - 如何在水平 StackView 中设置可变数量按钮之间的间距？

【英文标题】：Swift - How to set spacing between variable number of buttons in Horizontal StackView?

【发布时间】：2020-11-09 23:45:52

【问题描述】：

我正在使用一个水平的UIStackView，它最多可以包含 3 个UIButtons。 （可能只有 1、可能是 2 或 3）

我想让它们居中，它们之间的空间相同，如下所示：

我似乎无法做到这一点...我已经尝试了 Distribution 和 Alignment 的所有组合，但我无法做到。

这是stackView 的约束：

fileprivate func setupStackViewConstraints() 
    stackView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
        stackView.topAnchor.constraint(equalToConstant: 60),
        stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
        stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
    ])

这是按钮的约束：

fileprivate func setupFacebookButton() 
    let facebookButton = UIButton()
    
    facebookButton.setImage(UIImage(named: "facebookSocialIcon"), for: .normal)
    facebookButton.imageView?.contentMode = .scaleAspectFit
    facebookButton.addTarget(self, action: #selector(facebookButtonWasTapped), for: .touchUpInside)
    
    // -----------------------------------
    
    facebookButton.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
        facebookButton.widthAnchor.constraint(equalToConstant: 40),
        facebookButton.heightAnchor.constraint(equalToConstant: 40)
    ])
    
    // -----------------------------------
    
    stackView.addArrangedSubview(facebookButton)

有什么想法吗？

【参考方案1】：

这里的分布和对齐是显而易见的。你想要“等间距”和“中心”。您还应该设置一个合适的spacing。

“难点”是如何让排列好的视图在中间水平对齐，因为alignment 属性只是垂直于axis 对齐。

关键是让stack view有一个灵活的宽度，并在中心水平对齐it。这意味着删除前导和尾随约束，并添加中心 X 约束。

因此，这些是堆栈视图的约束：

NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalToConstant: 60),
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
])

请注意，堆栈视图将扩展其宽度以适应其中所有排列的子视图。这意味着如果您有太多排列的子视图，其中一些可能会离开屏幕。如果您希望它们“换行”到下一行，请考虑改用 UICollectionView :)

【参考方案2】：

尝试将您的 StackView 仅限制在 x 和 y 的中心（不限制它的前导和尾随锚点）：

NSLayoutConstraint.activate([
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

然后您可以将分布值保留为默认值，并将间距值设置为您想要的值：

stackView.spacing = // 16px

这样 StackView 的宽度将等于内容的宽度。