首页 > 解决方案 > 带有两个标签的 StackView 不包装内容

问题描述

我有一个 StackView,里面有两个标签。我想将这两个标签并排放置。

private lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.alignment = .center
        stackView.axis = .horizontal
        stackView.backgroundColor = .black
        stackView.spacing = 10
        return stackView
    }()
    
    // MARK: Labels
    
    private lazy var firstLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.titleUltraHeavy, ofSize: 8.0)
        return label
    }()

    private lazy var secondLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.bodyExtraBold, ofSize: 10.0)
        return label
    }()
    
    // MARK: - Setup
    
    private func setupStackView() {
        stackView.addArrangedSubview(firstLabel)
        //firstLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
        //firstLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
        //firstLabel.setContentHuggingPriority(UILayoutPriority.defaultLow, for: .horizontal)
        stackView.addArrangedSubview(secondLabel)
        //secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
        //secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
        //secondLabel.setContentHuggingPriority(UILayoutPriority.defaultHigh, for: .horizontal)
        
        addSubview(stackView)
        stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    }

我的问题是:

在此处输入图像描述

我想要的是:

数字旁边的标签,还有一些用边距填充一些填充。

提前致谢。

编辑

设置spacing为 0numberOfLines到 1 后,stackView.alignment = .fill我得到了下面的结果。我只是想知道如何为标签添加填充?

在此处输入图像描述

标签: swiftlabeluistackview

解决方案


感谢@SandeepBhandari 和@DonMag 的评论,我可以解决我的问题:

最终的解决方案是:

private lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.alignment = .fill // << changed from .center to .fill
        stackView.axis = .horizontal
        stackView.backgroundColor = .black
        //stackView.spacing = 10  << removed line       
        return stackView
    }()
    
    // MARK: Labels
    
    private lazy var firstLabel: PaddingLabel = {
        let label = PaddingLabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1 // << changed from 0 to 1
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.titleUltraHeavy, ofSize: 8.0)
        return label
    }()

    private lazy var secondLabel: PaddingLabel = {
        let label = PaddingLabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1
        label.textColor = UIColor.brandColor(.white)
        label.textAlignment = .right
        label.font = UIFont.bloomSpeakFont(.bodyExtraBold, ofSize: 10.0)
        return label
    }()
    
    // MARK: - Setup
    
    private func setupStackView() {
        stackView.addArrangedSubview(firstLabel)
        stackView.addArrangedSubview(secondLabel)
        firstLabel.paddingLeft = 2
        firstLabel.paddingRight = 1
        secondLabel.paddingLeft = 1
        secondLabel.paddingRight = 2
        
        addSubview(stackView)
        stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    }

我还使用本指南https://johncodeos.com/how-to-add-padding-in-uilabel-in-ios-using-swift/为标签添加填充。

最终结果是:

在此处输入图像描述


推荐阅读