實現了所有主流APP的分類切換效果，可快速接入，靈活擴充套件（swift）

騰訊新聞、今日頭條、QQ音樂、網易雲音樂、京東、愛奇藝、騰訊視訊、淘寶、天貓、簡書、微博等所有主流APP分類切換滾動檢視

與其他的同類三方庫對比的優點：

• 指示器邏輯面向協議程式設計(Protocol Oriented Programming)，可以為所欲為的擴充套件指示器效果；
• 提供更加全面豐富效果，幾乎支援所有主流APP效果；
• 使用子類化管理cell樣式，邏輯更清晰，擴充套件更簡單；

Github地址

下載原始碼，一睹為快！ JXSegmentedView

效果預覽

指示器效果預覽

說明	Gif
Line固定寬度
Line與cell等寬
Line延長
Line延長+偏移
RainbowLine?彩虹
DotLine點線
DoubleLine雙線
Triangle三角形底部
Triangle三角形頂部
Background橢圓形
Background橢圓形+陰影
Background遮罩有背景
Background遮罩無背景
Background漸變色 (漸變是固定的)
Gradient漸變色 (漸變隨著位置變動)
Image底部
Image背景
混合使用

以下指示器支援上下位置切換： JXSegmentedIndicatorLineView、JXSegmentedIndicatorRainbowLineView、JXSegmentedIndicatorDotLineView、JXSegmentedIndicatorDoubleLineView、JXSegmentedIndicatorTriangleView、JXSegmentedIndicatorImageView

Cell樣式效果預覽

說明	Gif
顏色漸變
文字漸變
大小縮放
大小縮放+字型粗細
大小縮放+點選動畫
大小縮放+cell寬度縮放
TitleImage_Top
TitleImage_Left
TitleImage_Bottom
TitleImage_Right
TitleImage_只有圖片
TitleOrImage(高仿騰訊視訊)
數字
紅點
多行富文字
多種cell混用

特殊效果預覽

說明	Gif
資料來源過少 isItemSpacingAverageEnabled為true
資料來源過少 isItemSpacingAverageEnabled為false
SegmentedControl 參考SegmentedControlViewController類
導航欄使用 參考NaviSegmentedControlViewController類
巢狀使用 參考NestViewController類
個人主頁(上下左右滾動、header懸浮) 參考PagingViewController類 更多樣式請點選檢視JXPagingView庫
資料載入&重新整理 參考LoadDataViewController類

要求

• iOS 8.0+
• Xcode 9+
• Swift 4.2

安裝

手動

Clone程式碼，把Sources資料夾拖入專案，就可以使用了；

CocoaPods

target '<Your Target Name>' do
    pod 'JXSegmentedView'
end
複製程式碼

先執行pod repo update，再執行pod install

使用

JXSegmentedView使用示例

1.初始化JXSegmentedView

self.segmentedView = JXSegmentedView()
self.delegate = self
self.view.addSubview(self.segmentedView)
複製程式碼

2.初始化dataSource

dataSouce型別為JXSegmentedViewDataSource協議。使用單獨的類實現JXSegmentedViewDataSource協議，實現程式碼隔離。選擇不同的類賦值給dataSource，就可以控制JXSegmentedView顯示效果，實現外掛化。比如選擇JXSegmentedTitleImageDataSource類作為dataSource就選擇了文字圖片的顯示效果；選擇JXSegmentedNumberDataSource類作為dataSource就選擇了文字加數字的顯示效果；

//segmentedDataSource一定要通過屬性強持有，不然會被釋放掉
self.segmentedDataSource = JXSegmentedTitleDataSource()
//配置資料來源相關配置屬性
self.segmentedDataSource.titles = ["猴哥", "青蛙王子", "旺財"]
self.segmentedDataSource.isTitleColorGradientEnabled = true
//reloadData(selectedIndex:)方法一定要呼叫，方法內部會重新整理資料來源陣列
self.segmentedDataSource.reloadData(selectedIndex: 0)
//關聯dataSource
self.segmentedView.dataSource = self.segmentedDataSource
複製程式碼

3.初始化指示器indicator

let indicator = JXSegmentedIndicatorLineView()
indicator.indicatorWidth = 20
self.segmentedView.indicators = [indicator]
複製程式碼

4.實現JXSegmentedViewDelegate代理

//點選選中或者滾動選中都會呼叫該方法。適用於只關心選中事件，而不關心具體是點選還是滾動選中的情況。
func segmentedView(_ segmentedView: JXSegmentedView, didSelectedItemAt index: Int) {}

// 點選選中的情況才會呼叫該方法
func segmentedView(_ segmentedView: JXSegmentedView, didClickSelectedItemAt index: Int) {}

// 滾動選中的情況才會呼叫該方法
func segmentedView(_ segmentedView: JXSegmentedView, didScrollSelectedItemAt index: Int) {}

// 正在滾動中的回撥
func segmentedView(_ segmentedView: JXSegmentedView, scrollingFrom leftIndex: Int, to rightIndex: Int, percent: CGFloat) {}
複製程式碼

contentScrollView列表容器使用示例

直接使用UIScrollView自定義使用示例

