分段CollectionView 1.1.6

分段CollectionView 1.1.6

Esteban Arrua维护。



  • estebanarrua

分段CollectionView

Version License Platform Swift 4.0

用法

这个库可以帮助您实现具有多项目选择功能的分段CollectionView,并通过代理获取所选项目。

该库包含一个UIView,该UIView包含一个UICollectionView

将该UIView添加到您要使用的地方,并配置以下项。

自定义数据

您必须创建一个继承自SectionOfCustomData类的类。

import Foundation
import SectionedCollectionView

open class MySectionOfCustomData: SectionOfCustomData {
    public typealias Item = MyCustomData
    public typealias Header = String
    public typealias Footer = Any
}

您还必须创建一个继承自Selectable类的类。

import Foundation
import SectionedCollectionView

public class MyCustomData: Selectable {

    public var name: String

    public init(name: String, selected: Bool) {
        self.name = name

        super.init()
        self.selected = selected
    }

}

您可以实现自己的Header和Footer类。如果这样做,您必须更改您的SectionOfCustomData中的typealias Headertypealias Footer

自定义视图

SectionedCollectionView需要三个ViewCells,一个是项目项、一个是头部和一个底部。所有这些ViewsCells都必须从ItemCollectionViewCell继承,并实现configure方法。

import Foundation
import UIKit
import SectionedCollectionView

class CustomItemCollectionViewCell: ItemCollectionViewCell {

    override class var nibName: String {
        return "CustomItemCollectionViewCell"
    }
    override class var cellReuseIdentifier: String {
        return "CustomItemCollectionViewCell"   
    }

    @IBOutlet weak var nameLabel: UILabel!

    override func configure(withValue value: Any?) {
        guard let data = value as? MyCustomData else { return } 
        nameLabel.text = data.name
        nameLabel.textColor = data.selected ? .white : .black
    }
}

您不需要实现所有的 ViewCell 项目,例如,如果您的 SectionCollectionData 不需要页脚,您就不需要为页脚实现 ViewCell。在下一节中,将解释如何将自定义 ViewCellsSectionCollectionView 关联。

设置

有多个设置可以更改。

视图单元格

您可以更改 nibNamecellReuseIdentifier

sectionedCollectionView.settings.viewCells.itemCollectionViewCellNibName = CustomItemCollectionViewCell.nibName
sectionedCollectionView.settings.viewCells.itemCollectionViewCellReuseIdentifier = CustomItemCollectionViewCell.cellReuseIdentifier
sectionedCollectionView.settings.viewCells.headerViewCellNibName = HeaderViewCell.nibName
sectionedCollectionView.settings.viewCells.headerViewCellReuseIdentifier = HeaderViewCell.cellReuseIdentifier
sectionedCollectionView.settings.viewCells.footerViewCellNibName = FooterViewCell.nibName
sectionedCollectionView.settings.viewCells.footerViewCellReuseIdentifier = FooterViewCell.cellReuseIdentifier

样式

您可以更改 UICollectionView 的样式。

sectionedCollectionView.settings.style.sectionInset = UIEdgeInsets(top: 2, left: 12, bottom: 10, right: 12)
sectionedCollectionView.settings.style.backgroundColor = .white

数据

您可以选择选择的项的数量限制。

sectionedCollectionView.settings.data.selectedLimit = 5

头部和页脚样式

您可以设置以下头部和页脚样式的值。

sectionedCollectionView.settings.headerStyle.headerReferenceHeight = 40
sectionedCollectionView.settings.footerStyle.footerReferenceHeight = 2

如果您不需要页脚视图,请将 settings.footerStyle.footerReferenceHeight 的值设置为 0。

项目设置

您有一些关于 ItemCellView 的设置可以配置。

sectionedCollectionView.settings.itemsSetup.itemsForRows = 3
sectionedCollectionView.settings.heightRatio = 0.9
sectionedCollectionView.settings.minimumLineSpacing = 8
sectionedCollectionView.settings.minimumInteritemSpacing = 8
在配置好所有必要的设置后,需要调用函数 sectionedCollectionView.setupView()

数据源

let sections = [
    MySectionOfCustomData(header: "Management", items: [MyCustomData(name: "FOH management", selected: false), MyCustomData(name: "Bar management", selected: false), MyCustomData(name: "Kitchen management", selected: false), MyCustomData(name: "Baking management", selected: false) ]),
    MySectionOfCustomData(header: "Front of house", items: [MyCustomData(name: "Bartending", selected: false), MyCustomData(name: "Barista", selected: false), MyCustomData(name: "Serving", selected: false), MyCustomData(name: "Host/Hostess", selected: false), MyCustomData(name: "Sommelier", selected: false), MyCustomData(name: "Cashier", selected: false), MyCustomData(name: "Bar backing", selected: false), MyCustomData(name: "Bussing", selected: false), MyCustomData(name: "Bouncer or security", selected: false), MyCustomData(name: "Coat check", selected: false), MyCustomData(name: "Expo / Food runner", selected: false), MyCustomData(name: "Garde manger / salad", selected: false)]),
    MySectionOfCustomData(header: "Back of house", items: [MyCustomData(name: "Prepping", selected: false), MyCustomData(name: "Hot line cook", selected: false), MyCustomData(name: "Pastry", selected: false), MyCustomData(name: "Baking", selected: false), MyCustomData(name: "Sushi", selected: false), MyCustomData(name: "Dishwashing", selected: false)])
]

sectionedCollectionView.setDataSource(sections: sections)

代理

要获取选中的项,必须实现 SectionedCollectionViewDelegate

extension SectionedCollectionViewController: SectionedCollectionViewDelegate {

    func selectedItems(selected: [Selectable]) {
        //TODO: Implement that you want with the selected items.  
    }

    func limitReached() {
        //TODO: Implement that you want when the limit is reached. 
    }
        
}

示例

要运行示例项目,首先克隆仓库,然后在示例目录中运行 pod install

安装

SectionedCollectionView 通过 CocoaPods 提供。要安装它,只需将以下行添加到您的 Podfile 中

pod 'SectionedCollectionView'

作者

estebanarrua, [email protected]

许可证

SectionedCollectionView受MIT许可证保护。有关更多信息,请参阅LICENSE文件。