iOS快速自定义APP顶部标题滚动条

今天继续说仿喵播APP，聊一聊【自定义APP顶部标题滚动条】，用的是YZDisplayViewController，这是袁峥Seemygo大牛写的一个极其轻便简洁的小框架。快速集成App中顶部标题滚动条这是大神介绍YZDisplayViewController的原文。

下面是Gif展示：

顶部标题滚动效果.gif
现在来说说具体的使用：
1、去Github下载YZDisplayViewController解压打开�YZDisplayViewController-master文件夹，将其中的�YZDisplayViewController文件夹直接拖入你的项目中。
2、新建一个控制器，继承自YZDisplayerViewController

@interface JFDisplayViewController : YZDisplayViewController

3、添加你所需要的子控制器

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupAllChildCotroller];
}

// 添加子控制器
- (void)setupAllChildCotroller {
    JFViewController *jfVC = [[JFViewController alloc] init];
    jfVC.title = @"热门";
    self.liveStreamVC = [[JFLiveStreamViewController alloc] init];
    _liveStreamVC.title = @"直播拉流测试";
    UIViewController *temp_2 = [[UIViewController alloc] init];
    temp_2.view.backgroundColor = [UIColor yellowColor];
    temp_2.title = @"关注";
    
    [self addChildViewController:jfVC];
    [self addChildViewController:_liveStreamVC];
    [self addChildViewController:temp_2];
}

然后运行你的项目，就会看到神奇的效果啦。
作者只是写了几个标题样式，如网易新闻，喜马拉雅，腾讯视频，今日头条样式等。这四种样式在作者的简书中都有介绍。有时候这几个标题展示样式不足以满足项目需求，比如上面Gif展示的样式。

实际上图展示的滚动标题栏，控制器是隐藏了navigationBar,然后修改了源码中YZNavBarH值为0，然后把标题YZTitleScrollViewH背景高度设置成64，如果不做修改标题栏会显示在navigationBar下面，也就是YZNavBarH默认值为64时展示的效果。

下面来具体说说对源码做的修改：

• 在YZDisplayHeader.h中修改

1、修改标题栏背景View的起始Y值：YZNavBarH值，默认是64；准确的说这个值指的是标题栏也就是导航条的Y值。

// 导航条高度
static CGFloat const YZNavBarH = 64;

2、修改标题栏背景View的高度:YZTitleScrollViewH值默认是 44，如果想实现上图展示的效果，隐藏navigationBar，YZTitleScrollViewH就需要设置成64。

// 标题滚动视图的高度
static CGFloat const YZTitleScrollViewH = 44;

3、修改源码，自定义标题下划线的长度，下划线的Y值和标题栏的背景色，下面是我自己填加到源码YZDisplayHeader.h中的代码。方便日后使用。因为作者没有提供相应的接口，所以我就按照作者的代码风格添加 了静态常量和宏定义。

/****** JFUnderLineW_additional增加下划线的长度******/
static CGFloat const JFUnderLineW_additional = 10;

/****** 改变下划线的Y值，JFunderLineY_additional值越大下划线的Y值越小******/
static CGFloat const JFunderLineY_additional = 5;

/****** 改变标题label的Y值，jf_labelY值越大，标题label的Y值越大******/
static CGFloat const jf_labelY = 8;

/****** 顶部标题的背景颜色******/
#define JFRGBColor [UIColor colorWithRed:(253)/255.0 green:(95)/255.0 blue:(153)/255.0 alpha:1.0]

4、修改YZDisplayViewController.m文件源码：
看下面修改后的代码，将self.underLine.yz_y值减去之前自定义的静态常量JFunderLineY_additional；将self.underLine.yz_width的值加上之前定义的静态常量JFunderLineY_additional。

// 设置下标的位置
- (void)setUpUnderLine:(UILabel *)label
{
    // 获取文字尺寸
    CGRect titleBounds = [label.text boundingRectWithSize:CGSizeMake(MAXFLOAT, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:self.titleFont} context:nil];
    
    CGFloat underLineH = _underLineH?_underLineH:YZUnderLineH;
    self.underLine.yz_y = label.yz_height - underLineH - JFunderLineY_additional;
    self.underLine.yz_height = underLineH;
    
    /***** 项目需要修改了yz_width + 10 ******/
    // 最开始不需要动画
    if (self.underLine.yz_x == 0) {
        if (_isUnderLineEqualTitleWidth) {
            self.underLine.yz_width = titleBounds.size.width + JFUnderLineW_additional;
        } else {
            self.underLine.yz_width = label.yz_width + JFUnderLineW_additional;
        }
        self.underLine.yz_centerX = label.yz_centerX;
        return;
    }
    
    // 点击时候需要动画
    [UIView animateWithDuration:0.25 animations:^{
        if (_isUnderLineEqualTitleWidth) {
            self.underLine.yz_width = titleBounds.size.width + JFUnderLineW_additional;
        } else {
            self.underLine.yz_width = label.yz_width + JFUnderLineW_additional;
        }
        self.underLine.yz_centerX = label.yz_centerX;
    }];  
}

如果在标题被点击或滑动完成后想做些事情，可以监听一下通知：

// 标题被点击或者内容滚动完成，会发出这个通知，监听这个通知，可以做自己想要做的事情，比如加载数据
static NSString * const YZDisplayViewClickOrScrollDidFinshNote = @"YZDisplayViewClickOrScrollDidFinshNote";

如果想在重复点击标题后做事情，比如刷新数据，可以监以下通知：

// 重复点击通知
static NSString * const YZDisplayViewRepeatClickTitleNote = @"YZDisplayViewRepeatClickTitleNote";

标题的字体大小、字体颜色、标签的位子、下划线长度、位置；滑动时字体的颜色渐变样式等，都可以自定义。注意：下滑线和字体缩放不能同时使用，如果你使用了也会抛出异常提示。
这里就简单的介绍了我的思路，仅供参考。根据自己的项目需求修改YZDisplayViewController源码，源码很简单，作者的简书中也介绍的很清楚。今天就先聊这么多！
这里有我修改后的YZDisplayViewController源码,需要的可以下载使用。