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 相同，以便查看其中任何一个。

我的有人知道我怎样才能在这里获得更好的结果吗？

Answer 1

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

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

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

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

Swift: Extending UIStackView to create a centred list of tags

ios

autolayout

swift

uistackview