Swift swift

MCPageViewController

2019-06-24  本文已影响11人  Mccc_

写在前面

功能说明

效果预览图

功能展示 分类栏在导航条上 滑动悬停 滑动悬停

如何使用?

pod 'MCPageViewController'

使用说明

1.创建分类栏和内容栏
    /// 分类条
    lazy var categoryBar: MCCategoryBar = {
        let view = MCCategoryBar()
        view.delegate = self
        return view
    }()
    
    /// 内容容器
    lazy var containerView: MCContainerView = {
        let view = MCContainerView()
        view.delegate = self
        return view
    }()
2. 配置属性
    func loadPageViewController() {
        
        let config = MCPageConfig()
        
        config.viewControllers = vcArray
        config.categoryModels = modelArray
        config.defaultIndex = 0
        config.category.maxTitleCount = 10
        
        
        categoryBar.initCategoryBarWithConfig(config)
        containerView.initContainerViewWithConfig(config)
    }

loadPageViewController方法一定要在约束布局之前执行

3.设置约束
    override func initUI() {

        view.addSubview(categoryBar)
        categoryBar.snp.remakeConstraints { (make) ->Void in
            make.left.right.top.equalTo(view)
            make.height.equalTo(40)
        }
        
        view.addSubview(containerView)
        containerView.snp.remakeConstraints { (make) ->Void in
            make.left.right.bottom.equalTo(view)
            make.top.equalTo(categoryBar.snp.bottom)
        }
    }

4.实现分类栏和内容栏的协议 (复制即可)
extension MCBasicUseViewController: MCCategoryBarDelegate {
    func categoryBar(categoryBar: MCCategoryBar, didSelectItemAt index: Int) {
        containerView.containerViewScrollToSubViewController(subIndex: index)
    }
}

extension MCBasicUseViewController: MCContainerViewDelegate {
    func containerView(_ containerView: MCContainerView, didScrollToIndex index: Int) {
        categoryBar.categoryBarDidClickItem(at: index)
    }
}

MCPageConfig配置说明

    /**
     * 标题文字数据源
     * 数组个数必须和vcs个数一致
     */
    public var categoryModels: [MCCategoryBarModel] = [MCCategoryBarModel]()
    /**
     * 视图控制器数据源
     * 数组个数必须和titles个数一致
     */
    public var viewControllers: [UIViewController] = [UIViewController]()
    
    
    /**
     * 默认选中的分类下标
     * 默认第0页
     */
    public var defaultIndex : Int = 0

    /** 对分类栏的设置 */
    public var category = CategoryStruct.init()

    /** 对指示器的设置 */
    public var indicator = IndicatorStruct.init()

    /** 对分割线的设置 */
    public var separator = SeparatorStruct.init()
/// 对分类条的设置
public struct CategoryStruct {

    /// 分类名字最长显示字数
    public var maxTitleCount: Int = Int.max
    
    /// 未选中的字体颜色
    public var normalColor: UIColor = UIColor.MCPage_gray
    /// 选中的字体颜色
    public var selectedColor: UIColor = UIColor.MCPage_red
    
    /// 标题块的未选中字体大小
    public var normalFont : UIFont = UIFont.systemFont(ofSize: 15)
    /// 标题块的选中字体大小
    public var selectFont : UIFont = UIFont.boldSystemFont(ofSize: 16)
    
    
    /// 分类元素的宽度 (默认为0即根据文字长度自适应,如果设置大于0的值,就固定宽度)
    public var itemWidth: CGFloat = 0
    
    /// 给categoryItem额外加的宽度。 实际一个categoryItem的宽度 = 文字宽度 + categoryItemExtendWidth (仅在itemWidth<=0的时候有效)
    public var itemExtendWidth: CGFloat = 10

    /// 标题栏的背景颜色
    public var barBackgroundColor : UIColor = UIColor.white
    /// 标题块的背景颜色
    public var itemBackgroundColor : UIColor = UIColor.white
    
    
    /// 分类之间的距离 (collectionView的minimumInteritemSpacing)
    public var itemSpacing: CGFloat = 0
    
    /// 分类的边距 (collectionView的sectionInset)
    public var  inset: (left: CGFloat, right: CGFloat) = (0, 0)
}
/// 分割线的处理
public struct SeparatorStruct {
    
    public var backgroundColor = UIColor.lightGray
    public var height: CGFloat = 0.5
    /// 是否隐藏分割线
    public var isHidden: Bool = false
}
/// 对指示器的设置
public struct IndicatorStruct {
    
    /// 是否隐藏指示器
    public var isHidden = false
    /// 指示器的背景颜色
    public var backgroundColor = UIColor.red
    /// 指示器的高度
    public var height: CGFloat = 2
    /// 指示器的宽度 如果设置了width,Indicator的宽即为width.如果不设置即为自适应文字宽度
    public var width: CGFloat = 0

    /// 指示器的圆角
    public var cornerRadius: CGFloat = 1
}

更多的详细使用方案请下载demo示例功能。

联系Author

QQ群: 316879774

参考文献

特此感谢

上一篇下一篇

猜你喜欢

热点阅读