/JXCategoryView

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

Primary LanguageObjective-CMIT LicenseMIT

platform languages cocoapods support

There is an English version of README here. just click it！

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

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

  • 使用协议封装指示器逻辑，可以为所欲为的自定义指示器效果；
  • 提供更加全面丰富的效果，交互更加顺畅；
  • 使用子类化管理cell样式，逻辑更清晰，扩展更简单；

效果预览

指示器效果预览

说明 Gif
LineView
LineView京东风格
LineView爱奇艺风格
BallView QQ黏性红点
TriangleView 三角形底部
TriangleView 三角形顶部
BackgroundView椭圆形
BackgroundView椭圆形+阴影
BackgroundView长方形
BackgroundView遮罩有背景
BackgroundView遮罩无背景
ImageView底部(小船)
ImageView背景(最佳男歌手)
ImageView滚动效果(足球)
混合使用
indicator自定义-点线效果

JXCategoryIndicatorLineView、JXCategoryIndicatorImageView、JXCategoryIndicatorBallView、JXCategoryIndicatorTriangleView均支持上下位置切换。

Cell样式效果预览

说明 Gif
颜色渐变
大小缩放
Cell背景色渐变
分割线
TitleImage_Top
TitleImage_Left
TitleImage_Bottom
TitleImage_Right
cell图文混用
Image
数字
红点
自定义-多行+富文本
腾讯视频效果

特殊效果预览

说明 Gif
数据源过少
averageCellSpacingEnabled默认为YES
数据源过少
averageCellSpacingEnabled为NO
SegmentedControl
导航栏使用
嵌套使用
个人主页(上下左右滚动、header悬浮)
更多样式请点击查看JXPagingView
垂直列表滚动
高仿腾讯视频
（背景色异常是录屏软件bug）
数据源刷新&列表数据加载 示例

要求

  • iOS 8.0+
  • Xcode 9+
  • Objective-C

安装

手动

Clone代码，把Sources文件夹拖入项目，#import "JXCategoryView.h"，就可以使用了；

CocoaPods

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

pod install之前务必pod repo update一下

结构图

  • 指示器样式自定义：使用POP(Protocol Oriented Programming面对协议编程)封装指示器逻辑，只要遵从JXCategoryIndicatorProtocol协议，就可以实现你的指示器效果。参考：JXCategoryIndicatorLineView；
  • Cell样式自定义：使用子类化，基类搭建基础，子类实现特殊效果。便于代码管理，功能扩展；参考：JXCategoryNumberView；

特殊说明

  • 自定义：即使提供了灵活扩展，我的源码也不可能满足所有情况，建议大家可以通过fork仓库，维护自己的一套效果。也可以直接拖入源文件进行修改。
  • 个人主页效果：上下左右滚动且HeaderView悬浮的实现，用的是我写的这个库JXPagingView。
  • 垂直列表滚动：参考demo工程的VerticalListViewController，未做功能封装，参考里面的代码做，多注意注释，就可以实现了。
  • 底部列表封装：一个列表都是VC封装起来的，可以参考demo工程LoadDataViewController类。一种就是直接操作VC控制加载，一种是用JXCategoryListVCContainerView封装起来，通过生命周期加载。详情请查看源码。

常用属性说明

JXCategoryView常用属性说明

属性 说明
defaultSelectedIndex 默认选中的index，用于初始化时指定选中某个index
selectedIndex 只读属性，当前选中的index
cellWidth cell的宽度，默认：JXCategoryViewAutomaticDimension
cellSpacing cell之间的间距，默认20
cellWidthIncrement cell宽度的补偿值，默认0
averageCellSpacingEnabled 当item内容总宽度小于JXCategoryBaseView的宽度，是否将cellSpacing均分。默认为YES。
contentScrollView 需要关联的contentScrollView，内部监听contentOffset
contentEdgeInsetLeft 整体内容的左边距，默认JXCategoryViewAutomaticDimension（等于cellSpacing）
contentEdgeInsetRight 整体内容的右边距，默认JXCategoryViewAutomaticDimension（等于cellSpacing）

Cell样式常用属性说明

属性 说明
titleColor titleLabel未选中颜色 默认：[UIColor blackColor]
titleSelectedColor titleLabel选中颜色 默认：[UIColor redColor]
titleFont titleLabel的字体 默认：[UIFont systemFontOfSize:15]
titleColorGradientEnabled title的颜色是否渐变过渡 默认：NO
titleLabelMaskEnabled titleLabel是否遮罩过滤 默认：NO
titleLabelZoomEnabled titleLabel是否缩放 默认：NO
titleLabelZoomScale citleLabel缩放比例 默认：1.2
imageZoomEnabled imageView是否缩放 默认：NO
imageZoomScale imageView缩放比例 默认：1.2
separatorLineShowEnabled cell分割线是否展示 默认：NO (颜色、宽高可以设置)
JXCategoryTitleImageType 图片所在位置：上面、左边、下面、右边 默认：左边

