ModularSidebarView ModularSidebarView 是一个可定制的用于在屏幕侧边显示选项的菜单,适用于 iOS。旨在作为 UINavigation 控制栏条目和工具栏条目的替代品。
使用
显示 SidebarView
首先,初始化 SidebarView
private lazy var sidebarView: SidebarView = {
let sbv = SidebarView(delegate: self)
// Make desired configurations
return sbv
}()
然后创建某种 UIButton、UIBarButtonItem 或任何启用用户交互的视图。创建选择器和函数,您可以选择任意方式。
// It is NOT required to a use a UIBarButtonItem to display the SidebarView.
// Provide your own implementation for triggering the SidebarView to show.
private lazy var sidebarButton: UIBarButtonItem = {
let btn = UIBarButtonItem(title: "Sidebar",
style: .done,
target: self,
action: #selector(openSidebarView(_:)))
return btn
}()
// Here, we call the "showSidebarView()" function to display the SidebarView
@objc private func openSidebarView(_ sender: Any) {
sidebarView.show()
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ... Other UI setup
// Place the sidebarButton in the navigationBar if desired.
self.navigationItem.leftBarButtonItem = sidebarButton
}
关闭 SidebarView
private func dismissSidebarView() {
sidebarView.dismiss()
}
只需轻击背景视图
或者按住 SidebarView 中的任一选项,如果 dismissesOnSelection 设置为 TRUE,则会选择并关闭
将项添加到侧边栏视图
侧边栏视图使用视图模型方法布局项。
您可以选择继承默认提供的类或遵守底层协议以获得更多自定义
步骤 1: 创建视图模型
SidebarViewCellModel
, SidebarViewReusableViewSectionModel
和 SidebarViewReusableViewModel
派生 // SidebarViewCellModel is the View-Model that represents a SidebarView cell
// CustomSidebarCellModel is a custom subclass. You may provide your own subclass
class CustomSidebarCellModel: SidebarViewCellModel {
var image: UIImage?
var title: String
init(image: UIImage?, title: String) {
self.image = image
self.title = title
// This is very imporant. Provide the cell class you wish for this model to display
// This must be a UICollectionViewCell
super.init(cellClass: CustomSidebarCell.self)
}
}
// At heart, SidebarView is a UICollectionView.
// As such, may render both a header and footer supplementaryView for each section.
// The SidebarViewReusableViewSectionModel provides a container for both the header and footer in each section.
SidebarViewReusableViewSectionModel(headerViewModel: SidebarViewReusableViewModelProtocol?, footerViewModel: SidebarViewReusableViewModelProtocol?)
// You create your own header and footer supplementary view-models that conform to SidebarViewReusableViewModelProtocol or subclass the default SidebarViewReusableViewModel:
class CustomHeaderModel: SidebarViewReusableViewModel {
init() {
super.init(reusableViewClass: CustomSidebarSectionHeader.self, elementType: .header)
}
}
class CustomFooterModel: SidebarViewReusableViewModel {
init() {
super.init(reusableViewClass: CustomSidebarSectionHeader.self, elementType: .footer)
}
}
步骤 2: 创建视图(单元格和可重用视图)
SidebarViewCell
和 SidebarReusableView
派生 class CustomSidebarCell: SidebarViewCell {
// Important to override this function to configure the cells as desired
override func configure(with item: SidebarViewCellModelProtocol, at indexPath: IndexPath) {
super.configure(with: item, at: indexPath)
guard let customViewModel = item as? CustomSidebarCellModel else {
return
}
// configure the cell with your custom View-Model data
self.imageView.image = customViewModel.image
self.titleLabel.text = customViewModel.title
}
}
class CustomSidebarSectionHeader: SidebarReusableView {
// Important to override this function to configure the view as desired
override func configure(with item: SidebarViewReusableViewModelProtocol, at indexPath: IndexPath) {
super.configure(with: item, at: indexPath)
guard let customViewModel = item as? CustomHeaderModel else {
return
}
// configure the cell with your custom header View-Model data
}
}
步骤 3: 将视图模型插入到 SidebarView
使用这两个函数在期望的 indexPaths 中插入 Cell 和 ReusableView 视图模型
func insertSidebarView(models: [SidebarViewCellModelProtocol], atIndexPaths indexPaths: [IndexPath])
func insertReusableView(reusableSectionModels: [SidebarViewReusableViewSectionProtocol], atIndices indices: [Int])
示例
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
setupSidebarViewItems()
}
private func setupSidebarViewItems() {
// Create Cell View-Models
let sectionOneIndexPaths: [IndexPath = // ... Construct array of IndexPaths for section 0
let sectionOneItems: [SidebarViewCellModelProtocol] = // ... Construct array of View-Models for section 0
let sectionTwoIndexPaths: [IndexPath = // ... Construct array of IndexPaths for section 1
let sectionTwoItems: [SidebarViewCellModelProtocol] = // ... Construct array of View-Models for section 1
let completeListOfItems: [SidebarViewCellModelProtocol] = (sectionOneItems + sectionTwoItems)
let completeListOfIndexPaths = (sectionOneIndexPaths + sectionTwoIndexPaths)
sidebarView.insertSidebarView(models: completeListOfItems, atIndexPaths: completeListOfIndexPaths)
// Create ReusableView View-Models
let reusableSectionItems: [SidebarViewReusableViewSectionModel] = // ... Construct array of ReusableView Section View-Models
let sectionIndices: [Int] = // ... Construct of section indices (positive integers)
sidebarView.insertReusableView(reusableSectionModels: reusableSectionItems, atIndices: sectionIndices)
}
扩展 SidebarViewDelegate
你可以扩展这个类
class ViewController: SidebarViewDelegate {
func sidebarView(_ sidebarView: SidebarView, didSelectItemAt indexPath: IndexPath) {
// Provide custom action/functionality when tapping a SidebarView cell at each indexPath
}
func sidebarView(_ sidebarView: SidebarView, heightForHeaderIn section: Int) -> CGFloat {
// Provide height for supplementary header reusableView at each section
}
func sidebarView(_ sidebarView: SidebarView, heightForFooterIn section: Int) -> CGFloat {
// Provide height for supplementary footer reusableView at each section
}
func sidebarView(_ view: SidebarView, heightForItemAt indexPath: IndexPath) -> CGFloat {
// Provide heights for items at each IndexPath
}
}
示例
要运行示例项目,首先克隆repo,然后从 Example 目录运行 pod install
需求
安装
ModularSidebarView 可通过 CocoaPods 使用。要安装它,只需将以下行添加到您的 Podfile 中
pod 'ModularSidebarView'
作者
ChrishonWyllie,[email protected]
许可证
ModularSidebarView 在 MIT 许可证下可用。有关更多信息,请参阅 LICENSE 文件。