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

kingsic發表於2018-01-02
原文網址 : https://juejin.im/post/5a4604b5f265da430c122465
ViewiOS

本篇文章介紹的是1.3.5版本

1.3.5整合有以下功能

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

先了解下目錄結構

SGPagingView（iOS強大的標題滾動檢視）
看目錄主要分為二個部分：

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、指示器下劃線樣式

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

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、指示器遮蓋樣式一

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

    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、指示器遮蓋樣式二

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

    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、指示器遮蓋樣式三

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

    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、指示器固定長度樣式

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

    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、指示器動態樣式

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

    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、滾動結束載入內容

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

    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];
複製程式碼
8、文字縮放樣式

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

9、文字漸顯樣式

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

10、最後提供一個小小案例，僅作參考

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

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

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

詳細內容請參考Github介紹

GitHub地址

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

相關文章