實現了全部主流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