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

Logo

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

與其他的同類三方庫對比的優(yōu)點：

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

Github地址

下載源碼，一睹為快！
JXSegmentedView

效果預(yù)覽

指示器效果預(yù)覽

說明 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樣式效果預(yù)覽

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

特殊效果預(yù)覽

說明 Gif
數(shù)據(jù)源過少
isItemSpacingAverageEnabled為true
image
數(shù)據(jù)源過少
isItemSpacingAverageEnabled為false
image
SegmentedControl
參考SegmentedControlViewController類
image
導(dǎo)航欄使用
參考NaviSegmentedControlViewController類
image
嵌套使用
參考NestViewController類
image
個人主頁(上下左右滾動、header懸浮)
參考PagingViewController類
更多樣式請點擊查看JXPagingView庫
image
數(shù)據(jù)加載&刷新
參考LoadDataViewController類
image

要求

  • iOS 8.0+
  • Xcode 9+
  • Swift 4.2

安裝

手動

Clone代碼，把Sources文件夾拖入項目，就可以使用了；

CocoaPods

target '<Your Target Name>' do
    pod 'JXSegmentedView'
end

先執(zhí)行pod repo update，再執(zhí)行pod install

使用

JXSegmentedView使用示例

1.初始化JXSegmentedView

self.segmentedView = JXSegmentedView()
self.delegate = self
self.view.addSubview(self.segmentedView)

2.初始化dataSource

dataSouce類型為JXSegmentedViewDataSource協(xié)議。使用單獨的類實現(xiàn)JXSegmentedViewDataSource協(xié)議，實現(xiàn)代碼隔離。選擇不同的類賦值給dataSource，就可以控制JXSegmentedView顯示效果，實現(xiàn)插件化。比如選擇JXSegmentedTitleImageDataSource類作為dataSource就選擇了文字圖片的顯示效果；選擇JXSegmentedNumberDataSource類作為dataSource就選擇了文字加數(shù)字的顯示效果；

//segmentedDataSource一定要通過屬性強持有，不然會被釋放掉
self.segmentedDataSource = JXSegmentedTitleDataSource()
//配置數(shù)據(jù)源相關(guān)配置屬性
self.segmentedDataSource.titles = ["猴哥", "青蛙王子", "旺財"]
self.segmentedDataSource.isTitleColorGradientEnabled = true
//reloadData(selectedIndex:)方法一定要調(diào)用，方法內(nèi)部會刷新數(shù)據(jù)源數(shù)組
self.segmentedDataSource.reloadData(selectedIndex: 0)
//關(guān)聯(lián)dataSource
self.segmentedView.dataSource = self.segmentedDataSource

3.初始化指示器indicator

let indicator = JXSegmentedIndicatorLineView()
indicator.indicatorWidth = 20
self.segmentedView.indicators = [indicator]

4.實現(xiàn)JXSegmentedViewDelegate代理

//點擊選中或者滾動選中都會調(diào)用該方法。適用于只關(guān)心選中事件，而不關(guān)心具體是點擊還是滾動選中的情況。
func segmentedView(_ segmentedView: JXSegmentedView, didSelectedItemAt index: Int) {}

// 點擊選中的情況才會調(diào)用該方法
func segmentedView(_ segmentedView: JXSegmentedView, didClickSelectedItemAt index: Int) {}

// 滾動選中的情況才會調(diào)用該方法
func segmentedView(_ segmentedView: JXSegmentedView, didScrollSelectedItemAt index: Int) {}

// 正在滾動中的回調(diào)
func segmentedView(_ segmentedView: JXSegmentedView, scrollingFrom leftIndex: Int, to rightIndex: Int, percent: CGFloat) {}

contentScrollView列表容器使用示例

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

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

不直接貼代碼了，具體點擊LoadDataCustomViewController查看源代碼了解。

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

配合JXSegmentedListContainerView封裝類使用示例

JXSegmentedListContainerView是對列表視圖高度封裝的類，具有以下優(yōu)點：

  • 相對于直接使用UIScrollView自定義，封裝度高、代碼集中、使用簡單；
  • 列表懶加載：當(dāng)顯示某個列表的時候，才進行列表初始化。而不是一次性加載全部列表，性能更優(yōu)；

1.初始化JXSegmentedListContainerView

