SGPagingView（iOS強大的標題滾動視圖）

本篇文章介紹的是1.3.5版本

1.3.5集成有如下功能

• 指示器長度自定義
• 指示器遮蓋樣式
• 指示器固定樣式
• 指示器動態樣式
• 指示器下劃線樣式
• 多種指示器滾動樣式
• 標題按鈕文字漸顯效果
• 標題按鈕文字縮放效果

先了解下目錄結構

看目錄主要分爲二個部分：

一、SGPageTitleViewConfigure 屬於 SGPageTitleView 的配置信息，之因此這樣設計還要得益於WKWebView，WKWebView 擁有本身的配置信息；當時在想，把 SGPageTitlView.h 頭文件中的部分屬性以及 SGPageTitlView.m 中的部分屬性，提取出來放到一個配置信息中，在初始化 SGPageTltleView 以前進行信息配置，這樣 SGPageTitleView 的可拓展性會比以前更靈活且減小了 SGPageTitlView.h 頭文件內的屬性，讓 SGPageTitlView.h 看起來更清晰明瞭，因此在1.3.0進行了一次版本升級

二、SGPageContent 裏面二個類，分別是針對兩種APP加載數據模式進行設計的；其中，SGPageContentView 內部視圖採用 UICollectionView 進行包裝的，而 SGPageContentScrollView 內部視圖採用 UIScrollView 進行包裝的；GitHub 中問題及解決方案中針對兩種模式數據加載時機作了相應說明以及 Issues 中也對 SGPageContentView 作了少量說明，這裏就不介紹了，有興趣的能夠利用閒餘時間進行了解昂

SGPagingView 介紹

一、指示器下劃線樣式

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:@"等待已結束"];
});
複製代碼

二、指示器遮蓋樣式一

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];
複製代碼

三、指示器遮蓋樣式二

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];
複製代碼

四、指示器遮蓋樣式三

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];
複製代碼

五、指示器固定長度樣式

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];
複製代碼

六、指示器動態樣式

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];
複製代碼

七、滾動結束加載內容

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];
複製代碼

八、文字縮放樣式

九、文字漸顯樣式

十、最後提供一個小小案例，僅做參考

關於靜止樣式與滾動樣式的區別？

內部會根據標題文字內容以及按鈕之間的間距自動識別是靜止樣式仍是滾動樣式；外界無需考慮

詳細內容請參考Github介紹

GitHub地址

附言：喜歡的朋友記得點個贊喔