Swift iOS - 标签集合视图

Question

I'm writing my first iOS app and I wanna just answer what is the best-known solution to make this? It's simple tag collection. I have already looked over the Internet but I have found nothing. I think the best way is to make my own structure of buttons maybe?

Here is what I want to achieve:

Answer 1

I have implemented a tagview using just a collectionview.

Here is the github link.

Answer 2

I resolve this problem, using collection view.

class FilterController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    @IBOutlet var collectionView: UICollectionView?


    override func viewDidLoad() {
    super.viewDidLoad()


    // Do any additional setup after loading the view, typically from a nib.
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 150, left: 10, bottom: 150, right: 10)
    // layout.itemSize = CGSize(width: 90, height: 45)
    layout.itemSize = CGSizeFromString("Aloha")

    collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    collectionView!.dataSource = self
    collectionView!.delegate = self
    collectionView!.registerClass(TagCell.self, forCellWithReuseIdentifier: "TagCell")
    collectionView!.backgroundColor = UIColor.whiteColor()

    self.view.addSubview(collectionView!)
}

Answer 3

sometimes you need do it yourself:

import UIKit
import PlaygroundSupport

class TagsView: UIView {

    // MARK: - Properties

    var offset: CGFloat = 5

    // MARK: - Public functions

    func create(cloud tags: [UIButton]) {
        var x = offset
        var y = offset
        for (index, tag) in tags.enumerated() {
            tag.frame = CGRect(x: x, y: y, width: tag.frame.width, height: tag.frame.height)
            x += tag.frame.width + offset

            let nextTag = index <= tags.count - 2 ? tags[index + 1] : tags[index]
            let nextTagWidth = nextTag.frame.width + offset

            if x + nextTagWidth > frame.width {
                x = offset
                y += tag.frame.height + offset
            }

            addSubview(tag)
        }
    }
}

private func button(with title: String) -> UIButton {
    let font = UIFont.preferredFont(forTextStyle: .headline)
    let attributes: [NSAttributedString.Key: Any] = [.font: font]
    let size = title.size(withAttributes: attributes)

    let button = UIButton(type: .custom)
    button.setTitle(title, for: .normal)
    button.titleLabel?.font = font
    button.setTitleColor(.darkGray, for: .normal)
    button.layer.borderWidth = 1.0
    button.layer.cornerRadius = size.height / 2
    button.layer.borderColor = UIColor.darkGray.cgColor
    button.frame = CGRect(x: 0.0, y: 0.0, width: size.width + 10.0, height: size.height + 10.0)
    button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: 5.0, bottom: 0.0, right: 5.0)
    return button
}

let titles = ["Freedom", "God", "Happiness", "Imagination", "Intelligence", "Other"]
let tags = titles.map { button(with: $0) }

let frame = CGRect(x: 0, y: 0, width: 260, height: 200)
let tagsView = TagsView(frame: frame)
tagsView.backgroundColor = .white
tagsView.create(cloud: tags)

PlaygroundPage.current.liveView = tagsView
PlaygroundPage.current.needsIndefiniteExecution = true

Answer 4

只需将按钮动态添加到 superView，并根据您的要求更改背景。