Apple资讯

当前位置: 爱新闻 > 移动互联网

SGPagingView(iOS强大的标题滚动视图)

本篇文章介绍的是1.3.5版本

1.3.5集成有以下功能

  • 指示器长度自定义

  • 指示器遮盖样式

  • 指示器固定样式

  • 指示器动态样式

  • 指示器下划线样式

  • 多种指示器滚动样式

  • 标题按钮文字渐显效果

  • 标题按钮文字缩放效果

先了解下目录结构

1.png

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

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

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

SGPagingView 介绍

1、指示器下划线样式

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

2、指示器遮盖样式一

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

3、指示器遮盖样式二

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

4、指示器遮盖样式三

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

5、指示器固定长度样式

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

6、指示器动态样式

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

7、滚动结束加载内容

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

8、文字缩放样式

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

9、文字渐显样式

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

5d3dd8b7ly1fmoj43sntqg204607ix6p.gif

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

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

详细内容请参考Github介绍

GitHub地址

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

作者:kingsic

链接:https://juejin.im/post/5a4604b5f265da430c122465

热门推荐

回到顶部