如何在 UIStackView 中平等 space 标签?
How to equally space labels in a UIStackView?
作为对我正在面试的工作的技术评估,我正在制作一个基本的单词搜索游戏,用户可以在其中查找给定单词在给定语言中的翻译。我有相当多的 iOS 经验,但我以前从未使用 运行-time-determined 文本标签等动态生成视图。
说清楚,我知道这是一个工作评估,但不管我是否得到这份工作,或者我是否能够及时完成评估,我认为这是一个有趣的问题并且我'我想学习如何做到这一点,所以我将在模拟器中或我自己 phone.
将其作为 运行 的应用程序完成
所以。我有一个由 UINavigationController 嵌入的视图 in/controlled。我在顶部有几个信息标签,一组用于在视图底部执行操作的按钮,主视图区域需要包含一个 2D 字符网格。我希望能够在点击字符时执行操作,例如突出显示字符(如果它是有效单词的一部分)。我希望能够支持不同大小的网格,所以我不能只在 Interface Builder 中创建一个自动布局约束的标签或按钮网格。
我尝试了多种显示字符二维网格的方法,但我认为最有希望的方法如下:
使用 UITableView 来表示字符行。在每个 table 视图单元格中,使用带有动态生成的 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
}
自定义 table 单元格 class 中配置单元格(理想情况下创建和显示字符行)的函数是这样的:
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)
}
}
我的猜测是它 运行 遇到了麻烦,因为标签在创建时没有可见的矩形,所以它们不会显示在任何地方。
在模拟器中 运行 时生成的视图是一个白框,覆盖了 table 视图的行数,应该用字符行填充,其余的 table =] 视图显示了我正在使用的自定义背景颜色),按照这张图片:
我正在尝试的是让那个白框具有与其他所有内容相同的背景颜色,并填充成行字符。我错过了什么?
问题可能与添加 'labelRect' 有关,您已经指定了 stackView 的矩形。我认为无论标签的框架如何,stackView 自然应该能够创建它的内部标签并将它们分发到自身内部。
您还可以在初始化 stackView 之后,在 configureCell 方法中添加以下内容:
self.stackView.axis = .horizontal
编辑:根据下面的评论,解决方案是创建标签(虽然我切换到按钮以获得更多功能),将它们全部添加到 [UIButton],然后使用它来创建 UIStackView(self.stackView = UIStackView(arrangedSubviews: buttons)
).
作为对我正在面试的工作的技术评估,我正在制作一个基本的单词搜索游戏,用户可以在其中查找给定单词在给定语言中的翻译。我有相当多的 iOS 经验,但我以前从未使用 运行-time-determined 文本标签等动态生成视图。
说清楚,我知道这是一个工作评估,但不管我是否得到这份工作,或者我是否能够及时完成评估,我认为这是一个有趣的问题并且我'我想学习如何做到这一点,所以我将在模拟器中或我自己 phone.
将其作为 运行 的应用程序完成所以。我有一个由 UINavigationController 嵌入的视图 in/controlled。我在顶部有几个信息标签,一组用于在视图底部执行操作的按钮,主视图区域需要包含一个 2D 字符网格。我希望能够在点击字符时执行操作,例如突出显示字符(如果它是有效单词的一部分)。我希望能够支持不同大小的网格,所以我不能只在 Interface Builder 中创建一个自动布局约束的标签或按钮网格。
我尝试了多种显示字符二维网格的方法,但我认为最有希望的方法如下:
使用 UITableView 来表示字符行。在每个 table 视图单元格中,使用带有动态生成的 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
}
自定义 table 单元格 class 中配置单元格(理想情况下创建和显示字符行)的函数是这样的:
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)
}
}
我的猜测是它 运行 遇到了麻烦,因为标签在创建时没有可见的矩形,所以它们不会显示在任何地方。
在模拟器中 运行 时生成的视图是一个白框,覆盖了 table 视图的行数,应该用字符行填充,其余的 table =] 视图显示了我正在使用的自定义背景颜色),按照这张图片:
我正在尝试的是让那个白框具有与其他所有内容相同的背景颜色,并填充成行字符。我错过了什么?
问题可能与添加 'labelRect' 有关,您已经指定了 stackView 的矩形。我认为无论标签的框架如何,stackView 自然应该能够创建它的内部标签并将它们分发到自身内部。
您还可以在初始化 stackView 之后,在 configureCell 方法中添加以下内容:
self.stackView.axis = .horizontal
编辑:根据下面的评论,解决方案是创建标签(虽然我切换到按钮以获得更多功能),将它们全部添加到 [UIButton],然后使用它来创建 UIStackView(self.stackView = UIStackView(arrangedSubviews: buttons)
).