实现主流 App 分类切换滚动视图（Swift） -- JXSegmentedView

要实现的效果图

1.使用cocoapods导入JXSegmentedView

pod JXSegmentedView

//导入头文件
import JXSegmentedView
//遵守协议
class TestViewController: UIViewController,JXSegmentedViewDelegate, JXSegmentedListContainerViewDataSource { }

2.控件懒加载，看代码

标题下面的横线

 lazy var sliderView: JXSegmentedIndicatorLineView = {
        let view = JXSegmentedIndicatorLineView()
        view.indicatorColor = RGBCOLOR(r: 253, g: 44, b: 85)//横线颜色
        view.indicatorWidth = 25 //横线宽度
        view.indicatorHeight = 3 //横线高度
        view.verticalOffset = 5 //垂直方向偏移
        return view
 }()

标题数据源

 lazy var dataSource: JXSegmentedNumberDataSource = {
        let ds = JXSegmentedNumberDataSource()
        ds.titles = ["全部","待付款","待发货","待收货","待评价"]
        ds.numbers = [0,0,0,0,0]//每个标题上的数字
        ds.titleNormalColor = RGBCOLOR(r: 104, g: 104, b: 104)//正常状态下标题文字颜色
        ds.titleSelectedColor = UIColor.black//选中状态下的标题文字颜色
        return ds
 }()

下面的视图容器

 lazy var listContainerView: JXSegmentedListContainerView = {
       let lv = JXSegmentedListContainerView(dataSource: self)
       lv.frame = CGRect(x: 0, y: kNavBarAndStatusBarHeight + 50, width: kScreenWidth, height: kScreenHeight - kNavBarAndStatusBarHeight - 50 - kBottomSafeAreaHeight)
       return lv
 }()

标题控件

 lazy var segmentedView: JXSegmentedView = {
        let sv = JXSegmentedView(frame: CGRect(x: 0, y: kNavBarAndStatusBarHeight, width: kScreenWidth, height: 50))
        sv.backgroundColor = UIColor.white //背景色
        sv.dataSource = dataSource //数据源
        sv.listContainer = listContainerView //视图容器
        sv.indicators = [sliderView] //标题下的横线
        sv.delegate = self //设置代理
        return sv
 }()

创建5个子视图控件 ，可以自定义每个view ，在view中创建样式和网络请求，或者做一些数据处理

    ///全部
    lazy var allView: UIView = {
        let view = UIView.init(frame: CGRect(x: 0, y: 0, width: kScreenWidth, height: kScreenHeight - kNavBarAndStatusBarHeight - 50 - kBottomSafeAreaHeight))
         return view
    }()
    ///待付款
    lazy var waitingPayView: UIView = {
        let view = UIView.init(frame: CGRect(x: 0, y: 0, width: kScreenWidth, height: kScreenHeight - kNavBarAndStatusBarHeight - 50 - kBottomSafeAreaHeight))
      return view
    }()
    //待发货
    lazy var waitingDeliveryView: UIView = {
        let view = UIView.init(frame: CGRect(x: 0, y: 0, width: kScreenWidth, height: kScreenHeight - kNavBarAndStatusBarHeight - 50 - kBottomSafeAreaHeight))
       return view
    }()
    //待收货
    lazy var waitingTakeGoodsView: UIView = {
        let view = UIView.init(frame: CGRect(x: 0, y: 0, width: kScreenWidth, height: kScreenHeight - kNavBarAndStatusBarHeight - 50 - kBottomSafeAreaHeight))
        return view
    }()
    //待评价
    lazy var waitingCommentView: UIView = {
        let view = UIView.init(frame: CGRect(x: 0, y: 0, width: kScreenWidth, height: kScreenHeight - kNavBarAndStatusBarHeight - 50 - kBottomSafeAreaHeight))
       return view
    }()

3.添加到控制器的视图上

   view.addSubview(segmentedView)
   view.addSubview(listContainerView)

4.代理方法

 //MARK: JXSegmentedViewDelegate
    //点击标题 或者左右滑动都会走这个代理方法
    func segmentedView(_ segmentedView: JXSegmentedView, didSelectedItemAt index: Int) {
        //这里处理左右滑动或者点击标题的事件 
        
    }
    //MARK:JXSegmentedListContainerViewDataSource
    func numberOfLists(in listContainerView: JXSegmentedListContainerView) -> Int {
        5 //跟标题数量一致
    }
    
    func listContainerView(_ listContainerView: JXSegmentedListContainerView, initListAt index: Int) -> JXSegmentedListContainerViewListDelegate {
        if index == 0 {
            return allView
        }
        else if index == 1 {
            return waitingPayView
        }
        else if index == 2 {
            return waitingDeliveryView
        }
        else if index == 3 {
            return waitingTakeGoodsView
        }
        else {
            return waitingCommentView
        }
    }

JXSegmentedView 功能强大，样式丰富，类似该功能都可以使用此框架