setzen individuelle Anzahl Tasten programmatisch

Question

ich Zelle wollen die folgende programmatisch bauen:

aber ich möchte programmatisch die benutzerdefinierten Schaltflächen hinzuzufügen. Hier habe ich keine Ahnung, wie die Knöpfe den Abstand zwischen ihnen respektieren und wie man die Höhe der Zelle ändert, wenn der nächste Knopf nicht in die gleiche "Zeile" passt.

i mit Constraints versucht:

import Material 

class ChipButton: Button { 
    override func prepare() { 
     super.prepare() 

     cornerRadiusPreset  = .cornerRadius5 
     backgroundColor   = UIColor.lightGray 
     titleColor    = Color.darkText.primary 
     pulseAnimation   = .none 
     contentEdgeInsets  = EdgeInsets(top: 0, left: 12, bottom: 0, right: 12) 
     isUserInteractionEnabled = false 
     titleLabel?.font  = RobotoFont.regular 
     isOpaque    = true 

     let constraintTop  = NSLayoutConstraint(item: self, attribute: .top, relatedBy: .equal, toItem: superview, attribute: .top, multiplier: 1, constant: 4) 
     let constraintLeading = NSLayoutConstraint(item: self, attribute: .leading, relatedBy: .equal, toItem: superview, attribute: .leading, multiplier: 1, constant: 4) 

     superview?.addConstraint(constraintTop) 
     superview?.addConstraint(constraintLeading) 
    } 
} 

und I fügen die Tasten wie folgt aus:

for tag in item.tags { 
    let chip = ChipButton() 
    chip.title = tag.text 

    cell!.layout(chip).edges(top: 4, left: 4, bottom: 4, right: 4) 
} 

aber die Erklärung der constrainTop und constrainLeading einen Fehler führt und ohne die Einschränkungen die Tasten r auf übereinander und die Größe der Tasten r false.

Answer 1

Der Kommentar von @Palpatim inspiriert es wie folgt zu tun:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    var cell: UITableViewCell? 

    if let item: TagItem = items[indexPath.section][indexPath.row] as? TagItem { 
     if (item.tags.count > 0) { 
      // show all tags as a Chip 

      cell = TableViewCell() 
      cell?.isUserInteractionEnabled = false 
      var hStackView   = UIStackView() 
      hStackView.axis   = .horizontal 
      hStackView.spacing  = 8 
      hStackView.alignment = .fill 
      hStackView.distribution = .fill 

      let vStackView   = UIStackView() 
      vStackView.axis   = .vertical 
      vStackView.spacing  = 8 
      vStackView.alignment = .top 

      var tagsWidth: CGFloat = 0 
      for tag in item.tags { 
       let chip = ChipButton() 
       chip.title = tag.text 
       chip.sizeToFit() 

       if (tagsWidth + chip.bounds.width < (cell?.bounds.width)!) { 
        tagsWidth += chip.bounds.width 
        hStackView.addArrangedSubview(chip) 
       } 
       else { 
        vStackView.addArrangedSubview(hStackView) 
        tagsWidth = chip.bounds.width 
        hStackView = UIStackView() 
        hStackView.axis   = .horizontal 
        hStackView.spacing  = 8 
        hStackView.alignment = .fill 
        hStackView.distribution = .fill 
        hStackView.addArrangedSubview(chip) 
       } 
      } 

      vStackView.addArrangedSubview(hStackView) 

      cell!.layout(vStackView).edges(left: 16, right: 16).centerVertically() 

      return cell! 
     } 
     else { 
      cell = TableViewCell(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 40)) 
      // show a label 
      let infoLabel = UILabel() 
      infoLabel.text   = "no tags" 

      cell!.layout(infoLabel).centerVertically().edges(left: 16) 

      return cell! 
     } 
    } 

    cell = TableViewCell() 
    return cell! 
} 

und das Ergebnis ist: