ModularSidebarView 1.0.4

ModularSidebarView 1.0.4

Chrishon Wyllie 维护。



  • ChrishonWyllie

ModularSidebarView

CI Status Version License Platform

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 文件。