2017-02-02 36 views
0

我想建立程序如下: enter image description here添加按鈕的個體量細胞編程

,但我想以編程方式添加自定義按鈕。在這裏我不知道,如何告訴按鈕尊重它們之間的空間,以及如果下一個按鈕不適合同一個「行」,如何調整單元格的高度。

我試圖與約束:

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) 
    } 
} 

和我添加的按鈕類似如下:

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

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

但constrainTop和constrainLeading的聲明引發錯誤和不具有約束按鈕R上對方的頂部和按鈕的大小爲假。

+0

它看起來像你給所有的按鈕同樣名列前茅和「superview」相關的主要約束。這將導致他們都在彼此之上。您需要更改與我相信上次添加的按鈕相關的約束。 – Hodson

+0

但是如果你知道你想放置它們的位置,並且你正在制定所有的間距 - 那麼你不需要約束,並且可以將它們放在包含視圖中的正確的x,y值 – Russell

+1

如何使用「UICollectionVIewFlowLayout」https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/UsingtheFlowLayout/UsingtheFlowLayout.html – timaktimak

回答

0

@Palpatim的評論啓發,做它類似如下:

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! 
} 

,其結果是:

enter image description here