First, initialize the SideBarView
private lazy var sidebarView: SidebarView = {
let sbv = SidebarView(delegate: self)
// Make desired configurations
return sbv
}()
Then create some sort of UIButton, UIBarButtonItem or any view with userInteraction enabled. Create the selector and function however you choose.
// 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
}
private func dismissSidebarView() {
sidebarView.dismiss()
}
Simply tap the background view
Or pressing one of the options in the SidebarView will also dismiss on selection if dismissesOnSelection set to TRUE
You may subclass the default provided classes or conform to the underlying protocol for more customization
Subclassing the SidebarViewCellModel
, SidebarViewReusableViewSectionModel
and 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)
}
}
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
}
}
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)
}
You may extend the class:
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
}
}
To run the example project, clone the repo, and run pod install
from the Example directory first.
ModularSidebarView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'ModularSidebarView'
ChrishonWyllie, [email protected]
ModularSidebarView is available under the MIT license. See the LICENSE file for more info.