每个APP都用得上的SegmentView(二)

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

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

• 使用POP(Protocol Oriented Programming面对协议编程)封装指示器逻辑，轻松扩展指示器效果；

• 提供更加全面丰富的效果，交互更加顺畅；

• 使用子类化管理cell样式，逻辑更清晰，扩展更简单；

这篇文章主要讲解新增内容，更多基础内容 点击这里查看上一篇文章

Github地址

下载源码，一睹为快！ 地址：JXCategoryView

新增效果预览

说明 Gif QQ黏性红点

QQBall.gif

三角形底部

TriangleBottom.gif

三角形顶部

TriangleTop.gif

文字遮罩（无背景视图）

TitleMaskNoBackgroundView.gif

背景指示图

BackgroundImageView.gif

矩形指示图

Rectangle.gif

自定义cell-红点

CellRedDot.gif

自定义cell-背景色渐变

CellBackgroundColorGradient.gif

混合使用

Mixed.gif

嵌套使用

Nest.gif

自定义cell示例-多行+富文本

AttributeView.gif

自定义Indicator示例-点线

IndicatorCustomizeGuide.gif

结构图

JXCategoryViewStructure.png

指示器样式自定义

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

主要实现的方法：

• 继承JXCategoryIndicatorComponentView，内部遵从了JXCategoryIndicatorProtocol协议；

• 实现协议方法，自定义效果：

  • - (void)jx_refreshState:(CGRect)selectedCellFrame初始化或reloadDatas，重置状态；

  • - (void)jx_contentScrollViewDidScrollWithLeftCellFrame:(CGRect)leftCellFrame rightCellFrame:(CGRect)rightCellFrame selectedPosition:(JXCategoryCellClickedPosition)selectedPosition percent:(CGFloat)percentcontentScrollView在进行手势滑动时，处理指示器跟随手势变化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初始化、reloadDatas时对数据源重置；

• - (CGFloat)preferredCellWidthWithIndex:(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系列那样去做；

POP说明

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

代码示例

• 指示器JXCategoryIndicatorLineView的用法：

JXCategoryTitleView *categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 100, 300, 30)];
categoryView.titles = @[@"主题一", @"主题二"];

JXCategoryIndicatorLineView *lineView = [[JXCategoryIndicatorLineView alloc] init];
lineView.indicatorLineWidth = JXCategoryViewAutomaticDimension;  
lineView.indicatorLineViewHeight = 3;
lineView.indicatorLineViewCornerRadius = JXCategoryViewAutomaticDimension;
lineView.indicatorLineViewColor = [UIColor redColor];
categoryView.indicators = @[lineView];
[self.view addSubview:categoryView];

• 指示器JXCategoryIndicatorTriangleView的用法：

JXCategoryTitleView *categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 100, 300, 30)];
categoryView.titles = @[@"主题一", @"主题二"];

JXCategoryIndicatorTriangleView *triangleView = [[JXCategoryIndicatorTriangleView alloc] init];
triangleView.triangleViewSize = CGSizeMake(14, 10);
triangleView.triangleViewColor = [UIColor redColor];
triangleView.componentPosition = JXCategoryComponentPosition_Bottom;//triangleView.componentPosition = JXCategoryComponentPosition_Top; 放在顶部categoryView.indicators = @[triangleView];
[self.view addSubview:categoryView];

• 指示器JXCategoryIndicatorBackgroundView的用法：

JXCategoryTitleView *categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 100, 300, 30)];
categoryView.titles = @[@"主题一", @"主题二"];

JXCategoryIndicatorBackgroundView *backgroundView = [[JXCategoryIndicatorBackgroundView alloc] init];//椭圆形backgroundView.backgroundViewHeight = 20;
backgroundView.backgroundViewCornerRadius = JXCategoryViewAutomaticDimension;//长方形//backgroundView.backgroundViewHeight = JXCategoryViewAutomaticDimension;//backgroundView.backgroundViewCornerRadius = 0;categoryView.indicators = @[backgroundView];
[self.view addSubview:categoryView];

• 指示器混合使用：

JXCategoryTitleView *categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 100, 300, 30)];
categoryView.titles = @[@"主题一", @"主题二"];

JXCategoryIndicatorLineView *lineView = [[JXCategoryIndicatorLineView alloc] init];
JXCategoryIndicatorBackgroundView *backgroundView = [[JXCategoryIndicatorBackgroundView alloc] init];
backgroundView.backgroundViewHeight = 20;
categoryView.indicators = @[backgroundView, lineView];
[self.view addSubview:categoryView];

Github地址

下载源码，一睹为快！ 地址：JXCategoryView

补充

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

邮箱： [email protected]