每個APP都用得上的SegmentedView(Swift版本)

摘要： Logo 騰訊新聞、今日頭條、QQ音樂、網易雲音樂、京東、愛奇藝、騰訊視訊、淘寶、天貓、簡書、微博等所有主流APP分類切換滾動檢視 與其他的同類三方庫對比的優點： 指示器邏輯面向協議程式設計(Protocol Oriented Pro...

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

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

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

Github地址

效果預覽

指示器效果預覽

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

以下指示器支援上下位置切換：

JXSegmentedIndicatorLineView 、 JXSegmentedIndicatorRainbowLineView 、 JXSegmentedIndicatorDotLineView 、 JXSegmentedIndicatorDoubleLineView 、 JXSegmentedIndicatorTriangleView 、 JXSegmentedIndicatorImageView

Cell樣式效果預覽

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

特殊效果預覽

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

要求

• 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 檢視原始碼瞭解。

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

配合 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 代理方法裡面呼叫對應的程式碼，一定不要忘記這一條:exclamation:️:exclamation:️:exclamation:️

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群

常用屬性說明

常用屬性說明文件地址

其他使用注意事項

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

補充

該倉庫保持及時更新，對於主流新的分類選擇效果會第一時間支援。使用過程中，有任何建議或問題，可以通過以下方式聯絡我：</br>

郵箱： [email protected] </br>

QQ群： 112440276

Github地址