Создание «облака тегов» в UITableViewCell - PullRequest
Новая
       85

Создание «облака тегов» в UITableViewCell

0 голосов
/ 09 мая 2020

Мне нужно создать коллекцию tags в UITableViewCell.

Эти теги кликабельны, поэтому я решил визуализировать их, используя UIButton, и я буду стилизовать их под себя.

Я думал, что могу создать ячейку, содержащую UIStackView, и добавить кнопки, которые должны обернуться, если они не подходят.

Однако вид стека, кажется, застрял на одной строке и кнопках квадратные sh и нечитаемые.

Я думал, что могу установить ширину кнопки в зависимости от ширины текста, но это тоже не работает.

enter image description here

final class ProfileFollowedTopics: UITableViewCell {
  var topics: [String] = ["Topic #01", "Topic #02", "Topic #03", "Topic #04", "Topic #05", "Topic #06", "Topic #07", "Engineering", "Code", "Whiskey"]

  override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    configureUI()
  }

  required init?(coder: NSCoder) {
    return nil
  }

}

private extension ProfileFollowedTopics {
  func configureUI() {

    let stackView = UIStackView(frame: .zero)
    stackView.translatesAutoresizingMaskIntoConstraints = false

    contentView.addSubview(stackView)

    NSLayoutConstraint.activate([
      stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
      stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
      stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
      stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
    ])

    topics.forEach { topic in
      let textWidth = topic.widthOfString(usingFont: .systemFont(ofSize: 14))
      let button = UIButton(type: .system)
      button.setTitle(topic, for: .normal)
      button.setTitleColor(.black, for: .normal)
      button.titleLabel?.font = .systemFont(ofSize: 14)
      button.widthAnchor.constraint(equalToConstant: textWidth).isActive = true
      stackView.addArrangedSubview(button)
    }

    stackView.addArrangedSubview(UIView())
  }
}

extension String {
  func widthOfString(usingFont font: UIFont) -> CGFloat {
    let fontAttributes = [NSAttributedString.Key.font: font]
    let size = self.size(withAttributes: fontAttributes)
    return size.width
  }
}

Можно ли добиться этого, не прибегая к сторонним библиотекам?

Я бы хотел, чтобы элементы выравнивались по левому краю в стеке и переносились на новую строку если они не помещаются в один ряд.

...