转载

iOS顶部滚动标题视图

本文是来自Hanymore的投稿

为什么介绍的是 v1.3.0 版本？

此次版本相对之前的版本是一次版本升级变化，API 的可拓展性更高，主要是开放了按钮之间的间距自定义，指示器长度自定义，标题文字大小自定义；之前的版本都是写在内部，外界是无法修改的，限制其拓展性；为什么会这样？因为，内部控件是在初始化方法中创建的，一些属性已经被限制死了；当时考虑过这个问题，但并没有去做修改，此次版本升级是因为 SGPagingView 已经有一年的时间了，且代码的稳定性较高，功能也是在大家的反馈中不断完善

与之前的版本有什么不同？先看一下结构图

本次升级添加了 SGPageTitleViewConfigure 类；为什么这么做？就是前面提到部分属性是 SGPageTitlView.m 内部属性，外界是无法修改的，限制了 SGPagingView 拓展性；为什么添加 SGPageTitleViewConfigure 类？这个还要得益于 WKWebView，WKWebView 拥有自己的配置信息；当时在想，把 SGPageTitlView.h 头文件中的部分属性以及 SGPageTitlView.m 中的部分属性，提取出来放到一个配置信息中，在初始化 SGPageTltleView 之前进行信息配置，这样 SGPageTitleView 的可拓展性会比之前更灵活且减少了 SGPageTitlView.h 头文件内的属性，让 SGPageTitlView.h 看起来更清晰明了，所以进行了一次版本升级

SGPagingView 介绍

1、遮盖样式，此次版本才支持

SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
configure.titleSelectedColor = [UIColor whiteColor];
configure.indicatorStyle = SGIndicatorStyleCover; // 指示器样式，默认下划线样式
configure.indicatorColor = [UIColor blackColor]; // 指示器颜色
configure.indicatorAdditionalWidth = 20; // 说明：指示器额外增加的宽度，默认为0；如若不设置，指示器宽度为标题文字宽度；若设置无限大，则指示器宽度为按钮宽度
configure.indicatorCornerRadius = 30; // 说明：指示器的圆角属性，默认为0，遮盖样才会起作用；若设置的圆角大于指示器高度的1/2，则指示器的圆角大小为指示器高度的1/2
self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleNames configure:configure];
[self.view addSubview:_pageTitleView];

2、下划线样式

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:@"等待已结束"];
});

3、下划线样式，滚动完成加载子视图

NSArray *titleNames = @[@"精选", @"电影", @"OC", @"Swift"];
SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
configure.indicatorAdditionalWidth = 120; // 这里的指示器额外增加的宽度随便设置的，大于按钮的宽度，内部会处理为按钮的宽度的
configure.indicatorScrollStyle = SGIndicatorScrollStyleEnd; // 前面已经介绍过了，指示器滚动样式，此处是内容滚动结束时指示器位置改变
self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames: titleNames configure:configure];
_pageTitleView.isTitleGradientEffect = NO;
[self.view addSubview:_pageTitleView];
// 这里要介绍一下，看到目录结构里面 SGPageContent 分为  SGPageContentView 和 SGPageContentScrollView；SGPageContentView 内部是 UICollectionView 实现的，而 SGPageContentScrollView 内部是 UIScrollView 实现的，是视图加载完成之后加载子视图的。具体区别可以查看源码
self.pageContentScrollView = [[SGPageContentScrollView alloc] initWithFrame:frame parentVC:self childVCs:childVCs];
_pageContentScrollView.delegatePageContentScrollView = self;
[self.view addSubview:_pageContentScrollView];

4、下划线滚动样式

SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
configure.indicatorAdditionalWidth = 10;
self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleNames configure:configure];
[self.view addSubview:_pageTitleView];

5、文字缩放

SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleNames configure:configure];
_pageTitleView.isShowIndicator = NO; // 是否显示指示器，默认为 YES
_pageTitleView.isOpenTitleTextZoom = YES; // 是否打开标题文字缩放，默认为 NO
[self.view addSubview:_pageTitleView];

最后提供一个小小案例，仅作参考

iOS顶部滚动标题视图