Swift：扩展 UIStackView 以创建居中的标签列表

Question

我想创建一个居中的标签列表，沿着这条线，但居中：

图片来源：http : //blog.gqueues.com/2013/07/android-vs-ios-comparing-development.html

我认为一个很好的方法是扩展UIStackView，这样我就可以有一个“addData”函数来完成创建视图并将其添加到堆栈的过程。这是到目前为止的代码：

导入基础导入 UIKit

class DataView: UIStackView {
    func addData(_ data: String) {
        let view = UIView()
        let label = UILabel()
        view.backgroundColor = UIColor.blue
        label.textColor = UIColor.white
        label.text = data
        label.sizeToFit()
        view.frame.size = label.frame.size
        view.addSubview(label)
        self.addArrangedSubview(view)
    }
}

不幸的是，这看起来不太对。我可以让堆栈视图显示项目的唯一方法是对宽度或左右设置约束以强制宽度。我还需要将 `Stack View 设置设置为 Alignment:Fill 和 Distribution:Fill Equally 以查看它们中的任何一个。

我的有人知道如何在这里获得更好的结果吗？

Answer 1

最后，解决这个问题的关键是指定每个视图的宽度并使用自动布局来使标签居中。最后，我需要计算总宽度，以便在UIStackView设置为分布：等间距的模式下，项目将被适当地间隔开。这是我的最终代码：

import Foundation
import UIKit

class DataView: UIStackView {
    var widthRequired = CGFloat()

    func addData(_ data: String) {
        let view = UIView()
        let label = UILabel()
        label.font = uifont_notification
        view.backgroundColor = uicolor_verylight
        label.textColor = uicolor_dark
        label.text = data
        label.textAlignment = .center
        label.sizeToFit()
        view.addSubview(label)
        widthRequired = label.frame.width + widthRequired + 24
        label.translatesAutoresizingMaskIntoConstraints = false
        view.translatesAutoresizingMaskIntoConstraints = false
        let labelView = ["label" : label]
        let formatString = "H:|-[label]-|"
        let formatStringV = "V:|-[label]-|"
        let outerView = ["view" : view]
        let formatStringW = "[view(==\(label.frame.width + 20))]"
        let constraintH = NSLayoutConstraint.constraints(withVisualFormat: formatString, options:.alignAllCenterX , metrics: nil, views: labelView)
        let constraintV = NSLayoutConstraint.constraints(withVisualFormat: formatStringV, options:.alignAllCenterX , metrics: nil, views: labelView)
        let constraintW = NSLayoutConstraint.constraints(withVisualFormat: formatStringW, options:.alignAllCenterX , metrics: nil, views: outerView)
        NSLayoutConstraint.activate(constraintH)
        NSLayoutConstraint.activate(constraintV)
        NSLayoutConstraint.activate(constraintW)
        view.layer.cornerRadius = 4
        self.addArrangedSubview(view)
        label.setNeedsLayout()
    }
}

像这样使用，在一个collectionView cellForItemAt函数中

cell.itemData.addData("One")
cell.itemData.addData("Two")
cell.itemData.addData("Three")
cell.itemDataWidth.constant = cell.itemData.widthRequired // The width of the `UIStackView` constraint as a @IBOutlet in the custom cell

希望能帮助某人。这是使用时最终图像的样子：