指示器常用属性说明

属性 说明
JXCategoryIndicatorComponentView.componentPosition 指示器的位置 默认：Bottom
JXCategoryIndicatorComponentView.scrollEnabled 手势滚动、点击切换的时候，是否允许滚动，默认YES
JXCategoryIndicatorLineView.lineStyle 普通、京东、爱奇艺效果 默认：Normal
JXCategoryIndicatorLineView.lineScrollOffsetX 爱奇艺效果专用，line滚动时x的偏移量，默认为10；
JXCategoryIndicatorLineView.indicatorLineWidth 默认JXCategoryViewAutomaticDimension（与cellWidth相等）
JXCategoryIndicatorLineView.indicatorLineViewHeight 默认：3
JXCategoryIndicatorLineView.indicatorLineViewCornerRadius 默认JXCategoryViewAutomaticDimension （等于self.indicatorLineViewHeight/2）
JXCategoryIndicatorLineView.indicatorLineViewColor 默认为[UIColor redColor]
JXCategoryIndicatorTriangleView.triangleViewSize 默认：CGSizeMake(14, 10)
JXCategoryIndicatorTriangleView.triangleViewColor 默认为[UIColor redColor]
JXCategoryIndicatorImageView.indicatorImageView 设置image
JXCategoryIndicatorImageView.indicatorImageViewRollEnabled 是否允许滚动，默认：NO
JXCategoryIndicatorImageView.indicatorImageViewSize 默认：CGSizeMake(30, 20)
JXCategoryIndicatorBackgroundView.backgroundViewWidth 默认JXCategoryViewAutomaticDimension（与cellWidth相等）
JXCategoryIndicatorBackgroundView.backgroundViewWidthIncrement 宽度增量补偿，因为backgroundEllipseLayer一般会比实际内容大一些。默认10
JXCategoryIndicatorBackgroundView.backgroundViewHeight 默认JXCategoryViewAutomaticDimension（与cell高度相等）
JXCategoryIndicatorBackgroundView.backgroundViewCornerRadius 默认JXCategoryViewAutomaticDimension(即backgroundViewHeight/2)
JXCategoryIndicatorBackgroundView.backgroundViewColor 默认为[UIColor redColor]
JXCategoryIndicatorBallView.ballViewSize 默认：CGSizeMake(15, 15)
JXCategoryIndicatorBallView.ballScrollOffsetX 小红点的偏移量 默认：20
JXCategoryIndicatorBallView.ballViewColor 默认为[UIColor redColor]

可以多个IndicatorView搭配使用，但是效果需要自己把控，效果不是越多越好。参考混合使用；

使用

//1、初始化JXCategoryTitleView
self.categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 0, WindowsSize.width, categoryViewHeight)];
self.categoryView.delegate = self;

//2、添加并配置指示器
//lineView
JXCategoryIndicatorLineView *lineView = [[JXCategoryIndicatorLineView alloc] init];
lineView.indicatorLineViewColor = [UIColor redColor];
lineView.indicatorLineWidth = JXCategoryViewAutomaticDimension;
//backgroundView
JXCategoryIndicatorBackgroundView *backgroundView = [[JXCategoryIndicatorBackgroundView alloc] init];
backgroundView.backgroundViewColor = [UIColor redColor];
backgroundView.backgroundViewWidth = JXCategoryViewAutomaticDimension;
self.categoryView.indicators = @[lineView, backgroundView];

//3、绑定contentScrollView。self.scrollView的初始化细节参考源码。
self.categoryView.contentScrollView = self.scrollView;
[self.view addSubview:self.categoryView];
  • 单个cell刷新：比如红点示例里面，调用- (void)reloadCellAtIndex:(NSUInteger)index
  • 所有状态重置：数据源、属性配置有变动时（比如从服务器拉取回来数据），需要调用reloadData方法刷新状态。

指示器样式自定义

仓库自带：JXCategoryIndicatorLineView、JXCategoryIndicatorTriangleView、JXCategoryIndicatorImageView、JXCategoryIndicatorBackgroundView、JXCategoryIndicatorBallView

主要实现的方法：

  • 继承JXCategoryIndicatorComponentView，内部遵从了JXCategoryIndicatorProtocol协议；
  • 实现协议方法，自定义效果：
    • - (void)jx_refreshState:(CGRect)selectedCellFrame初始化或reloadData，重置状态；
    • - (void)jx_contentScrollViewDidScrollWithLeftCellFrame:(CGRect)leftCellFrame rightCellFrame:(CGRect)rightCellFrame selectedPosition:(JXCategoryCellClickedPosition)selectedPosition percent:(CGFloat)percent contentScrollView在进行手势滑动时，处理指示器跟随手势变化UI逻辑；
    • - (void)jx_selectedCell:(CGRect)cellFrame clickedRelativePosition:(JXCategoryCellClickedPosition)clickedRelativePosition根据选中的某个cell，处理过渡效果；

