iOS顶部滚动标题视图

本文是来自Hanymore的投稿

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

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

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

iOS顶部滚动标题视图

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

SGPagingView 介绍

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

iOS顶部滚动标题视图

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、下划线样式

iOS顶部滚动标题视图

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、下划线样式,滚动完成加载子视图

iOS顶部滚动标题视图

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、下划线滚动样式

iOS顶部滚动标题视图

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

5、文字缩放

iOS顶部滚动标题视图

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顶部滚动标题视图

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

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

详细内容请参考Github介绍

简书地址

GitHub地址

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

代码运行环境 Xcode 8;暂时没有进行 Xcode 9 适配处理

PS:如果您想和业内技术大牛交流的话,请加qq群(527933790)或者关注微信公众 号(AskHarries),谢谢!

转载请注明原文出处:Harries Blog™ » iOS顶部滚动标题视图

赞 (0)

分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址