SGPagingView（iOS强大的标题滚动视图）

本篇文章介绍的是1.3.5版本

1.3.5集成有如下功能

• 指示器长度自定义
• 指示器遮盖样式
• 指示器固定样式
• 指示器动态样式
• 指示器下划线样式
• 多种指示器滚动样式
• 标题按钮文字渐显效果
• 标题按钮文字缩放效果

先了解下目录结构

看目录主要分为二个部分：

一、SGPageTitleViewConfigure 属于 SGPageTitleView 的配置信息，之因此这样设计还要得益于WKWebView，WKWebView 拥有本身的配置信息；当时在想，把 SGPageTitlView.h 头文件中的部分属性以及 SGPageTitlView.m 中的部分属性，提取出来放到一个配置信息中，在初始化 SGPageTltleView 以前进行信息配置，这样 SGPageTitleView 的可拓展性会比以前更灵活且减小了 SGPageTitlView.h 头文件内的属性，让 SGPageTitlView.h 看起来更清晰明了，因此在1.3.0进行了一次版本升级

二、SGPageContent 里面二个类，分别是针对两种APP加载数据模式进行设计的；其中，SGPageContentView 内部视图采用 UICollectionView 进行包装的，而 SGPageContentScrollView 内部视图采用 UIScrollView 进行包装的；GitHub 中问题及解决方案中针对两种模式数据加载时机作了相应说明以及 Issues 中也对 SGPageContentView 作了少量说明，这里就不介绍了，有兴趣的能够利用闲余时间进行了解昂

SGPagingView 介绍

一、指示器下划线样式

SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
configure.indicatorScrollStyle = SGIndicatorScrollStyleHalf; // 指示器滚动样式，分3种；此处是内容滚动一半时指示器位置改变
configure.titleFont = [UIFont systemFontOfSize:12]; // 标题字号配置，默认 15   
self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleNames configure:configure];
_pageTitleView.selectedIndex = 1; // 选中下标
_pageTitleView.isTitleGradientEffect = NO; // 是否须要标题渐变效果
[self.view addSubview:_pageTitleView];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    // 根据下标重置标题文字内容
    [_pageTitleView resetTitleWithIndex:1 newTitle:@"等待已结束"];
});
复制代码

二、指示器遮盖样式一

NSArray *titleArr = @[@"精选", @"电影", @"电视剧", @"综艺"];
    SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
    configure.titleSelectedColor = [UIColor lightGrayColor];
    configure.indicatorStyle = SGIndicatorStyleCover;
    configure.indicatorColor = [UIColor whiteColor];
    configure.indicatorAdditionalWidth = 25; // 指示器额外增长的长度（标题文字宽度以外的宽度）
    configure.indicatorBorderWidth = 1; // 指示器边框宽度
    configure.indicatorBorderColor = [UIColor lightGrayColor]; // 指示器圆角颜色
    configure.indicatorCornerRadius = 20; // 指示器圆角大小
    configure.indicatorHeight = 25; 
    
    /// pageTitleView
    self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleArr configure:configure];
    [self.view addSubview:_pageTitleView];
复制代码

三、指示器遮盖样式二

NSArray *titleArr = @[@"精选", @"电影", @"OC", @"Swift"];
    SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
    configure.titleSelectedColor = [UIColor whiteColor];
    configure.indicatorStyle = SGIndicatorStyleCover;
    configure.indicatorColor = [UIColor blackColor];
    configure.indicatorAdditionalWidth = 20; // 说明：指示器额外增长的宽度，不设置，指示器宽度为标题文字宽度；若设置无限大，则指示器宽度为按钮宽度
    configure.indicatorCornerRadius = 30; // 说明：遮盖样式下，指示器的圆角大小，若设置的圆角大于指示器高度的 1/2，则指示器的圆角为指示器高度的 1/2
    
    self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleArr configure:configure];
    _pageTitleView.isTitleGradientEffect = NO;
    [self.view addSubview:_pageTitleView];
复制代码

四、指示器遮盖样式三

NSArray *titleArr = @[@"精选", @"电影", @"电视剧", @"综艺", @"NBA", @"娱乐", @"动漫", @"演唱会", @"VIP会员"];
    SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
    configure.titleSelectedColor = [UIColor whiteColor];
    configure.indicatorStyle = SGIndicatorStyleCover;
    configure.indicatorColor = [UIColor blackColor];
    configure.indicatorAdditionalWidth = 100; // 说明：指示器额外增长的宽度，不设置，指示器宽度为标题文字宽度；若设置无限大，则指示器宽度为按钮宽度
    configure.indicatorHeight = 122; // 说明：不设置，遮盖样式下，默认高度为文字高度 + 5；若设置无限大，则高度为 PageTitleView 高度
    
    /// pageTitleView
    self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleArr configure:configure];
    [self.view addSubview:_pageTitleView];
复制代码

五、指示器固定长度样式

NSArray *titleArr = @[@"精选", @"新建", @"QQGroup", @"429899752"];
    SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
    configure.indicatorStyle = SGIndicatorStyleFixed;
    
    self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleArr configure:configure];
    [self.view addSubview:_pageTitleView];
复制代码

六、指示器动态样式

NSArray *titleArr = @[@"精选", @"电影", @"电视剧", @"综艺", @"NBA", @"娱乐", @"动漫", @"演唱会", @"VIP会员"];
    SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
    configure.indicatorStyle = SGIndicatorStyleDynamic; // 动态样式
    configure.spacingBetweenButtons = 35; // 标题之间的间距，默认为 20.f
    
    /// pageTitleView
    self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleArr configure:configure];
    [self.view addSubview:_pageTitleView];
复制代码

七、滚动结束加载内容

NSArray *titleArr = @[@"精选", @"电影", @"OC", @"Swift"];
    SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
    configure.indicatorAdditionalWidth = 20;
    configure.indicatorScrollStyle = SGIndicatorScrollStyleEnd; // 指示器滚动模式
    
    /// pageTitleView
    self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleArr configure:configure];
    _pageTitleView.isTitleGradientEffect = NO;
    [self.view addSubview:_pageTitleView];
复制代码

八、文字缩放样式

九、文字渐显样式

十、最后提供一个小小案例，仅做参考

关于静止样式与滚动样式的区别？

内部会根据标题文字内容以及按钮之间的间距自动识别是静止样式仍是滚动样式；外界无需考虑

详细内容请参考Github介绍

GitHub地址

附言：喜欢的朋友记得点个赞喔