BMTokenView 1.1

BMTokenView 1.1

Doheny Yoon维护。



BMTokenView

具有类似 UITableView 方法的 Token 风格 UI

drawing drawing

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
  1. 与numberOfRowsInTableview相同。
  2. 为单个令牌需要显示的实际数据。TokenViewData只是String的一个简单别称。
  3. 如果为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'定义两个令牌块之间的距离。