之前写过oc版本的筛选界面。最近开发一直在使用swift。再写一个swift版本的筛选。
先上效果图：
图一
效果图二
我们要的效果是，点击第一组，根据内容联动第三组。
第一组，第二组为单选。第三组为多选
好了，简单说一下思路：
首先创建collectionView。再添加collectionView的头部试图和尾部试图。最后开始写筛选逻辑。
上代码：
private lazy var collection: UICollectionView = {
let layout = UICollectionViewFlowLayout.init()
layout.minimumLineSpacing = 12
layout.sectionInset = UIEdgeInsets(top: 12, left: 16, bottom: 1, right: 15)
let collection = UICollectionView.init(frame: CGRect.init(x: SCREEN_WIDTH - CGFloat(collectionWidth), y: 0, width: CGFloat(collectionWidth), height: SCREENH_HEIGHT), collectionViewLayout: layout)
collection.backgroundColor = .white
collection.delegate = self
collection.dataSource = self
collection.alwaysBounceVertical = true
collection.showsVerticalScrollIndicator = true
collection.register(YXScreenCell.self, forCellWithReuseIdentifier: "SwiftCollectionViewCell")
collection.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "SwiftFooterCollectionReusableView")
collection.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "SwiftHeaderCollectionReusableView")
return collection
}()
使用懒加载创建collectionView
这里的代码我直觉使用extension 方式实现代理
extension YXScreenView:UICollectionViewDelegate ,UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if section == 0 {
return self.screenClassModelList.count
}
if section == 1 {
return 2
}
if section == 2 {
return self.screenTowClassModelList.count
}
return 0
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return self.list.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cellString = "SwiftCollectionViewCell"
let cell = collection.dequeueReusableCell(withReuseIdentifier: cellString, for: indexPath) as! YXScreenCell
if list.count > 0 {
let obj = (list[indexPath.section][indexPath.item] as! YXscreenClassModel)
if indexPath.section == 0 {
if scenarioArr.contains(obj) {
cell.buleColorCell()
} else {
cell.originalColorCell()
}
} else if indexPath.section == 1 {
if taskTypeArr.contains(obj) {
cell.buleColorCell()
} else {
cell.originalColorCell()
}
} else if indexPath.section == 2 {
if contentArr.contains(obj) {
cell.buleColorCell()
} else {
cell.originalColorCell()
}
}
cell.classModel = obj
}
return cell
}
//设置 区头和区尾
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
var reusabView = UICollectionReusableView.init()
if kind == UICollectionView.elementKindSectionHeader {
let headerView:UICollectionReusableView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "SwiftHeaderCollectionReusableView", for: indexPath)
for v in headerView.subviews{
v.removeFromSuperview()
}
let heardLab = UILabel.init()
heardLab.font = .systemFont(ofSize: 14)
heardLab.textColor = UIColor.color136
headerView.addSubview(heardLab)
heardLab.snp_makeConstraints { (make) in
make.left.equalTo(16)
make.bottom.equalTo(0)
}
let hearTestArr = ["任务场景","任务类型","任务内容"]
heardLab.text = hearTestArr[indexPath.section]
reusabView = headerView
}
else {
let footerView:UICollectionReusableView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "SwiftFooterCollectionReusableView", for: indexPath)
for v in footerView.subviews{
v.removeFromSuperview()
}
let screenFoot = YXScreenFootView.init()
footerView.addSubview(screenFoot)
screenFoot.snp_makeConstraints { (make) in
make.left.right.top.bottom.equalTo(footerView)
}
screenFoot.delegate = self
reusabView = footerView
}
return reusabView
}//footView是我单独封装出来的一个view。就是图中的 确定，重置按钮，和选择时间的按钮
//尾部高度
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
if section == 2 {
return CGSize(width: collectionWidth, height: 155)
}else{
return CGSize(width: 0, height: 0)
}
}
//头部高度设置
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
if section == 0 {
return CGSize(width: collectionWidth, height: 60)
}else{
return CGSize(width: collectionWidth, height: 44)
}
}
//设置两个cell的左右间距
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 12
}
好了，到这里基本的collectionview试图应该差不多出来了。下面开始写核心的筛选逻辑。
//这是第二组 写死的数组模型
var cellSectionTow: [YXscreenClassModel] = [YXscreenClassModel]()
//第一组section里的几个数据
private var screenOneSectionlList = [YXScrennDataModel]()
//这是第一组下每个taskDetailList里的数组模型
private var oneList = [[YXscreenClassModel]]()
//第一组Section数组模型
private var screenClassModelList = [YXscreenClassModel]()
//第三组section数组模型
private var screenTowClassModelList = [YXscreenClassModel]()
//最终给cell赋值的模型。里面放三组数组模型
var list :[Array] = [Array<Any>]()
前两组为单选，所以我定义了两个index变量：
var indexPathRow: IndexPath? 第一组的indexPatch
var indexPathTow: IndexPath? 第三组的indexPatch
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//之前用indexPatch进行记录，但是这样太麻烦了。换个思路
let cell = collection.cellForItem(at: indexPath) as! YXScreenCell
//通过cell拿到对应的model
let model = cell.classModel as! YXScreenClassModel
if indexPath.section == 0 {
if !scenarioArr.contains(model) { //说明之前点击过了，这次点击的不是同一个cell
scenarioArr.removeAllObjects()
scenarioArr.add(model)
reloadSection(index: indexPath.item)
collection.reloadData()
}
}
if indexPath.section == 1 {//和第一组的方法一样
if !taskTypeArr.contains(model) {
taskTypeArr.removeAllObjects()
taskTypeArr.add(model)
collection.reloadData()
}
}
//多选，这个再次点击相同的是可以取消高亮的。
if indexPath.section == 2 {
if contentArr.contains(model) {
contentArr.remove(model)
} else {
contentArr.add(model)
}
collection.reloadData()
}
//刷新第三组section
func reloadSection(index:Int){
let section3Data: [YXscreenClassModel] = self.oneList[index]
self.screenTowClassModelList.removeAll()
for m in section3Data {
//KNLog(m.name)
let classModel = YXscreenClassModel.init()
classModel.name = m.name
screenTowClassModelList.append(classModel)
}
list.removeLast()
list.insert(screenTowClassModelList, at: 2)
reloadSectionTowData()
contentArr.removeAllObjects()
removeCellArr()
}
//这个是刷新collectionView的方法。必须要用动画方法。否则试图会上下跳。
func reloadSectionTowData(){
UIView.performWithoutAnimation {
let indeS = NSIndexSet.init(index: 2)
collection.reloadSections(indeS as IndexSet)
}
}
#最后cell.classModel 这里模型。用的class方式。
//MARK：筛选
class YXscreenClassModel: HandyJSON {
required init(){
}
//名字
var name: String?
//添加属性是否高亮
var isSelect:Bool? = false
var code: String?
var taskSenceCode:String?
}
写完了，谢谢大家！
