今天繼續(xù)說(shuō)仿喵播APP，聊一聊【自定義APP頂部標(biāo)題滾動(dòng)條】，用的是YZDisplayViewController，這是袁崢Seemygo大牛寫(xiě)的一個(gè)極其輕便簡(jiǎn)潔的小框架。快速集成App中頂部標(biāo)題滾動(dòng)條這是大神介紹YZDisplayViewController的原文。

下面是Gif展示：

頂部標(biāo)題滾動(dòng)效果.gif

@interface JFDisplayViewController : YZDisplayViewController

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

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

// 添加子控制器
- (void)setupAllChildCotroller {
    JFViewController *jfVC = [[JFViewController alloc] init];
    jfVC.title = @"熱門(mén)";
    self.liveStreamVC = [[JFLiveStreamViewController alloc] init];
    _liveStreamVC.title = @"直播拉流測(cè)試";
    UIViewController *temp_2 = [[UIViewController alloc] init];
    temp_2.view.backgroundColor = [UIColor yellowColor];
    temp_2.title = @"關(guān)注";
    
    [self addChildViewController:jfVC];
    [self addChildViewController:_liveStreamVC];
    [self addChildViewController:temp_2];
}

然后運(yùn)行你的項(xiàng)目，就會(huì)看到神奇的效果啦。
作者只是寫(xiě)了幾個(gè)標(biāo)題樣式，如網(wǎng)易新聞，喜馬拉雅，騰訊視頻，今日頭條樣式等。這四種樣式在作者的簡(jiǎn)書(shū)中都有介紹。有時(shí)候這幾個(gè)標(biāo)題展示樣式不足以滿足項(xiàng)目需求，比如上面Gif展示的樣式。

實(shí)際上圖展示的滾動(dòng)標(biāo)題欄，控制器是隱藏了navigationBar,然后修改了源碼中YZNavBarH值為0，然后把標(biāo)題YZTitleScrollViewH背景高度設(shè)置成64，如果不做修改標(biāo)題欄會(huì)顯示在navigationBar下面，也就是YZNavBarH默認(rèn)值為64時(shí)展示的效果。

下面來(lái)具體說(shuō)說(shuō)對(duì)源碼做的修改：

• 在YZDisplayHeader.h中修改

1、修改標(biāo)題欄背景View的起始Y值：YZNavBarH值，默認(rèn)是64；準(zhǔn)確的說(shuō)這個(gè)值指的是標(biāo)題欄也就是導(dǎo)航條的Y值。

// 導(dǎo)航條高度
static CGFloat const YZNavBarH = 64;

2、修改標(biāo)題欄背景View的高度:YZTitleScrollViewH值默認(rèn)是 44，如果想實(shí)現(xiàn)上圖展示的效果，隱藏navigationBar，YZTitleScrollViewH就需要設(shè)置成64。

// 標(biāo)題滾動(dòng)視圖的高度
static CGFloat const YZTitleScrollViewH = 44;

3、修改源碼，自定義標(biāo)題下劃線的長(zhǎng)度，下劃線的Y值和標(biāo)題欄的背景色，下面是我自己填加到源碼YZDisplayHeader.h中的代碼。方便日后使用。因?yàn)樽髡邲](méi)有提供相應(yīng)的接口，所以我就按照作者的代碼風(fēng)格添加 了靜態(tài)常量和宏定義。

/****** JFUnderLineW_additional增加下劃線的長(zhǎng)度******/
static CGFloat const JFUnderLineW_additional = 10;

/****** 改變下劃線的Y值，JFunderLineY_additional值越大下劃線的Y值越小******/
static CGFloat const JFunderLineY_additional = 5;

/****** 改變標(biāo)題label的Y值，jf_labelY值越大，標(biāo)題label的Y值越大******/
static CGFloat const jf_labelY = 8;

/****** 頂部標(biāo)題的背景顏色******/
#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值減去之前自定義的靜態(tài)常量JFunderLineY_additional；將self.underLine.yz_width的值加上之前定義的靜態(tài)常量JFunderLineY_additional。

// 設(shè)置下標(biāo)的位置
- (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;
    
    /***** 項(xiàng)目需要修改了yz_width + 10 ******/
    // 最開(kāi)始不需要?jiǎng)赢?huà)
    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;
    }
    
    // 點(diǎn)擊時(shí)候需要?jiǎng)赢?huà)
    [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;
    }];  
}

如果在標(biāo)題被點(diǎn)擊或滑動(dòng)完成后想做些事情，可以監(jiān)聽(tīng)一下通知：

// 標(biāo)題被點(diǎn)擊或者內(nèi)容滾動(dòng)完成，會(huì)發(fā)出這個(gè)通知，監(jiān)聽(tīng)這個(gè)通知，可以做自己想要做的事情，比如加載數(shù)據(jù)
static NSString * const YZDisplayViewClickOrScrollDidFinshNote = @"YZDisplayViewClickOrScrollDidFinshNote";

如果想在重復(fù)點(diǎn)擊標(biāo)題后做事情，比如刷新數(shù)據(jù)，可以監(jiān)以下通知：

// 重復(fù)點(diǎn)擊通知
static NSString * const YZDisplayViewRepeatClickTitleNote = @"YZDisplayViewRepeatClickTitleNote";

標(biāo)題的字體大小、字體顏色、標(biāo)簽的位子、下劃線長(zhǎng)度、位置；滑動(dòng)時(shí)字體的顏色漸變樣式等，都可以自定義。注意：下滑線和字體縮放不能同時(shí)使用，如果你使用了也會(huì)拋出異常提示。
這里就簡(jiǎn)單的介紹了我的思路，僅供參考。根據(jù)自己的項(xiàng)目需求修改YZDisplayViewController源碼，源碼很簡(jiǎn)單，作者的簡(jiǎn)書(shū)中也介紹的很清楚。今天就先聊這么多！
這里有我修改后的YZDisplayViewController源碼,需要的可以下載使用。