快速集成App中顶部标题滚动条

快速集成App中顶部标题滚动条    http://www.jianshu.com/p/b45655e23a42

字数1069 阅读9443 评论152 喜欢138

Collection/Bookmark/Share for width under 768px

前言

目前越来越多的App都需要顶部标题切换界面效果，并且带有非常炫酷的效果，利用点时间给广大的攻城狮们提供了这样一个框架，集成了当前比较主流的几种效果，网易新闻（字体缩放+颜色渐变），今日头条（颜色填充），喜马拉雅，糗事百科（下标），腾讯视频（蒙版）等。如果喜欢我的文章，可以关注我微博:吖了个峥,也可以来小码哥，了解下我们的iOS培训课程。后续还会更新更多内容。。。

Demo简介:

• 只要修改storyboard中，导航控制器根控制器的类型，就能看到不同的效果。

Demo简介.png

框架使用教程：

• 用法跟UITabBarController一样，完全模仿UITabBarController写的,只要把YZDisplayViewController拖入自己工程即可。
• 1.自定义控制器继承YZDisplayViewController
• 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。
• 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。
• 4.使用注意：如果需要全屏显示，并且添加的子控制器是tableViewController，当有导航控制器或者UITabBarController,需要设置tableView额外滚动区域,详情请看FullChildViewController

实例程序：

1.网易新闻:YZWYViewController

网易新闻.gif

• 1.继承YZDisplayViewController

@interface YZWYViewController : YZDisplayViewController

@end

• 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。

@implementation YZWYViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 添加所有子控制器

    [self setUpAllViewController];

}

@end

• 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。

    // 标题渐变

    self.isShowTitleGradient = YES;

    // 标题RGB渐变模式

    self.titleColorGradientStyle = YZTitleColorGradientStyleRGB;

    self.endR = 1;

    // 字体缩放

    self.isShowTitleScale = YES;

    self.titleScale = 1.3;

2.今日头条:YZJRViewController

今日头条标题渐变.gif

• 1.继承YZDisplayViewController

@interface YZJRViewController : YZDisplayViewController

@end

• 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。

@implementation YZJRViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 添加所有子控制器

    [self setUpAllViewController];

}

@end

• 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。

 // 标题渐变

    self.isShowTitleGradient = YES;

    // 标题填充模式

    self.titleColorGradientStyle = YZTitleColorGradientStyleFill;

3.喜马拉雅:YZXiMaViewController

喜马拉雅全屏展示.gif

• 1.继承YZDisplayViewController

@interface YZXiMaViewController : YZDisplayViewController

@end

• 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。

@implementation YZXiMaViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 添加所有子控制器

    [self setUpAllViewController];

}

@end

• 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。

    // 标题渐变

    self.isShowUnderLine = YES;

    // 标题填充模式

    self.underLineColor = [UIColor redColor];

    // 设置全屏显示

    // 如果有导航控制器或者tabBarController,需要设置tableView额外滚动区域,详情请看FullChildViewController

    self.isfullScreen = YES;

• 4.如果添加的子控制器是tableViewController,给tableView设置底部显示区域

@implementation FullChildViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

// 如果有导航控制器，顶部需要添加额外滚动区域

  // 添加额外滚动区域   导航条高度 + 标题高度

    if (self.navigationController) {

        CGFloat navBarH = self.navigationController.navigationBar.bounds.size.height;

        // 查看自己标题滚动视图设置的高度，我这里设置为44

        CGFloat titleScrollViewH = 44;

        self.tableView.contentInset = UIEdgeInsetsMake(navBarH + titleScrollViewH, 0, 0, 0);

    }

    // 如果有tabBarController，底部需要添加额外滚动区域

//    self.tableView.contentInset = UIEdgeInsetsMake(64 + 44, 0, 49, 0);

}

@end

4.腾讯视频:YZTXViewController

腾讯视频.gif

• 1.继承YZDisplayViewController

@interface YZTXViewController : YZDisplayViewController

@end

• 2.在viewDidLoad中添加标题对应的控制器，并且把标题保存到对应控制器。

@implementation YZTXViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 添加所有子控制器

    [self setUpAllViewController];

}

@end

• 3.设置想要的标题效果，具体查看YZDisplayViewController.h文件，有哪些效果。

     // 标题渐变

    self.isShowTitleGradient = YES;

    self.endR = 1;

    self.endG = 130 / 255.0;

    self.endB = 44 / 255.0;

    // 是否显示遮盖

    self.isShowTitleCover = YES;

    self.coverColor = [UIColor colorWithWhite:0.7 alpha:0.4];

    self.coverCornerRadius = 13;

源码

点击这下载源代码