【Swift4.2】筛选面板

相信你们在开发中都遇到过这样的界面吧

我们如何在这样的一个界面添加筛选面板才能更舒适一些呢！代码如下

筛选面板控制器的代码

//
//  SearchConditionViewController.swift
//  OPSHelper
//
//  Created by Tony on 2019/4/30.
//  Copyright © 2019年 SDYSJ. All rights reserved.
//

import UIKit
protocol SearchConditionViewControllerDelegate : NSObjectProtocol {
    
    /// 将要显示
    func willShowConditionView()
    /// 将要隐藏
    func willHideConditionView()
    /// 搜索结果
    func searchConditionFilter(carFilter :CarFilter, type : CarFilterType)
}


class SearchConditionViewController: BaseViewController {
    /// 各选项的子ViewController隐藏时是否释放该ViewController
    var deallocSubVCAfterHide : Bool!
    /// 条件隐藏
    var conditionHidden : Bool!
    /// 按钮容器
    var btnContainer : UIView!
    /// 筛选的按钮
    let branchesButton = UIButton()
    /// 排序按钮
    let sortButton = UIButton()
    /// 过滤条件view容器
    let containerView = UIView()
    /// 灰色蒙层
    let maskView = UIView()
    /// 排序控制器
    var sortViewController : SortViewController?
    /// 筛选
    var branchesViewController : BranchesViewController?
    
