-
Notifications
You must be signed in to change notification settings - Fork 18
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.
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
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.