在堆栈视图中创建UILabel互相拥抱

Posted 2021-03-30

我正在我的应用程序中制作促销页面，以使用户想要购买应用程序的PRO版本。

我正在使用堆栈视图进行布局，我正在努力使项目间隔得很好，这是我已经实现的。唯一的问题是，我想要它，以便该功能的标题与UILabel容器的底部对齐，并且该功能的描述与UILabel容器的顶部对齐。

目前看起来的片段：

每个函数及其标题都在具有相等间距的堆栈视图中。正如你所看到的，每个UILabel的帧是相等的，我目前无法看到停止文本始终垂直居中。

谁能告诉我如何让每个功能和功能描述更多地相互拥抱？

（例如，在这张照片中，无广告会更低，而且没有更多的广告会更高，今天的小部件会更低，轻松启动计时器会更高。）

答案

您没有发布任何代码，但UIStackViewDistribution可能是您的问题所在。在所有情况下，视图都填充堆栈。如果您希望项目更靠近，则调整堆栈大小以适合其内容。

这是一些显示对齐和分布的示例代码：

@IBOutlet weak var stack: UIStackView!
override func viewDidLoad() {
    super.viewDidLoad()

    stack.axis = .vertical
    stack.distribution = .equalSpacing
    stack.alignment = .fill
    stack.spacing = 0

    let rndColors = [ UIColor.red, UIColor.blue, UIColor.yellow, UIColor.brown, UIColor.orange, UIColor.green ]

    for i in 1...24 {
        let one = UILabel()
        one.backgroundColor = rndColors[i % rndColors.count]
        let desiredSize = CGSize(width: stack.frame.width, height: stack.frame.height)
        let point = CGPoint(x: 0, y: 0)
        let desiredRect = CGRect(origin: point, size: desiredSize)
        one.frame = desiredRect
        let text = "No Ads (i)"
        let myAttribute = [ NSAttributedStringKey.font: UIFont(name: "Chalkduster", size: (CGFloat(i + 10)))! ]
        one.attributedText = NSAttributedString(string: text, attributes: myAttribute)

        stack.addArrangedSubview(one)
    } 
}

最终结果如下：

如果更改spacing，alignment和distribution的值，则可能会影响它们堆叠的紧密程度。