首页 > 解决方案 > Swift - 如何在水平 StackView 中设置可变数量按钮之间的间距?

问题描述

我使用的水平线UIStackView最多可以包含 3UIButton秒。(可能只是 1、可能是 2 或 3)

我想让它们居中,它们之间的空间相同,如下所示: 在此处输入图像描述

我似乎无法做到这一点......我已经尝试了 and 的所有组合DistributionAlignment但我无法做到正确。

这是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)
}

有任何想法吗?

标签: swiftautolayoutnslayoutconstraintuistackview

解决方案


尝试将您的 StackView 限制为仅使 x 和 y 居中(不限制它的前导和尾随锚点):

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

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

stackView.spacing = // 16px

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


推荐阅读