因為程式碼比較分散，而且程式碼量也比較多，所有不推薦使用該方法。要正確使用需要注意的地方比較多，尤其對於剛接觸iOS的同學來說不太友好。

不直接貼程式碼了，具體點選LoadDataCustomViewController檢視原始碼瞭解。

作為替代，官方使用&強烈推薦使用下面這種方式???。

配合JXSegmentedListContainerView封裝類使用示例

JXSegmentedListContainerView是對列表檢視高度封裝的類，具有以下優點：

• 相對於直接使用UIScrollView自定義，封裝度高、程式碼集中、使用簡單；
• 列表懶載入：當顯示某個列表的時候，才進行列表初始化。而不是一次性載入全部列表，效能更優；

1.初始化JXSegmentedListContainerView

self.listContainerView = JXSegmentedListContainerView(dataSource: self)
self.view.addSubview(self.listContainerView)
//關聯cotentScrollView，關聯之後才可以互相聯動！！！
self.segmentedView.contentScrollView = self.listContainerView.scrollView
複製程式碼

2.實現JXSegmentedListContainerViewDataSource代理方法

//返回列表的數量
func numberOfLists(in listContainerView: JXSegmentedListContainerView) -> Int {
    return self.segmentedDataSource.titles.count
}
//返回遵從`JXSegmentedListContainerViewListDelegate`協議的例項
func listContainerView(_ listContainerView: JXSegmentedListContainerView, initListAt index: Int) -> JXSegmentedListContainerViewListDelegate {
    return ListBaseViewController()
}
複製程式碼

3.列表實現JXSegmentedListContainerViewListDelegate代理方法

不管列表是UIView還是UIViewController都可以，提高使用靈活性，更便於現有的業務接入。

/// 如果列表是VC，就返回VC.view
/// 如果列表是View，就返回View自己
/// - Returns: 返回列表檢視
func listView() -> UIView {
    return view
}

//可選使用，列表顯示的時候呼叫
func listDidAppear() {}

//可選使用，列表消失的時候呼叫
func listDidDisappear() {}
複製程式碼

4.將關鍵事件告知JXSegmentedListContainerView

在下面兩個JXSegmentedViewDelegate代理方法裡面呼叫對應的程式碼，一定不要忘記這一條❗️❗️❗️

func segmentedView(_ segmentedView: JXSegmentedView, didClickSelectedItemAt index: Int) {
    //傳遞didClickSelectedItemAt事件給listContainerView，必須呼叫！！！
    listContainerView.didClickSelectedItem(at: index)
}

func segmentedView(_ segmentedView: JXSegmentedView, scrollingFrom leftIndex: Int, to rightIndex: Int, percent: CGFloat) {
    //傳遞scrolling事件給listContainerView，必須呼叫！！！
    listContainerView.segmentedViewScrolling(from: leftIndex, to: rightIndex, percent: percent, selectedIndex: segmentedView.selectedIndex)
}
複製程式碼

具體點選LoadDataViewController檢視原始碼瞭解

使用總結

因為JXSegmentedView本身支援許多特性：指示器、cell樣式、列表容器等，如何有序管理好程式碼成了一個難題。藉助於協議、繼承、封裝類極大的簡化了使用難度，而且提高了靈活性，擴充套件相當容易。

• 核心主類：JXSegmentedView
• 資料來源&cell樣式定製類：遵從JXSegmentedViewDataSource協議的類
• 指示器類：遵從JXSegmentedIndicatorProtocol協議的UIView類
• 列表容器：官方推薦JXSegmentedListContainerView類，特殊情況可以使用UIScrollView自定義

指示器樣式自定義

• 需要繼承JXSegmentedIndicatorProtocol協議，點選參看JXSegmentedIndicatorProtocol
• 提供了繼承JXSegmentedIndicatorProtocol協議的基類JXSegmentedIndicatorBaseView，裡面提供了許多基礎屬性。點選參看JXSegmentedIndicatorBaseView
• 自定義指示器，請參考已實現的指示器檢視，多嘗試、多思考，再有問題請提Issue或加入反饋QQ群

dataSource和Cell自定義

• 需要繼承JXSegmentedViewDataSource協議，點選參看JXSegmentedViewDataSource
• 提供了繼承JXSegmentedViewDataSource協議的基類JXSegmentedBaseDataSource，裡面提供了許多基礎屬性。點選參看JXSegmentedBaseDataSource
• 任何自定義需求，dataSource、cell、itemModel三個都要子類化。即使某個子類cell什麼事情都不做。用於維護繼承鏈，以免以後子類化都不知道要繼承誰了；
• dataSource和Cell自定義，請參考已實現的dataSource，多嘗試、多思考，再有問題請提Issue或加入反饋QQ群

常用屬性說明

常用屬性說明文件地址

其他使用注意事項

其他使用注意事項文件地址

補充

該倉庫保持及時更新，對於主流新的分類選擇效果會第一時間支援。使用過程中，有任何建議或問題，可以通過以下方式聯絡我：
郵箱：317437084@qq.com
QQ群： 112440276

Github地址

下載原始碼，一睹為快！ JXSegmentedView