JSPopoverMenu
JSPopoverMenu 是一个气泡标签管理视图。优雅的编辑模式,易于使用。
点击右上角的 编辑 按钮开始编辑模式,然后此按钮将变为 完成。
要移动单元格,只需拖动它。将单元格移动到垃圾桶图标将把单元格放到队列的末尾并将单元格变为灰色。
点击右上角的完成按钮以确认删除或将这些尾随单元格放回原位。通过触摸重置按钮,可以撤销所有操作。
演示
安装
CocoaPods
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
use_frameworks!
target '<Your Target Name>' do
pod 'JSMenu', '~> 1.1.1'
end
手动安装
下载 源 文件夹中的所有文件。
用途
- 请在JSPopoverMenuDemo示例中检查。该示例设计用于在点击
titleView
(一个UIButton
),即NavigationBar
的标题视图时显示菜单视图。 - 需要实现
JSPopoverMenuViewDelegate
协议。 JSPopoverMenuView
是UIView
的子类,所以可以直接像使用其他视图一样使用它。
1. 初始化
默认宽度与屏幕相同。只需使用一个String
数组进行初始化,每个String
代表集合视图中一个标签(一个Cell
)。
popoverView = JSPopoverMenuView(tags: ["Sports", "Movies", "Food", "News", "Travel", "Books"])
如果您使用任何数据模型来管理标签,请确保您的模型符合JSTag
协议,并使用以下初始化器。
let data: [JSTag] = ["Sports", "Movies", "Food", "News", "Travel", "Books"].enumerated().map(){ JSDefaultTag(id: $0, title: $1) })
popoverView = JSPopoverMenuView(data: data)
有关更多信息,请参阅第4节。
2. 代理
1. 设置代理
popoverView.delegate = self
self
是指示例中一个视图控制器。任何UIView
的子类也可以。
2. 设置baseView
。整个PopoverView
将被添加到baseView
中
var baseView: UIView { return self.view }
3.1 标签点击事件
func popoverMenu(_ popoverMenu: PopoverMenuView, didSelectedAt indexPath: IndexPath)
3.2 完成编辑事件
func popoverMenu(_ popoverMenu: PopoverMenuView, updatedData data: [JSTag])
3.3 新标签插入事件
func popoverMenu(_ popoverMenu: PopoverMenuView, newTag value: JSTag)
注意:此函数将在用户添加了新标签后立即被调用,这意味着菜单仍处于编辑模式,新的标签可以被立即删除。因此,最好在编辑后通过func popoverMenu(_ popoverMenu: PopoverMenuView, updatedData data: [JSTag])
获取最终数据。
3. 显示
有两种方法可以显示和关闭菜单。
1. 快速切换。
如果菜单未显示,显示菜单;如果菜单已显示,则关闭菜单。
popoverView.quickSwitch()
2.1 显示
popoverView.show() { print("I'm here") }
2.2 关闭
popoverView.dismiss() { print("See ya") }
4. 数据源类型
一个标签本质上是一个字符串,但是需要 id
来确保其唯一性。
因此,PopoverMenu 使用一个简单的协议来约束数据模型。
protocol JSTag {
var title: String { get set }
var id: Int { get set }
}
默认情况下,PopoverMenu 使用 JSDefaultTag
作为数据源类型。但是,如果您对 id
没有感觉,可以使用以下初始化方法创建一个实例。
popoverView = JSPopoverMenuView(tags: ["Sports", "Movies", "Food", "News", "Travel", "Books"])
5. UI 自定义
由于 PopoverView
本身是 UIView
的子类,因此可以通过初始化器或 frame
属性设置 PopoverView
的高度。
/// Gap between header and the tag collection.
public var menuTopOffset: CGFloat = 5
/// Height of tag collection view.
public var menuHeight: CGFloat = 115
/// Height of the header tool bar.
public var headerHeight: CGFloat = 30
待办
方便的布局定制