Quickstart

In this walkthrough, we will setup a simple UBTokenBar with removable tokens. See the full example in the provided example app in the pod.

Setting up the UBTokenBar

Lets create a token bar and add some tokens and setup some constraints, then add it to our view

let defaultTokenBarHeight: CGFloat = 30

// Create a UBTokenBar and add to view
let tokenBar = UBTokenBar()
tokenBar.delegate = self
tokenBar.placeholderText = "Enter text and press enter to add a token"
self.view.addSubview(tokenBar)
self.tokenBar = tokenBar

// Setup initial constraints for the token bar
let leadingConstraint = NSLayoutConstraint(item: tokenBar, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: 0)
let trailingConstraint = NSLayoutConstraint(item: tokenBar, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1.0, constant: 0)
let topConstraint = NSLayoutConstraint(item: tokenBar, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1.0, constant: 20)
let heightConstraint = NSLayoutConstraint(item: tokenBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: defaultTokenBarHeight)
let tokenBarConstraints = [leadingConstraint, trailingConstraint, topConstraint, heightConstraint]
self.view.addConstraints(tokenBarConstraints)
self.tokenBarConstraints = tokenBarConstraints

Next lets implement the UBTokenBarDelegate protocol

/// UBTokenBarDelegate

func shouldAddToken(tokenToAdd: UBToken) -> Bool {
    return true // Override with your own custom logic
}

func shouldDeleteToken(tokenToDelete: UBToken) -> Bool {
    return true // Override with your own custom logic
}

func tokenForTokenBarText(currentTokenBarText: String) -> UBToken? {
    // This is a simple implementation, usually you would have an associated object with the token
    return UBToken(title: currentTokenBarText, object: currentTokenBarText as NSObject)
}

func tokenBarTextDidChange(newTokenBarText: String) {
    // Usually you would keep track of something when the text changes
}


func tokenBarSizeDidChange(newTokenBarSize: CGSize) {
    guard let tokenBar = self.tokenBar else {
        return
    }
    // Make sure we are fully re-installing constraints
    self.view.removeConstraints(tokenBar.constraints)

    let leadingConstraint = NSLayoutConstraint(item: tokenBar, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1.0, constant: 0)
    let trailingConstraint = NSLayoutConstraint(item: tokenBar, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1.0, constant: 0)
    let topConstraint = NSLayoutConstraint(item: tokenBar, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1.0, constant: 20)
    let heightConstraint = NSLayoutConstraint(item: tokenBar, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: newTokenBarSize.height)

    // Update constraints with the new height of the token bar, usually you would enforce a max height here
    self.view.addConstraints([leadingConstraint, trailingConstraint, topConstraint, heightConstraint])
}

Thats it!, build and run the app, you should have a token bar that works like what you see below! Enter some text and press enter, tap the x buttons to remove the token

Customizing UBTokenBar

You can change the cell class or collection view layout of the UBTokenBar, see the example below

tokenBar.collectionViewCellReuseClass = MyAwesomeNewTokenBarCell.self
tokenBar.collectionViewLayout = MyAwesomeNewTokenBarLayout()
// You can even customize the text input cell!
tokenBar.collectionViewTextInputCellReuseClass = MyAwesomeNewTokenBarTextInputCell.self

Make sure that your collectionViewCellReuseClass is a subclass of UBTokenBarCollectionViewCell and that your collectionViewTextInputCellReuseClass is a subclass of UBTokenBarTextFieldCollectionViewCell! Otherwise the UBTokenBar will crash.