UIStackView 动态添加 2 个彼此相邻的标签，没有额外的间距

Posted 2023-02-27

【中文标题】UIStackView 动态添加 2 个彼此相邻的标签，没有额外的间距

【英文标题】：UIStackView dynamcially add 2 labels next to each other with no extra spacing

【发布时间】：2018-09-13 11:41:13

【问题描述】：

我是 ios 开发新手，对如何实现这一点有点困惑。

我有 2 个 UILabels 添加到 UIStackView 中，如下所示：

let horizontalStackView1 = UIStackView(arrangedSubviews: [self.label1, self.label2])

当我运行应用程序时，它看起来像这样：

但是，我希望标签彼此相邻，中间没有空格，如下所示：

我尝试设置horizontalStackView1.distribution、horizontalStackView1.alignment 等，但没有成功。

我如何做到这一点？

提前致谢！

更新：

代码看起来像这样（顺便说一下，它是表格的一个单元格）：

class ItemTableViewCell: UITableViewCell

    ...
    let stateLabel = UILabel()
    let effectiveDateLabel = UILabel()
    ...

    var typeImage: UIImage?
    
        ...
    

    var summary: String?
    
        ...
    

    var effectiveDate: Date?
    
        ...
    

    override init(style: UITableViewCellStyle, reuseIdentifier: String?)
    
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.accessoryType = .disclosureIndicator
        ...
        let horizontalStackView1 = UIStackView(arrangedSubviews: [self.stateLabel, self.effectiveDateLabel])
        let horizontalStackView2 = UIStackView(arrangedSubviews: [typeImageViewWrapper, self.titleLabel])
        horizontalStackView2.spacing = 4
        let verticalStackView = UIStackView(arrangedSubviews: [horizontalStackView1, horizontalStackView2, self.summaryLabel])
        verticalStackView.axis = .vertical
        verticalStackView.spacing = 4
        self.contentView.addSubview(verticalStackView)
        ...
    

    required init?(coder aDecoder: NSCoder)
    
        fatalError()
    

【问题讨论】：

这里绝对需要堆栈视图吗？

@inokey 不一定要配对，我只需要将视图水平添加到彼此旁边

如何添加 stackView 、 frame 或 autolayout 显示代码

当您需要分布式内容等时，堆栈非常好。但是当你只需要连续排列两个视图时，我会使用普通的自动布局。第一个标签导致超级视图领先，第二个标签导致第一个标签尾随。

@inokey 大声笑听起来不错，但对我来说都是胡言乱语，我来自 android 大声笑

【参考方案1】：

这是因为 UIStackView 选择了第一个具有最低内容拥抱优先级的排列子视图，并调整了它的大小，以便堆栈视图的内容占据整个宽度。

如果你想在这种情况下使用 UIStackView，你可以改变内容拥抱的优先级，例如。

label2.setContentHuggingPriority(.defaultLow, for: .horizontal)
label1.setContentHuggingPriority(.defaultHigh, for: .horizontal)

【讨论】：

这很接近，但现在它们就像彼此相邻，出于可读性原因，我确实希望在 2 个标签之间留一点空间

感谢我的伙伴，我刚刚为 UIStackView 添加了一些间距，一切都很好:)！

【参考方案2】：

stackviews 分布应设置为fillProportionally，以便每个排列的子视图保持其比例。

但是，剩余空间由 stackview 自动填充。为了抑制这种情况，您需要在最后添加一个空视图。这个空视图需要较低的内容拥抱优先级，以便它可以增长以按比例填充其他视图保留的空间。

此外，空视图需要一个 intrinsicContentSize 来让 stackview 计算尺寸：

class FillView: UIView 
    override var intrinsicContentSize: CGSize 
        get  return CGSize(width: 100, height: 100) 
    

现在设置您排列的子视图并将 fillView 放在最后

let fillView: UIFillView()
fillView.setContentHuggingPriority(priority: .fittingSizeLevel, for: .horizontal)
myStackView.addArrangedSubview(fillView)

将堆栈视图spacing 设置为您的需要，以保持子视图之间的距离。