    /// 按钮
    var conditionButtons = [UIButton]()
    /// 过滤器
    var carFilter : CarFilter!
    weak var delegate : SearchConditionViewControllerDelegate?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.clear
        deallocSubVCAfterHide = true;
        conditionHidden = true;
        creatMaskView()
        creatBtn()
    }
    
    func creatBtn(){
        btnContainer = UIView()
        btnContainer.backgroundColor = UIColor.white
        self.view.addSubview(btnContainer)
        btnContainer.snp.makeConstraints { (make) in
            make.left.equalTo(0)
            make.right.equalTo(0)
            make.top.equalTo(0)
            make.height.equalTo(40)
        }
        
        //添加排序按钮;
        btnContainer.addSubview(branchesButton)
        branchesButton.snp.makeConstraints { (make) in
            make.right.equalTo(-(UIScreen.main.bounds.size.width - 100)/4.0)
            make.top.equalTo(5)
            make.bottom.equalTo(-5)
            make.width.equalTo(50)
        }
        branchesButton.backgroundColor = UIColor.white
        branchesButton.isSelected = false
        branchesButton.setTitle("筛选", for: UIControl.State.normal)
        branchesButton.setImage(BaseImage(named: "fszc_braches_ arrow_up@2x.png")?.image, for: UIControl.State.normal)
        branchesButton.setImage(BaseImage(named: "fszc_braches_ arrow_down@2x.png")?.image, for: UIControl.State.selected)
        branchesButton.titleLabel?.font = UIConfigure.Font15
        branchesButton.setTitleColor(UIColor.black, for: .normal)
        branchesButton.setHorizontalLabelLeft(7)
        branchesButton.addTarget(self, action: #selector(branchesButton(sender:)), for: UIControl.Event.touchUpInside)
        ///排序以及筛选之间的竖线
        let verticalLine = UIView()
        btnContainer.addSubview(verticalLine)
        verticalLine.snp.makeConstraints { (make) in
            make.right.equalTo(branchesButton.snp.left).offset(-(UIScreen.main.bounds.size.width - 100)/4.0)
            make.width.equalTo(0.5)
            make.bottom.equalTo(-10)
            make.top.equalTo(10)
        }
        verticalLine.backgroundColor = UIConfigure.LineGrayColor
        
        ///添加筛选按钮
        btnContainer.addSubview(sortButton)
        sortButton.snp.makeConstraints { (make) in
            make.right.equalTo(verticalLine.snp.left).offset(-(UIScreen.main.bounds.size.width - 100)/4.0)
            make.top.equalTo(5)
            make.bottom.equalTo(-5)
            make.width.equalTo(90)
        }
        sortButton.backgroundColor = UIColor.white
        sortButton.setTitle("综合排序", for: UIControl.State.normal)
        sortButton.setImage(BaseImage(named: "fszc_braches_ arrow_up@2x.png")?.image, for: UIControl.State.normal)
        sortButton.setImage(BaseImage(named: "fszc_braches_ arrow_down@2x.png")?.image, for: UIControl.State.selected)
        sortButton.setTitleColor(UIColor.black, for: UIControl.State.normal)
        sortButton.titleLabel?.font = UIConfigure.Font15
        sortButton.setHorizontalLabelLeft(5)
        sortButton.isSelected = false
        sortButton.addTarget(self, action: #selector(sortbuttonClick(sender:)), for: UIControl.Event.touchUpInside)
        ///添加筛选排序按钮最下面的线
        let branchesBottomLine = UIView()
        btnContainer.addSubview(branchesBottomLine)
        branchesBottomLine.snp.makeConstraints { (make) -> Void in
            make.right.equalTo(0)
            make.left.equalTo(0)
            make.bottom.equalTo(0)
            make.height.equalTo(0.5)
        }
        branchesBottomLine.backgroundColor = UIConfigure.LineGrayColor
        
        conditionButtons.addElements(branchesButton)
        conditionButtons.addElements(sortButton)
        setUpButtonUI()
    }
    
    func creatMaskView(){
        self.view.addSubview(containerView)
        containerView.backgroundColor = UIColor.clear
        containerView.frame = self.view.bounds
        containerView.frame.origin.y = 40
//        containerView.snp.makeConstraints { (make) in
//            make.left.equalTo(0)
//            make.top.equalTo(40)
//            make.right.equalTo(0)
//            make.bottom.equalTo(0)
//        }
        
        containerView.addSubview(maskView)
        maskView.isHidden = true
        maskView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
        maskView.frame = containerView.bounds
//        maskView.snp.makeConstraints { (make) in
//            make.left.equalTo(0)
//            make.right.equalTo(0)
//            make.top.equalTo(0)
//            make.bottom.equalTo(0)
//        }
        
        let gestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(tapedMaskView))
        maskView.addGestureRecognizer(gestureRecognizer)
    }
    
    ///筛选按钮的点击事件
   @objc func branchesButton(sender:UIButton){
     clickonButton(button: sender, viewController: self.branchesViewController1(), animated: true)
    }
    ///排序按钮的点击事件
   @objc func sortbuttonClick(sender:UIButton){
    
    clickonButton(button: sender, viewController: self.sortViewController1(), animated: true)
    
    
    }
    
   /// 点击遮罩层
   @objc func tapedMaskView(){
    clickonButton(button: nil, viewController: nil, animated: true)
    }
    
    
    /// 统一处理点击事件的地方
    ///
    /// - Parameters:
    ///   - button: 按钮
    ///   - viewController: 控制器
    func clickonButton(button: UIButton?,viewController:UIViewController?,animated:Bool){
        let hidden = hiddenForConditionView(view: viewController?.view)
        for vc in self.children {
            if vc == viewController || hiddenForConditionView(view: vc.view){
                continue
            }
            if deallocSubVCAfterHide {
                setConditionView(view: vc.view, hidden: true, animated: true) {[weak self] in
                    self?.removeViewController(viewController: vc)
                }
            }else{
                setConditionView(view: vc.view, hidden: true, animated: true, finish: nil)
            }
        }
        
        for btn in self.conditionButtons {
            if (btn == button) {
                continue;
            }
            btn.isSelected = false;
        }
        
        if button != nil && viewController != nil {
            if deallocSubVCAfterHide {
                setConditionView(view: viewController!.view, hidden: !hidden, animated: animated) { [weak self] in
                    if (!hidden) {
                        self?.removeViewController(viewController: viewController)
                    }
                }
            }else{
                setConditionView(view: viewController!.view, hidden: !hidden, animated: animated, finish: nil)
            }
            button!.isSelected = hidden;
        }
    }
    
    /// 动画
    ///
    /// - Parameters:
    ///   - view: 筛选视图
    ///   - hidden: 显示还是隐藏
    ///   - animated: 是否需要动画
    ///   - finish: 动作完成后的回调
    func setConditionView(view : UIView , hidden:Bool, animated:Bool, finish:(()->())?){
        
        if hidden {
            if animated {
                UIView.animate(withDuration: 0.2, animations: {
                    view.frame.origin.y = -(view.frame.size.height)
                    self.maskView.alpha = 0
                    self.hideConditionView()
                }) { (finished) in
                    view.isHidden = true
                    
                    if ((finish) != nil){
                        finish!()
                    }
                }
            }else{
                view.frame.origin.y = -(view.frame.size.height)
                view.isHidden = true
                hideConditionView()
                if ((finish) != nil){
                    finish!()
                }
            }
            conditionHidden = true
            
        }else{
            view.isHidden = false
            showConditionView()
            if(animated){
                view.frame.origin.y = -(view.frame.size.height)
                self.maskView.alpha = 0
                UIView.animate(withDuration: 0.2) {
                    view.frame.origin.y = 0
                    self.maskView.alpha = 0.5;
                }
            }else{
                view.frame.origin.y = 0
                self.maskView.alpha = 0.5;
            }
            conditionHidden = false
        }
        
    }
    
    
    /// 删除子控制器
    ///
    /// - Parameter viewController: 子控制器
    func removeViewController(viewController: UIViewController?){
        
        if (viewController == nil){
            return
        }
        
        viewController?.willMove(toParent: nil)
        viewController?.view.removeFromSuperview()
        viewController?.removeFromParent()
        
        if (sortViewController != nil) && viewController == sortViewController {
            sortViewController = nil
        }
        
        if (branchesViewController != nil) && viewController == branchesViewController {
            branchesViewController = nil
        }
    }
    
    /// 判断当前视图是显示还是隐藏
    ///
    /// - Parameter view: 筛选视图
    /// - Returns: bool
    func hiddenForConditionView(view :UIView?) -> Bool{
        if view?.frame.origin.y == 0 {
            return false
        }
        return true
    }

    /// 显示下拉条件视图及遮罩视图
    func showConditionView(){
        if let dele = self.delegate {
            dele.willShowConditionView()
        }
        maskView.isHidden = false
    }
    
    /// 隐藏下拉条件视图及遮罩视图
    func hideConditionView(){
        if let dele = self.delegate {
            dele.willHideConditionView()
        }
        maskView.isHidden = true
    }
    
    /// 修改按钮
    func setUpButtonUI(){
        setSortButtonTitleWith(sortType: self.carFilter.sortType.rawValue)
    }
    /// 修改排序title
    func setSortButtonTitleWith(sortType: Int){
        var name = ""
        if sortType == 0 {
            name = "综合排序"
        }else if sortType == 2{
            name = "由近到远"
        }else if sortType == 1{
            name = "由远到近"
        }
//        let model = APPConfigNoCache.getInstance().spotSortTypeDictionary[sortType]
        self.sortButton.setTitle(name, for: UIControl.State.normal)
    }
}


