美文网首页大神笔记-学习iOS 控件定制UI
QQ音乐、腾讯新闻、网易新闻、今日头条等顶部标题滚动视图

QQ音乐、腾讯新闻、网易新闻、今日头条等顶部标题滚动视图

作者: kingsic | 来源:发表于2017-10-18 17:06 被阅读475次
为什么介绍的是 v1.3.0 版本?

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

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

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

SGPagingView 介绍

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

gif1.gif

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];

下划线样式

gif2.gif

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

下划线样式,滚动完成加载子视图

gif3.gif

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];

下划线滚动样式

gif3.gif

SGPageTitleViewConfigure *configure = [SGPageTitleViewConfigure pageTitleViewConfigure];
configure.indicatorAdditionalWidth = 10;

self.pageTitleView = [SGPageTitleView pageTitleViewWithFrame:frame delegate:self titleNames:titleNames configure:configure];
[self.view addSubview:_pageTitleView];

文字缩放

gif5.gif

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];

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

gif6.gif

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

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

此文展示的只是部分简介;如需了解更多,请参考代码以及 GitHub 介绍

GitHub地址

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

相关文章

网友评论

  • f7ecca1c6a03:多个控制器界面都一样的话如何只创建一个控制器,我看你有多少title都创建多少控制器,那样岂不是很麻烦(原谅我是新手)
    f7ecca1c6a03:@kingsic 楼主你这是有bug的,点击上面的按钮是没有问题的,但是滑动下面的控制器与上面的按钮是不能相对应的
    kingsic:@zllzmq 这只是一个例子而已,如果多个控制器布局一样的话,只需要一个控制器处理就可以了;后台会返回一个type类型的字段,控制器根据这个字段进行数据的展示
  • Wuyd2019:@kingsic 你好,这个可以在滚动条右侧或者左侧添加其他按钮吗?比如今日头条或者网易新闻右侧都有一个“➕”号
    Wuyd2019:@kingsic 加上这个功能困难吗?我想试试,正好需要用到
    Wuyd2019:@kingsic 是只能一次性写全,不能添加和删除吗?
    kingsic:@光芒万丈CL 可以添加➕按钮的,但是目前不支持自定义标题个数,可支持滴滴出行样式
  • 白雪天枫:怎么能设置下面指示条固定长度?
    kingsic:@白雪天枫 标题内容较少时,是自动识别的,后期这个功能会考虑支持的
    白雪天枫:@kingsic 怎么设静止?谢谢
    kingsic:@白雪天枫 静止状态下可设置指示器长度为按钮宽度,滚动状态暂不支持
  • 636ccfc89aac:感谢分享 学习了~
  • JackerooChu:导航栏的这个Demo在iOS11上有点问题,会偏移很多
    JackerooChu:@kingsic 大佬666
    kingsic:已适配了 iOS 11

本文标题:QQ音乐、腾讯新闻、网易新闻、今日头条等顶部标题滚动视图

本文链接:https://www.haomeiwen.com/subject/foqeuxtx.html