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

kingsic發表於2018-01-02

本篇文章介紹的是1.3.5版本

1.3.5整合有以下功能

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

先了解下目錄結構

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

1、SGPageTitleViewConfigure 屬於 SGPageTitleView 的配置資訊，之所以這樣設計還要得益於WKWebView，WKWebView 擁有自己的配置資訊；當時在想，把 SGPageTitlView.h 標頭檔案中的部分屬性以及 SGPageTitlView.m 中的部分屬性，提取出來放到一個配置資訊中，在初始化 SGPageTltleView 之前進行資訊配置，這樣 SGPageTitleView 的可擴充性會比之前更靈活且減少了 SGPageTitlView.h 標頭檔案內的屬性，讓 SGPageTitlView.h 看起來更清晰明瞭，所以在1.3.0進行了一次版本升級

2、SGPageContent 裡面二個類，分別是針對兩種APP載入資料模式進行設計的；其中，SGPageContentView 內部檢視採用 UICollectionView 進行包裝的，而 SGPageContentScrollView 內部檢視採用 UIScrollView 進行包裝的；GitHub 中問題及解決方案中針對兩種模式資料載入時機做了相應說明以及 Issues 中也對 SGPageContentView 做了少許說明，這裡就不介紹了，有興趣的可以利用閒餘時間進行了解昂

SGPagingView 介紹

1、指示器下劃線樣式

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

2、指示器遮蓋樣式一

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

3、指示器遮蓋樣式二

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

4、指示器遮蓋樣式三

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

5、指示器固定長度樣式

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

6、指示器動態樣式

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

7、滾動結束載入內容

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