如何在UIStackView中平均分隔标签?

时间:2018-11-25 01:12:39

标签: ios swift uitableview uikit uistackview

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

很明显,我知道这是一份工作评估,但是无论我是否找到工作,或者我是否能够及时完成评估,我都认为这是一个有趣的问题,我想了解如何执行此操作,因此,我将完成此应用程序以在模拟器或自己的手机上运行。

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

我尝试了多种方法来显示2D字符网格,但是我认为最有前途的一种方法如下:

使用UITableView表示字符行。在每个表格视图单元格内,使用带有动态生成的UILabels集合的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)
    }
}

我的猜测是,由于标签在创建时没有可见的矩形,因此它们无法显示在任何地方。

在模拟器中运行时,结果视图是一个白框,覆盖了表视图的所有行,应填充字符行,其余的表视图显示的是我正在使用的自定义背景色) ,如以下图片所示:

我要的是使该白色框具有与其他所有内容相同的背景色,并填充成行的字符。我想念什么?

Simulator Screenshot

1 个答案:

答案 0 :(得分:1)

问题可能与添加'labelRect'有关,您已经指定了stackView的rect。我认为,不管标签的框架如何,stackView都自然应该能够创建其内部标签并将其分发到其内部。

在初始化stackView之后,还可以在configureCell方法中添加以下内容:

self.stackView.axis = .horizontal

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