具体实例：参考demo工程里面的JXCategoryIndicatorDotLineView

Cell子类化注意事项

仓库自带：JXCategoryTitleView、JXCategoryTitleImageView、JXCategoryNumberView、JXCategoryDotView、JXCategoryImageView

主要实现的方法：

  • - (Class)preferredCellClass返回自定义的cell；
  • - (void)refreshDataSource刷新数据源，使用自定义的cellModel；
  • - (void)refreshCellModel:(JXCategoryBaseCellModel *)cellModel index:(NSInteger)index 初始化、reloadData时对数据源重置；
  • - (CGFloat)preferredCellWidthAtIndex:(NSInteger)index根据cell的内容返回对应的宽度；
  • - (void)refreshSelectedCellModel:(JXCategoryBaseCellModel *)selectedCellModel unselectedCellModel:(JXCategoryBaseCellModel *)unselectedCellModelcell选中时进行状态刷新；
  • - (void)refreshLeftCellModel:(JXCategoryBaseCellModel *)leftCellModel rightCellModel:(JXCategoryBaseCellModel *)rightCellModel ratio:(CGFloat)ratiocell左右滚动切换的时候，进行状态刷新；

具体实例：参考demo工程里面的JXCategoryTitleAttributeView

继承提示

  • 任何子类化，view、cell、cellModel三个都要子类化，即使某个子类cell什么事情都不做。用于维护继承链，以免以后子类化都不知道要继承谁了；
  • 如果你想完全自定义cell里面的内容，那就继承JXCategoryIndicatorView、JXCategoryIndicatorCell、JXCategoryIndicatorCellModel，就像JXCategoryTitleView、JXCategoryTitleCell、JXCategoryTitleCellModel那样去做；
  • 如果你只是在父类进行一些微调，那就继承目标view、cell、cellModel，对cell原有控件微调、或者加入新的控件皆可。就像JXCategoryTitleImageView系列、JXCategoryTitleAttributeView系列那样去做；

侧滑手势

首先，在viewDidAppear加上下面代码：

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
    self.navigationController.interactivePopGestureRecognizer.enabled = (self.categoryView.selectedIndex == 0);
}

系统默认返回Item

  • 点击处理：
#pragma mark - JXCategoryViewDelegate
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    self.navigationController.interactivePopGestureRecognizer.enabled = (index == 0);
}

自定义导航栏返回Item

  • 设置代理：self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
  • 实现代理方法：
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    return YES;
}
  • 点击处理：
#pragma mark - JXCategoryViewDelegate
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    self.navigationController.interactivePopGestureRecognizer.enabled = (index == 0);
}

contentScrollView

  • 布局灵活：JXCategoryView没有与contentScrollView强关联，你甚至可以不设置这个属性，把它当做简单的SegmentedControl。他们之间布局没有任何要求，可以把JXCategoryView放入导航栏、UITableViewSectionHeader等任何你想要的地方。
  • 点击切换自定义处理
/**
 因为用户点击，contentScrollView即将过渡到目标index的配置。内部默认实现`[self.contentScrollView setContentOffset:CGPointMake(targetIndex*self.contentScrollView.bounds.size.width, 0) animated:YES];`。如果实现该代理方法，以自定义实现为准。比如将animated设置为NO，点击切换时无需滚动效果。类似于今日头条APP。

 @param categoryView categoryView description
 @param index index description
 */
- (void)categoryView:(JXCategoryBaseView *)categoryView contentScrollViewTransitionToIndex:(NSInteger)index;

更新记录

  • 2018.8.21 发布1.0.0版本，更新内容：使用POP（面向协议编程）重构指示器视图；迁移指南
  • 2018.8.22 发布1.0.1版本，更新内容：删除zoomEnabled,新增titleLabelZoomEnabled、imageZoomEnabled;
  • 2018.8.23 发布1.0.2版本，更新内容：添加cellWidthZoomEnabled实现腾讯视频效果;
  • 2018.8.24 发布1.0.3版本，更新内容：添加垂直列表滚动效果、指示器添加verticalMargin属性、JXCategoryViewDelegate代理方法优化;
  • 2018.9.4 发布1.0.4版本，更新内容：修复bug、添加cell图文混用示例;

补充

该仓库保持随时更新，对于主流新的分类选择效果会第一时间支持。使用过程中，有任何建议或问题，可以通过以下方式联系我：
邮箱：317437084@qq.com
QQ群： 112440151

喜欢就star❤️一下吧

License

JXCategoryView is released under the MIT license.