如何在 UIStackView 中等间距标签？

Posted 2023-03-04

【中文标题】如何在 UIStackView 中等间距标签？

【英文标题】：How to equally space labels in a UIStackView?

【发布时间】：2018-11-25 01:12:38

【问题描述】：

作为我正在面试的工作的技术评估，我正在制作一个基本的单词搜索游戏，用户可以在其中查找给定单词在给定语言中的翻译。我有相当多的 ios 经验，但我以前从未使用运行时确定的文本标签等动态生成视图。

说清楚，我知道这是一个工作评估，但无论我是否得到这份工作，或者我是否能够及时完成评估，我认为这是一个有趣的问题，我想学习如何做到这一点，所以我将把它作为一个在模拟器或我自己的手机上运行的应用程序来完成。

所以。我有一个嵌入/由 UINavigationController 控制的视图。我在顶部有几个信息标签，一组用于在视图底部执行操作的按钮，主视图区域需要包含一个 2D 字符网格。我希望能够在点击字符时采取行动，例如如果该字符是有效单词的一部分，则突出显示该字符。我希望能够支持不同大小的网格，所以我不能只在 Interface Builder 中创建一个自动布局约束的标签或按钮网格。

我尝试了各种显示二维字符网格的方法，但我认为最有希望的一种方法如下：

使用 UITableView 来表示字符行。在每个表格视图单元格中，使用带有动态生成的 UILabel 集合的 UIStackView。

要填充我的 UITableView，我有以下内容：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let cell = gameGrid.dequeueReusableCell(withIdentifier: "GameGridCell") as! TWSGameGridCell
    if indexPath.row < word.grid.count 
        cell.characters = word.grid[indexPath.row]
        cell.configureCell()
        return cell
    

    return cell

自定义表格单元格类中配置单元格（理想情况下用于创建和显示字符行）的函数是这样的：

func configureCell()

    self.stackView = UIStackView(arrangedSubviews: [UILabel]())
    self.stackView.backgroundColor = (UIApplication.shared.delegate as! TWSAppDelegate).appBackgroundColor()
    self.stackView.distribution = .fillEqually
    let myRect = self.frame
    self.stackView.frame = myRect
    let characterGridWidth = myRect.width / CGFloat(characters.count)
    for cIndex in 0..<characters.count 
        let labelRect = CGRect(x: myRect.origin.x + (CGFloat(cIndex) * characterGridWidth), y: myRect.origin.y, width: CGFloat(characterGridWidth), height: myRect.height)
        let currentLabel = UILabel(frame: labelRect)
        currentLabel.backgroundColor = (UIApplication.shared.delegate as! TWSAppDelegate).appBackgroundColor()
        currentLabel.textColor = (UIApplication.shared.delegate as! TWSAppDelegate).appTextColor()
        currentLabel.font = UIFont(name: "Palatino", size: 24)
        currentLabel.text = characters[cIndex]
        self.stackView.addArrangedSubview(currentLabel)
    

我的猜测是它遇到了麻烦，因为标签在创建时没有可见的矩形，因此它们不会显示在任何地方。

在模拟器中运行时生成的视图是一个白色框，它覆盖了表视图的尽可能多的行，应该用字符行填充，表视图的其余部分以我正在使用的自定义背景颜色显示） ，根据这张图片：

我正在尝试让那个白框与其他所有内容具有相同的背景颜色，并填充成行的字符。我错过了什么？

【问题讨论】：

我在 Interface Builder 的原型单元中拥有 UIStackView（水平视图）。但是当我尝试为其添加标签时，我发现它是零。但即使添加 self.stackView.axis = .horizontal 似乎也没有任何改变。

【参考方案1】：

问题可能与添加“labelRect”有关，您已经指定了 stackView 的矩形。我认为不管标签的框架如何，stackView 自然应该能够创建它的内部标签并将它们分布在自身内部。

您还可以在初始化 stackView 后，在您的 configureCell 方法中添加以下内容：

self.stackView.axis = .horizontal

编辑：从下面的评论中，解决方案是创建标签（尽管我切换到按钮以获得更多功能），将它们全部添加到 [UIButton]，然后使用它来创建 UIStackView (self.stackView = UIStackView(arrangedSubviews: buttons))。

【讨论】：

我在 Interface Builder 的原型表单元格中有 UIStackView（但没有标签），它的轴是水平列出的。但是，我发现当我将单元格出列以供重复使用时，堆栈视图为零。无论如何，添加self.stackView.axis = .horizontal 似乎并不能解决问题。

如果在 configureCell 方法中，您首先创建标签，然后将它们添加到数组中，例如： labelArray = [UILabel]() 然后创建 stackView，如下所示： self.stackView = UIStackView( mappedSubviews: labelArray) 通过这种方式，您也许可以创建一个 stackView，因为您已经在数组中拥有标签源并将其提供给 stackView 的构造函数。