BMTokenView
具有类似 UITableView 方法的 Token 风格 UI
BMTokenView 允许您使用类似 UITableViewDataSource 和 UITableViewDelegate的方式创建使用 Token 以管理视图,类似于 UITableview。
安装
您可以下载/克隆示例应用程序并将 BMTokenView.swift 拷贝到您的项目中,或者简单使用 pod。
pod 'BMTokenView'
设置
实现 Token 视图有两种方法。
1. 手动
就像创建一个 UIView 一样简单地创建一个 BMTokenView。不要忘记设置代理和数据源。每次 BMTokenView 的高度发生变化(当需要创建新的行以创建新的 Token 时),
func tokenViewHeightUpdated(tokenView:BMTokenView, height:CGFloat) -> ()
会被调用来处理高度变化。
2. AutoLayout
BMTokenView 支持AutoLayout。只需将UIView拖放到你的视图控制器中,并将其命名为 BMTokenView。设置一个初始高度约束,并将高度约束连接到
@IBOutlet public var heightConstraint:NSLayoutConstraint
连接后,BMTokenView 的高度将通过约束自动控制。
使用方法
与UITableview类似,BMTokenView不需要知道要显示的数据。所有数据都通过数据源进行管理,因此你可以像在tableview中一样将数据保存在数组中。
有三个数据源回调。
func tokenViewNumberOfItems(tokenView:BMTokenView) -> Int // 1
func tokenViewDataForItem(tokenView:BMTokenView,atIndex index:Int) -> TokenViewData // 2
func canEditTokenView(tokenView:BMTokenView) -> Bool // 3
- 与numberOfRowsInTableview相同。
- 为单个令牌需要显示的实际数据。TokenViewData只是String的一个简单别称。
- 如果为false,TokenView将只读,除非重新加载数据,否则无法添加或删除数据。
BMTokenView有7个可选的代理回调,这些回调是自我说明的。
@objc protocol BMTokenViewDelegate {
@objc optional func tokenViewHeightUpdated(tokenView:BMTokenView, height:CGFloat) -> ()
@objc optional func tokenViewDidDrawView(tokenView:BMTokenView, view:BMToken) -> () // for more customizing
@objc optional func tokenViewDidBeganEditing(tokenView:BMTokenView, text:String) -> ()
@objc optional func tokenViewShouldReturn(tokenView:BMTokenView, text:String) -> ()
@objc optional func tokenViewChangedText(tokenView:BMTokenView, text:String) -> ()
@objc optional func tokenViewWillDeleteToken(tokenView:BMTokenView, index:Int) -> () // 1
@objc optional func tokenViewDidTapToken(tokenView:BMTokenView, index:Int) -> () // 2
}
"1" 当用户点击现有令牌并在键盘上按删除键时将被调用。它不会自动删除数据,因为数据是通过代理管理的。您将必须在这里实现自己的删除逻辑,BMTokenView会自动重新加载数据。 "2" 与1类似,您将需要在该方法中添加数据。BMTokenView将自动重新加载数据。
自定义
BMTokenView有一个设置值,其中包含许多选项,以便您可以手动设计自己的tokenview。所有选项都是自我说明的。
struct BMTokenViewSettings {
var margins:UIEdgeInsets = UIEdgeInsetsMake(0,0,0,0)
var textMargin:CGFloat = 16.0
var tokenHeight:CGFloat = 30.0
var tokenXMargin:CGFloat = 4.0
var tokenYMargin:CGFloat = 4.0
var isRound:Bool = true
var font:UIFont = UIFont.systemFont(ofSize: 12.0)
var tintColor:UIColor = UIColor.black
var textColor:UIColor = UIColor.white
var textColorSelected:UIColor = UIColor(red: 34/255, green: 34/255, blue: 34/255, alpha: 1.0)
var tokenViewBackgroundColor:UIColor = UIColor(red: 34/255, green: 34/255, blue: 34/255, alpha: 1.0)
var tokenViewBackgroundColorSelected:UIColor = UIColor.white
var firstResponderAtStart:Bool = true
var canSelectTokens:Bool = true
}
- 最重要的设置是'margins',如果没有定义,则令牌将在BMTokenView的起始处绘制。
- 'textMargin'定义文本和令牌块之间的侧边距。
- 'tokenXMargin'和'tokenYMargin'定义两个令牌块之间的距离。