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

Posted 2023-03-15

【中文标题】Swift：扩展 UIStackView 以创建居中的标签列表

【英文标题】：Swift: Extending UIStackView to create a centred list of tags

【发布时间】：2016-10-13 16:59:44

【问题描述】：

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

图片来源：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 才能看到它们中的任何一个。

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

【参考方案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

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

【讨论】：

嘿@Ben 您是否也设法让它垂直增长？因此，当标签到达屏幕末尾时，它们只会堆叠在下面

不幸的是，我不得不小心地限制单元格的长度和数量以适应屏幕的宽度。对不起！