Latest 0.0.9
Homepage https://github.com/pujiaxin33/JXSegmentedView
License MIT
Platforms ios 8.0, requires ARC
Frameworks UIKit
Authors
JXSegmentedView

platform
languages
cocoapods
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固定宽度 JXSegmentedView
Line与cell等宽 JXSegmentedView
Line延长 JXSegmentedView
Line延长+偏移 JXSegmentedView
RainbowLine🌈彩虹 JXSegmentedView
DotLine点线 JXSegmentedView
DoubleLine双线 JXSegmentedView
Triangle三角形底部 JXSegmentedView
Triangle三角形顶部 JXSegmentedView
Background椭圆形 JXSegmentedView
Background椭圆形+阴影 JXSegmentedView
Background遮罩有背景 JXSegmentedView
Background遮罩无背景 JXSegmentedView
Background渐变色
(渐变是固定的)
JXSegmentedView
Gradient渐变色
(渐变随着位置变动)
JXSegmentedView
Image底部 JXSegmentedView
Image背景 JXSegmentedView
混合使用 JXSegmentedView

以下指示器支持上下位置切换:
JXSegmentedIndicatorLineViewJXSegmentedIndicatorRainbowLineViewJXSegmentedIndicatorDotLineViewJXSegmentedIndicatorDoubleLineViewJXSegmentedIndicatorTriangleViewJXSegmentedIndicatorImageView

Cell样式效果预览

说明 Gif
颜色渐变 JXSegmentedView
文字渐变 JXSegmentedView
大小缩放 JXSegmentedView
大小缩放+字体粗细 JXSegmentedView
大小缩放+点击动画 JXSegmentedView
大小缩放+cell宽度缩放 JXSegmentedView
TitleImage_Top JXSegmentedView
TitleImage_Left JXSegmentedView
TitleImage_Bottom JXSegmentedView
TitleImage_Right JXSegmentedView
TitleImage_只有图片 JXSegmentedView
TitleOrImage(高仿腾讯视频) JXSegmentedView
数字 JXSegmentedView
红点 JXSegmentedView
多行富文本 JXSegmentedView
多种cell混用 JXSegmentedView

特殊效果预览

说明 Gif
数据源过少
isItemSpacingAverageEnabled为true
JXSegmentedView
数据源过少
isItemSpacingAverageEnabled为false
JXSegmentedView
SegmentedControl
参考SegmentedControlViewController
JXSegmentedView
导航栏使用
参考NaviSegmentedControlViewController
JXSegmentedView
嵌套使用
参考NestViewController
JXSegmentedView
个人主页(上下左右滚动、header悬浮)
参考PagingViewController
更多样式请点击查看JXPagingView库
JXSegmentedView
数据加载&刷新
参考LoadDataViewController
JXSegmentedView

要求

  • iOS 8.0+
  • Xcode 9+
  • Swift 4.2

安装

手动

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 即可

使用

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群

常用属性说明

常用属性说明文档地址

其他使用注意事项

其他使用注意事项文档地址

补充

如果刚开始使用JXSegmentedView,当开发过程中需要支持某种特性时,请务必先搜索使用文档或者源代码。确认是否已经实现支持了想要的特性。请别不要文档和源代码都没有看,就直接提问,这对于大家都是一种时间浪费。如果没有支持想要的特性,欢迎提Issue讨论,或者自己实现提一个PullRequest。

该仓库保持及时更新,对于主流新的分类选择效果会第一时间支持。使用过程中,有任何建议或问题,可以通过以下方式联系我:

邮箱:[email protected]

QQ群: 112440276

JXSegmentedView

喜欢就star❤️一下吧

License

JXSegmentedView is released under the MIT license.

Latest podspec

{
    "name": "JXSegmentedView",
    "version": "0.0.9",
    "summary": "u4e00u4e2au8f7bu91cfu7ea7u3001u914du7f6eu4e30u5bccu3001u7075u6d3bu6269u5c55u7684u5206u6bb5u63a7u5236u5668",
    "homepage": "https://github.com/pujiaxin33/JXSegmentedView",
    "license": "MIT",
    "authors": {
        "pujiaxin33": "[email protected]"
    },
    "platforms": {
        "ios": "8.0"
    },
    "swift_version": "4.2",
    "source": {
        "git": "https://github.com/pujiaxin33/JXSegmentedView.git",
        "tag": "0.0.9"
    },
    "frameworks": "UIKit",
    "source_files": [
        "Sources",
        "Sources/**/*.{swift}"
    ],
    "requires_arc": true
}

Pin It on Pinterest

Share This