self.listContainerView = JXSegmentedListContainerView(dataSource: self)
self.view.addSubview(self.listContainerView)
//關(guān)聯(lián)cotentScrollView，關(guān)聯(lián)之后才可以互相聯(lián)動?。?！
self.segmentedView.contentScrollView = self.listContainerView.scrollView

2.實現(xiàn)JXSegmentedListContainerViewDataSource代理方法

//返回列表的數(shù)量
func numberOfLists(in listContainerView: JXSegmentedListContainerView) -> Int {
    return self.segmentedDataSource.titles.count
}
//返回遵從`JXSegmentedListContainerViewListDelegate`協(xié)議的實例
func listContainerView(_ listContainerView: JXSegmentedListContainerView, initListAt index: Int) -> JXSegmentedListContainerViewListDelegate {
    return ListBaseViewController()
}

3.列表實現(xiàn)JXSegmentedListContainerViewListDelegate代理方法

不管列表是UIView還是UIViewController都可以，提高使用靈活性，更便于現(xiàn)有的業(yè)務(wù)接入。

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

//可選使用，列表顯示的時候調(diào)用
func listDidAppear() {}

//可選使用，列表消失的時候調(diào)用
func listDidDisappear() {}

4.將關(guān)鍵事件告知JXSegmentedListContainerView

在下面兩個JXSegmentedViewDelegate代理方法里面調(diào)用對應(yīng)的代碼，一定不要忘記這一條??????

func segmentedView(_ segmentedView: JXSegmentedView, didClickSelectedItemAt index: Int) {
    //傳遞didClickSelectedItemAt事件給listContainerView，必須調(diào)用?。?！
    listContainerView.didClickSelectedItem(at: index)
}

func segmentedView(_ segmentedView: JXSegmentedView, scrollingFrom leftIndex: Int, to rightIndex: Int, percent: CGFloat) {
    //傳遞scrolling事件給listContainerView，必須調(diào)用?。?！
    listContainerView.segmentedViewScrolling(from: leftIndex, to: rightIndex, percent: percent, selectedIndex: segmentedView.selectedIndex)
}

具體點擊LoadDataViewController查看源代碼了解

使用總結(jié)

因為JXSegmentedView本身支持許多特性：指示器、cell樣式、列表容器等，如何有序管理好代碼成了一個難題。借助于協(xié)議、繼承、封裝類極大的簡化了使用難度，而且提高了靈活性，擴展相當(dāng)容易。

  • 核心主類：JXSegmentedView
  • 數(shù)據(jù)源&cell樣式定制類：遵從JXSegmentedViewDataSource協(xié)議的類
  • 指示器類：遵從JXSegmentedIndicatorProtocol協(xié)議的UIView類
  • 列表容器：官方推薦JXSegmentedListContainerView類，特殊情況可以使用UIScrollView自定義

指示器樣式自定義

  • 需要繼承JXSegmentedIndicatorProtocol協(xié)議，點擊參看JXSegmentedIndicatorProtocol
  • 提供了繼承JXSegmentedIndicatorProtocol協(xié)議的基類JXSegmentedIndicatorBaseView，里面提供了許多基礎(chǔ)屬性。點擊參看JXSegmentedIndicatorBaseView
  • 自定義指示器，請參考已實現(xiàn)的指示器視圖，多嘗試、多思考，再有問題請?zhí)酙ssue或加入反饋QQ群

dataSource和Cell自定義

  • 需要繼承JXSegmentedViewDataSource協(xié)議，點擊參看JXSegmentedViewDataSource
  • 提供了繼承JXSegmentedViewDataSource協(xié)議的基類JXSegmentedBaseDataSource，里面提供了許多基礎(chǔ)屬性。點擊參看JXSegmentedBaseDataSource
  • 任何自定義需求，dataSource、cell、itemModel三個都要子類化。即使某個子類cell什么事情都不做。用于維護繼承鏈，以免以后子類化都不知道要繼承誰了；
  • dataSource和Cell自定義，請參考已實現(xiàn)的dataSource，多嘗試、多思考，再有問題請?zhí)酙ssue或加入反饋QQ群

常用屬性說明

常用屬性說明文檔地址

其他使用注意事項

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

補充

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

image

Github地址

下載源碼，一睹為快！
JXSegmentedView

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容