如何将一组 UIButtons 添加到 UIStackview 上？

Posted 2023-03-14

【中文标题】如何将一组 UIButtons 添加到 UIStackview 上？

【英文标题】：How to add an array of UIButtons onto a UIStackview?

【发布时间】：2019-05-03 13:46:39

【问题描述】：

我正在使用字母表中的 26 个字母并使用相应的字母创建 UIButton，在创建 UIButtons 的数组后，我发送存储这些按钮的数组并将其添加到堆栈视图.

stackview 也在 UIView 内，我称为 abcBtnView。

如果我将整个 UIButton 数组传递给它，它会起作用，但是垂直或水平的 26 个按钮看起来不太好。所以我决定不发送 26 个按钮的数组，而是发送 6 个数组，5 个数组，5 个 UIbuttons，一个数组，1 个按钮。

我得到的错误是我无法将UIButton 转换为UIView 类型。

参数UIStackview(arrangedSubviews: [UIView]) 的类型为[UIView]，但是第一次它仍然占用了我的[UIButton] 数组，但如果我放置了多个UIbuttons 数组，它就不会占用它。

我想知道如何将多个 UIButton 数组添加到 UIStackview，以便我可以拥有 6 列和 5 行的 UIButton？

我尝试过的方法：

尝试将 [UIButton] 类型转换为 [UIView] 创建了一个包含 UIButton 数组的数组，然后使用了一个 for 循环将每个 UIstackview 添加到我们的视图（abcBtnView）中。

下面的代码有效，但我只能通过一个 UIBUTTON。

private func makeABCbtns()

    let abcde = createButtons(named: "A", "B", "C", "D", "E")
    let fghij = createButtons(named: "F", "G", "H", "I", "J")
    let klmno = createButtons(named: "K","L", "M", "N", "O")
    let pqrst = createButtons(named: "P", "Q","R", "S", "T")
    let uvwxy = createButtons(named: "U", "V", "W","X", "Y")
    let z     = createButtons(named: "Z")

    let stackView = UIStackView(arrangedSubviews: abcde)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .horizontal
    stackView.spacing = 1
    stackView.distribution = .fillEqually

    // UIView where all the buttons will be in.
    abcBtnView.addSubview(stackView)


    //I am giving the stackview the size of the abcBtnView.
    stackView.anchor(top: abcBtnView.topAnchor,
                     leading: abcBtnView.leadingAnchor,
                     bottom: abcBtnView.bottomAnchor,
                     trailing: abcBtnView.trailingAnchor,
                     centerXaxis: nil,
                     centerYaxis: nil)


func createButtons(named: String...) -> [UIButton]
    return named.map  letter in
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle(letter, for: .normal)
        button.backgroundColor = .green
        button.setTitleColor( .blue , for: .normal)
        return button
    

【问题讨论】：

将 A-Z 组合成一个数组，然后使用该数组或循环遍历数组并将每个数组添加到堆栈视图。

@TejaNandamuri 没有用。这是我提到的我尝试过的事情之一，但是当我这样尝试时它给了我一个错误。

【参考方案1】：

您的代码使用骨架故事板工作，因此问题可能存在于代码的其他地方。这是根据 Teja 的建议重构的代码。

  private func makeABCbtns()

    let list = [["A", "B", "C", "D", "E"], ["F", "G", "H", "I", "J"], ["K","L", "M", "N", "O"], ["P", "Q","R", "S", "T"], ["U", "V", "W","X", "Y"], ["Z"]]
    var groups = [UIStackView]()

    for i in list 
      let group = createButtons(named: i)
      let subStackView = UIStackView(arrangedSubviews: group)
      subStackView.axis = .horizontal
      subStackView.distribution = .fillEqually
      subStackView.spacing = 1
      groups.append(subStackView)
    

    let stackView = UIStackView(arrangedSubviews: groups)
    stackView.axis = .vertical
    stackView.distribution = .fillEqually
    stackView.spacing = 1
    stackView.translatesAutoresizingMaskIntoConstraints = false

    abcBtnView.addSubview(stackView)

    stackView.leadingAnchor.constraint (equalTo: abcBtnView.leadingAnchor,  constant: 0).isActive = true
    stackView.topAnchor.constraint     (equalTo: abcBtnView.topAnchor,      constant: 0).isActive = true
    stackView.trailingAnchor.constraint(equalTo: abcBtnView.trailingAnchor, constant: 0).isActive = true
    stackView.bottomAnchor.constraint  (equalTo: abcBtnView.bottomAnchor,   constant: 0).isActive = true
  

  func createButtons(named: [String]) -> [UIButton]
    return named.map  letter in
      let button = UIButton()
      button.translatesAutoresizingMaskIntoConstraints = false
      button.setTitle(letter, for: .normal)
      button.backgroundColor = .green
      button.setTitleColor( .blue , for: .normal)
      return button
    
  

【讨论】：

这很棒！感谢您澄清上述回复。

@OcielLerma 如果可行，请接受答案。 How to accept an answer

【参考方案2】：

听起来您正在尝试创建UIButtons 的网格。单个UIStackView 无法做到这一点。取而代之的是，您需要在另一个 UIStackView 中包含一堆 UIStackViews，这只是为了让您知道这是一个非常糟糕的主意。

或者，您可以使用UICollectionView，而不是重新发明***，并将您的按钮布置为网格。每个按钮都将位于 UICollectionViewCell 内。

【讨论】：

谢谢！这实际上听起来是个好主意。我刚开始阅读这些内容，所以我会这样做。

@Mr.P，为什么嵌套堆栈视图是个坏主意？ Apple 在 WWDC 2015“自动布局之谜，第 1 部分”演示文稿中鼓励了他们。如果需要滚动，集合视图似乎是更好的选择。

@Marcy 我总是对它们有点警惕，因为它们在 CPU 方面的渲染也非常繁重，因为它们需要执行大量布局计算。在这种静态情况下，如果 OP 只想显示一个网格，他们可以工作，但是在我看来，在 stackview 中创建一个 stackview 似乎是一种明显的代码气味，因为他们正在尝试创建一个网格，而 UICollectionView 是首选创建网格时。然后 OP 可以禁用 UICollectionView 上的滚动，如果他们希望它在未来滚动，他们需要做的就是重新启用滚动。使整个事情更容易使用。