【干貨】每個APP都用得上的SegmentedView(Swift版本)

Logo

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

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

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

Github地址

下載源碼，一睹為快！
JXSegmentedView

效果預覽

指示器效果預覽

說明 Gif
Line固定寬度
image
Line與cell等寬
image
Line延長
image
Line延長+偏移
image
RainbowLine??彩虹
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查看源代碼了解。

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

配合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群

常用屬性說明

常用屬性說明文檔地址

其他使用注意事項

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

補充

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

image

Github地址

下載源碼，一睹為快！
JXSegmentedView

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容