今天继续说仿喵播APP，聊一聊【自定义APP顶部标题滚动条】，用的是YZDisplayViewController，这是袁峥Seemygo大牛写的一个极其轻便简洁的小框架。快速集成App中顶部标题滚动条这是大神介绍YZDisplayViewController的原文。
下面是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源码,需要的可以下载使用。
