【干货】每一个APP都用得上的SegmentView

腾讯新闻今日头条、QQ音乐、网易云音乐、京东、爱奇艺、淘宝、天猫、简书、微博等全部主流APP分类切换滚动视图

与其余的同类三方库对比的优势：

• 使用POP(Protocol Oriented Programming面对协议编程)封装指示器逻辑，能够随心所欲的自定义指示器效果；
• 提供更加全面丰富的效果，交互更加顺畅；
• 使用子类化管理cell样式，逻辑更清晰，扩展更简单；

Github地址

下载源码，一睹为快！JXCategoryView

效果预览

指示器效果预览

说明	Gif
指示器LineView
指示器LineView京东风格
指示器LineView爱奇艺风格
指示器EllipseLayer
指示器EllipseLayer遮罩
指示器EllipseLayer遮罩 （阴影）
指示器ImageView(小船)
指示器滚动效果(足球)
QQ黏性红点
三角形底部
三角形顶部
文字遮罩（无背景视图）
背景指示图
矩形指示图
混合使用
自定义Indicator示例-点线

Cell样式效果预览

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

特殊效果预览

说明	Gif
SegmentedControl
导航栏使用
我的主页(上下左右滚动、header悬浮)
嵌套使用
垂直列表滚动 高仿腾讯视频 （背景色异常是录屏软件bug
数据源刷新&列表数据加载 示例

要求

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

安装

手动

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

CocoaPods

target '<Your Target Name>' do
    pod 'JXCategoryView'
end
复制代码

结构图

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

特殊说明

• 自定义：即便提供了灵活扩展，个人源码也不可能知足全部状况，建议你们能够经过fork仓库，维护本身的一套效果。也能够直接拖入源文件进行修改。
• 我的主页效果：上下左右滚动且HeaderView悬浮的实现，用的是我写的这个库JXPagingView。
• 垂直列表滚动：参考demo工程的VerticalListViewController，未作功能封装，参考里面的代码作，多注意注释，就能够实现了。

POP说明

经过将指示器的行为抽象出来，再经过JXCategoryIndicatorProtocol协议进行约束。这样指示器效果就能够无限扩展，随心所欲的添加指示器了，再也不受上一个版本继承的束缚了。更多POP内容，推荐喵神的文章面向协议编程与 Cocoa 的邂逅

经常使用属性说明

JXCategoryView经常使用属性说明

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

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搭配使用，可是效果须要本身把控，效果不是越多越好。参考混合使用；

使用

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

//二、添加并配置指示器
//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;
titleCategoryView.indicators = @[lineView, backgroundView];

//三、绑定contentScrollView。self.scrollView的初始化细节参考源码。
self.categoryView.contentScrollView = self.scrollView;
[self.view addSubview:self.categoryView];
复制代码

• 单个cell刷新：好比红点示例里面，调用- (void)reloadCell:(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等任何你想要的地方。
• 点击处理：由于充分解耦，在JXCategoryView点击回调中，你须要添加以下代码进行内容滚动切换：

#pragma mark - JXCategoryViewDelegate
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    [self.scrollView setContentOffset:CGPointMake(self.scrollView.bounds.size.width*index, 0) animated:YES];
}
复制代码

补充

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

Github地址

下载源码，一睹为快！JXCategoryView