SkillAgentSearch skills...

JXSegmentedView

A powerful and easy to use segmented view (segmentedcontrol, pagingview, pagerview, pagecontrol, categoryview) (腾讯新闻、今日头条、QQ音乐、网易云音乐、京东、爱奇艺、腾讯视频、淘宝、天猫、简书、微博等所有主流APP分类切换滚动视图)

GenerateConvertImprove

Install / Use

/learn @pujiaxin33/JXSegmentedView
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

<div align=center><img src="Example/JXSegmentedViewExample/Image/JXSegmentedViewSmall.png" width="467" height="84" /></div>

platform languages cocoapods carthage support

There is an English document here, click to view

A powerful and easy to use segmented view (segmentedcontrol, pagingview, pagerview, pagecontrol, categoryview) (腾讯新闻、今日头条、QQ音乐、网易云音乐、京东、爱奇艺、腾讯视频、淘宝、天猫、简书、微博等所有主流APP分类切换滚动视图)

与其他的同类三方库对比的优点：

  • 指示器逻辑面向协议编程(Protocol Oriented Programming)，可以为所欲为的扩展指示器效果；
  • 提供更加全面丰富效果，几乎支持所有主流APP效果；
  • 使用子类化管理cell样式，逻辑更清晰，扩展更简单；
  • 列表支持整个生命周期方法；

Objective-C版本

如果你在找Objective-C版本，请点击查看 JXCategoryView

效果预览

指示器效果预览

说明 | Gif | ----|------| Line固定宽度 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/LineFixedWidth.gif" width="350" height="80"> | Line与cell等宽 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/LineFlexibleWidth.gif" width="350" height="80"> | Line延长 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/LineLengthen.gif" width="350" height="80"> | Line延长+偏移 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/LineLengthenOffset.gif" width="350" height="80"> | RainbowLine🌈彩虹 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/LineRainbow.gif" width="350" height="80"> | DotLine点线 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/LineDot.gif" width="334" height="80"> | DoubleLine双线 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/LineDouble.gif" width="350" height="80"> | Triangle三角形底部 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/Triangle.gif" width="350" height="80"> | Triangle三角形顶部 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/TriangleTop.gif" width="350" height="80"> | Background椭圆形 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorBackground.gif" width="350" height="80"> | Background椭圆形+阴影 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorBackgroundShadow.gif" width="350" height="80"> | Background遮罩有背景 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorBackgroundMask.gif" width="350" height="80"> | Background遮罩无背景 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorBackgroundMaskPure.gif" width="350" height="80"> | Background渐变色<br>(渐变是固定的) | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorBackgroundGradient.gif" width="350" height="80"> | Gradient渐变色<br>(渐变随着位置变动) | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorGradient.gif" width="350" height="80"> | Image底部 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorImageBottom.gif" width="350" height="80"> | Image背景 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorImageBG.gif" width="350" height="80"> | 混合使用 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Indicator/IndicatorMixed.gif" width="350" height="80"> |

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

Cell样式效果预览

说明 | Gif | ----|------| 颜色渐变 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/ColorGradient.gif" width="350" height="80"> | 文字渐变 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TextGradient.gif" width="350" height="80"> | 大小缩放 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/ZoomOnly.gif" width="350" height="80"> | 大小缩放+字体粗细 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/ZoomStrokeWidth.gif" width="350" height="80"> | 大小缩放+点击动画 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/ZoomAnimation.gif" width="350" height="80"> | 大小缩放+cell宽度缩放 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/ZoomCellWidth.gif" width="350" height="80"> | TitleImage_Top | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TitleImageTop.gif" width="350" height="80"> | TitleImage_Left | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TitleImageLeft.gif" width="350" height="80"> | TitleImage_Bottom | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TitleImageBottom.gif" width="350" height="80"> | TitleImage_Right | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TitleImageRight.gif" width="350" height="80"> | TitleImage_只有图片 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TitleImageOnlyImage.gif" width="350" height="80"> | TitleOrImage(高仿腾讯视频) | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TitleOrImage.gif" width="350" height="80"> | 数字 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/Number.gif" width="350" height="80"> | 红点 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/CellDot.gif" width="350" height="80"> | 多行富文本 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/TitleAttributed.gif" width="350" height="80"> | 多种cell混用 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Cell/MixedCell.gif" width="350" height="80"> |

特殊效果预览

说明 | Gif | ----|------| 数据源过少<br/> isItemSpacingAverageEnabled为true | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Special/ItemAveTrue.gif" width="350" height="80"> | 数据源过少<br/> isItemSpacingAverageEnabled为false | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Special/ItemAveFalse.gif" width="350" height="80"> | SegmentedControl<br/>参考SegmentedControlViewController类 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Special/SegmentedControl.gif" width="350" height="80"> | 导航栏使用<br/>参考NaviSegmentedControlViewController类 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Special/NavigationBar.gif" width="350" height="80"> | 嵌套使用<br/>参考NestViewController类 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Special/Nest.gif" width="350" height="200"> | 个人主页(上下左右滚动、header悬浮)<br/>参考PagingViewController类<br/> 更多样式请点击查看JXPagingView库 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Special/Personal.gif" width="350" height="567"> | 数据加载&刷新<br/>参考LoadDataViewController类 | <img src="https://github.com/pujiaxin33/JXExampleImages/blob/master/JXSegmentedView/Special/LoadData.gif" width="350" height="200"> |

要求

  • iOS 9.0+
  • Xcode 9+
  • Swift 5.0

安装

手动

Clone代码，把Sources文件夹拖入项目，就可以使用了；

CocoaPods

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

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

Carthage

在cartfile文件添加：

github "pujiaxin33/JXSegmentedView"

然后执行carthage update --platform iOS 即可

Swift Package Manager

1.在Package.swift文件添加如下代码:

dependencies: [
  .package(url: "https://github.com/pujiaxin33/JXSegmentedView.git", from: "1.2.1")
]

2.使用命令行构建:

$ swift build

使用

JXSegmentedView使用示例

1.初始化JXSegmentedView

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

2.初始化dataSource

dataSouce类型为JXSegmentedViewDataSource协议。使用单独的类实现JXSegmentedViewDataSource协议，实现代码隔离。选择不同的类赋值给dataSource，就可以控制JXSegmentedView显示效果，实现插件化。比如选择JXSegmentedTitleImageDataSource类作为dataSource就选择了文字图片的显示效果；选择JXSegmentedNumberDataSource类作为dataSource就选择了文字加数字的显示效果；

//segmentedDataSource一定要通过属性强持有，不然会被释放掉
segmentedDataSource = JXSegmentedTitleDataSource()
//配置数据源相关配

pujiaxin33

View profile

View on GitHub
GitHub Stars2.9k
CategoryDevelopment
Updated1h ago
Forks426
pujiaxin33/JXSegmentedView

Languages

Swift

Security Score

100/100

Audited on Mar 30, 2026

No findings