extension SearchConditionViewController{
    /// 排序
    ///
    /// - Returns: SortViewController
    func sortViewController1() ->SortViewController {
        
        let sortArray = APPConfigNoCache.getInstance().spotSortTypes
        if (sortViewController == nil){
            let sortVC = SortViewController()
            sortVC.carFilter = CarFilter.standard
            sortVC.view.frame = containerView.bounds
            sortVC.view.frame.size.height = CGFloat((sortArray?.count)! * 60)
            sortVC.view.frame.origin.y = -(sortVC.view.frame.size.height)
             self.addChild(sortVC)
            self.containerView.addSubview(sortVC.view)
            sortVC.didMove(toParent: self)
            sortViewController = sortVC
            
            sortViewController?.selectedSortTypeBlock = { [weak self](carFilter) in
                self?.clickonButton(button: self?.sortButton, viewController:
                self?.sortViewController1(), animated: true)
                self?.setUpButtonUI()
                
                if let delaget = self?.delegate {
                    delaget.searchConditionFilter(carFilter:carFilter , type: CarFilterType.SpotFilterTypeSort)
                }
            }
            
        }
        return sortViewController!
    }
    
    /// 筛选
    func branchesViewController1() -> BranchesViewController{
        if branchesViewController == nil {
            let sortVC = BranchesViewController()
            sortVC.carFilter = CarFilter.standard
            sortVC.view.frame = containerView.bounds
            sortVC.view.frame.size.height = 75
            sortVC.view.frame.origin.y = -(sortVC.view.frame.size.height)
            self.addChild(sortVC)
            self.containerView.addSubview(sortVC.view)
            sortVC.didMove(toParent: self)
            branchesViewController = sortVC
            
            branchesViewController?.selectedSortTypeBlock = { [weak self](carFilter) in
                self?.clickonButton(button: self?.branchesButton, viewController:
                    self?.branchesViewController1(), animated: true)
                if let delaget = self?.delegate {
                    delaget.searchConditionFilter(carFilter:carFilter , type: CarFilterType.SpotFilterTypeSort)
                }
            }
        }
        
        return branchesViewController!
    }

}

引用筛选面板的控制器代码

    /// 添加筛选视图
    func addSearchConditionVC(){
        conditionViewController = SearchConditionViewController()
        conditionViewController.delegate = self
        conditionViewController.carFilter = carFilter
        let navHeight = UIScreen.main.bounds.size.height >= 812 ? CGFloat(88) : CGFloat(64)
        conditionViewController.view.frame = CGRect(x: 0, y: navHeight, width: self.view.frame.size.width, height: 40)
        self.addChild(conditionViewController)
        self.view.addSubview(conditionViewController.view)
        conditionViewController.didMove(toParent: self)
        self.view.insertSubview(conditionViewController.view, belowSubview: navBgview)
    
    }
        /// 显示下拉条件视图及遮罩视图 --SearchConditionViewControllerDelegate
    func willShowConditionView() {
        let navHeight = UIScreen.main.bounds.size.height >= 812 ? CGFloat(88) : CGFloat(64)
        let viewHeight = UIConfigure.Height - navHeight
        conditionViewController.view.frame.size.height = viewHeight
    }
    
    /// 隐藏下拉条件视图及遮罩视图 -- SearchConditionViewControllerDelegate
    func willHideConditionView() {
        conditionViewController.view.frame.size.height = 40
    }
    
    func searchConditionFilter(carFilter: CarFilter, type: CarFilterType) {
        page = 1
        loadData()
        myTableView.mj_footer.resetNoMoreData()
    }