之前寫(xiě)過(guò)oc版本的篩選界面。最近開(kāi)發(fā)一直在使用swift。再寫(xiě)一個(gè)swift版本的篩選。
先上效果圖：
圖一
效果圖二
我們要的效果是，點(diǎn)擊第一組，根據(jù)內(nèi)容聯(lián)動(dòng)第三組。
第一組，第二組為單選。第三組為多選
好了，簡(jiǎn)單說(shuō)一下思路：
首先創(chuàng)建collectionView。再添加collectionView的頭部試圖和尾部試圖。最后開(kāi)始寫(xiě)篩選邏輯。
上代碼：
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
}()
使用懶加載創(chuàng)建collectionView
這里的代碼我直覺(jué)使用extension 方式實(shí)現(xiàn)代理
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
}
//設(shè)置 區(qū)頭和區(qū)尾
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 = ["任務(wù)場(chǎng)景","任務(wù)類型","任務(wù)內(nèi)容"]
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是我單獨(dú)封裝出來(lái)的一個(gè)view。就是圖中的 確定，重置按鈕，和選擇時(shí)間的按鈕
//尾部高度
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)
}
}
//頭部高度設(shè)置
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)
}
}
//設(shè)置兩個(gè)cell的左右間距
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 12
}
好了，到這里基本的collectionview試圖應(yīng)該差不多出來(lái)了。下面開(kāi)始寫(xiě)核心的篩選邏輯。
//這是第二組 寫(xiě)死的數(shù)組模型
var cellSectionTow: [YXscreenClassModel] = [YXscreenClassModel]()
//第一組section里的幾個(gè)數(shù)據(jù)
private var screenOneSectionlList = [YXScrennDataModel]()
//這是第一組下每個(gè)taskDetailList里的數(shù)組模型
private var oneList = [[YXscreenClassModel]]()
//第一組Section數(shù)組模型
private var screenClassModelList = [YXscreenClassModel]()
//第三組section數(shù)組模型
private var screenTowClassModelList = [YXscreenClassModel]()
//最終給cell賦值的模型。里面放三組數(shù)組模型
var list :[Array] = [Array<Any>]()
前兩組為單選，所以我定義了兩個(gè)index變量：
var indexPathRow: IndexPath? 第一組的indexPatch
var indexPathTow: IndexPath? 第三組的indexPatch
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//之前用indexPatch進(jìn)行記錄，但是這樣太麻煩了。換個(gè)思路
let cell = collection.cellForItem(at: indexPath) as! YXScreenCell
//通過(guò)cell拿到對(duì)應(yīng)的model
let model = cell.classModel as! YXScreenClassModel
if indexPath.section == 0 {
if !scenarioArr.contains(model) { //說(shuō)明之前點(diǎn)擊過(guò)了，這次點(diǎn)擊的不是同一個(gè)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()
}
}
//多選，這個(gè)再次點(diǎn)擊相同的是可以取消高亮的。
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()
}
//這個(gè)是刷新collectionView的方法。必須要用動(dòng)畫(huà)方法。否則試圖會(huì)上下跳。
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?
}
寫(xiě)完了，謝謝大家！
