JXCategoryView.png

騰訊新聞今日頭條溯乒、QQ音樂、網(wǎng)易云音樂豹爹、京東裆悄、愛奇藝、淘寶臂聋、天貓光稼、簡書、微博等所有主流APP分類切換滾動視圖

與其他的同類三方庫對比的優(yōu)點：

• 使用POP(Protocol Oriented Programming面對協(xié)議編程)封裝指示器邏輯逻住，可以為所欲為的自定義指示器效果钟哥；
• 提供更加全面豐富的效果，交互更加順暢瞎访；
• 使用子類化管理cell樣式腻贰，邏輯更清晰，擴展更簡單扒秸；

Github地址

下載源碼播演，一睹為快！JXCategoryView

效果預(yù)覽

指示器效果預(yù)覽

說明	Gif
指示器LineView	LineView.gif
指示器LineView京東風(fēng)格	JDLineStyle.gif
指示器LineView愛奇藝風(fēng)格	IQIYILineStyle.gif
指示器EllipseLayer	BackgroundEllipseLayer.gif
指示器EllipseLayer遮罩	TitleMask.gif
指示器EllipseLayer遮罩 （陰影）	BackgroundViewShadow.gif
指示器ImageView(小船)	IndicatorImageView.gif
指示器滾動效果(足球)	Football.gif
QQ黏性紅點	QQBall.gif
三角形底部	TriangleBottom.gif
三角形頂部	TriangleTop.gif
文字遮罩（無背景視圖）	TitleMaskNoBackgroundView.gif
背景指示圖	BackgroundImageView.gif
矩形指示圖	Rectangle.gif
混合使用	Mixed.gif
自定義Indicator示例-點線	IndicatorCustomizeGuide.gif

Cell樣式效果預(yù)覽

說明	Gif
顏色漸變	TitleColorGradient.gif
大小縮放	Zoom.gif
分割線	SeparatorLine.gif
TitleImage_Top	TitleImageTop.gif
TitleImage_Left	TitleImageLeft.gif
TitleImage_Bottom	TitleImageBottom.gif
TitleImage_Right	TitleImageRight.gif
TitleImage_OnlyImage	TitleImageOnlyImage.gif
圖文混用	CellMixed.gif
自定義-數(shù)字	Number.gif
自定義cell-紅點	CellRedDot.gif
自定義cell-背景色漸變	CellBackgroundColorGradient.gif
騰訊視頻效果	TXVedio.gif
自定義cell示例-多行+富文本	AttributeView.gif

特殊效果預(yù)覽

說明	Gif
SegmentedControl	SegmentedControl.gif
導(dǎo)航欄使用	SegmentedControlNavi.gif
個人主頁(上下左右滾動伴奥、header懸浮)	UserProfile.gif
嵌套使用	Nest.gif
垂直列表滾動 高仿騰訊視頻 （背景色異常是錄屏軟件bug	VerticalList.gif
數(shù)據(jù)源刷新&列表數(shù)據(jù)加載 示例	LoadData.gif

要求

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

安裝

手動

Clone代碼写烤，把Sources文件夾拖入項目，#import "JXCategoryView.h"拾徙，就可以使用了洲炊；

CocoaPods

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

結(jié)構(gòu)圖

JXCategoryViewStructure.png

• 指示器樣式自定義：使用POP(Protocol Oriented Programming面對協(xié)議編程)封裝指示器邏輯，只要遵從JXCategoryIndicatorProtocol協(xié)議尼啡，就可以實現(xiàn)你的指示器效果暂衡。參考：JXCategoryIndicatorLineView；
• Cell樣式自定義：使用子類化崖瞭，基類搭建基礎(chǔ)狂巢，子類實現(xiàn)特殊效果。便于代碼管理书聚，功能擴展唧领；參考：JXCategoryNumberView藻雌；

特殊說明

• 自定義：即使提供了靈活擴展，我的源碼也不可能滿足所有情況斩个，建議大家可以通過fork倉庫胯杭，維護自己的一套效果。也可以直接拖入源文件進行修改萨驶。
• 個人主頁效果：上下左右滾動且HeaderView懸浮的實現(xiàn)歉摧，用的是我寫的這個庫JXPagingView。
• 垂直列表滾動：參考demo工程的VerticalListViewController腔呜，未做功能封裝，參考里面的代碼做再悼，多注意注釋核畴，就可以實現(xiàn)了。

POP說明

通過將指示器的行為抽象出來冲九，再通過JXCategoryIndicatorProtocol協(xié)議進行約束谤草。這樣指示器效果就可以無限擴展，為所欲為的添加指示器了莺奸，不再受上一個版本繼承的束縛了丑孩。更多POP內(nèi)容，推薦喵神的文章面向協(xié)議編程與 Cocoa 的邂逅

常用屬性說明

JXCategoryView常用屬性說明

Cell樣式常用屬性說明

指示器常用屬性說明

可以多個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;
titleCategoryView.indicators = @[lineView, backgroundView];

//3、綁定contentScrollView潦闲。self.scrollView的初始化細節(jié)參考源碼攒菠。
self.categoryView.contentScrollView = self.scrollView;
[self.view addSubview:self.categoryView];

• 單個cell刷新：比如紅點示例里面，調(diào)用- (void)reloadCell:(NSUInteger)index
• 所有狀態(tài)重置：數(shù)據(jù)源歉闰、屬性配置有變動時（比如從服務(wù)器拉取回來數(shù)據(jù)）辖众，需要調(diào)用reloadData方法刷新狀態(tài)。

指示器樣式自定義

倉庫自帶：JXCategoryIndicatorLineView和敬、JXCategoryIndicatorTriangleView凹炸、JXCategoryIndicatorImageView、JXCategoryIndicatorBackgroundView昼弟、JXCategoryIndicatorBallView

主要實現(xiàn)的方法：

• 繼承JXCategoryIndicatorComponentView啤它，內(nèi)部遵從了JXCategoryIndicatorProtocol協(xié)議；
• 實現(xiàn)協(xié)議方法私杜，自定義效果：
  • - (void)jx_refreshState:(CGRect)selectedCellFrame初始化或reloadData蚕键，重置狀態(tài)；
  • - (void)jx_contentScrollViewDidScrollWithLeftCellFrame:(CGRect)leftCellFrame rightCellFrame:(CGRect)rightCellFrame selectedPosition:(JXCategoryCellClickedPosition)selectedPosition percent:(CGFloat)percent contentScrollView在進行手勢滑動時衰粹，處理指示器跟隨手勢變化UI邏輯锣光；
  • - (void)jx_selectedCell:(CGRect)cellFrame clickedRelativePosition:(JXCategoryCellClickedPosition)clickedRelativePosition根據(jù)選中的某個cell，處理過渡效果铝耻；

具體實例：參考demo工程里面的JXCategoryIndicatorDotLineView

Cell子類化注意事項

倉庫自帶：JXCategoryTitleView誊爹、JXCategoryTitleImageView、JXCategoryNumberView瓢捉、JXCategoryDotView频丘、JXCategoryImageView

主要實現(xiàn)的方法：

• - (Class)preferredCellClass返回自定義的cell；
• - (void)refreshDataSource刷新數(shù)據(jù)源泡态，使用自定義的cellModel搂漠；
• - (void)refreshCellModel:(JXCategoryBaseCellModel *)cellModel index:(NSInteger)index初始化、reloadData時對數(shù)據(jù)源重置某弦；
• - (CGFloat)preferredCellWidthAtIndex:(NSInteger)index根據(jù)cell的內(nèi)容返回對應(yīng)的寬度桐汤；
• - (void)refreshSelectedCellModel:(JXCategoryBaseCellModel *)selectedCellModel unselectedCellModel:(JXCategoryBaseCellModel *)unselectedCellModelcell選中時進行狀態(tài)刷新而克；
• - (void)refreshLeftCellModel:(JXCategoryBaseCellModel *)leftCellModel rightCellModel:(JXCategoryBaseCellModel *)rightCellModel ratio:(CGFloat)ratiocell左右滾動切換的時候，進行狀態(tài)刷新怔毛；

具體實例：參考demo工程里面的JXCategoryTitleAttributeView

繼承提示

• 任何子類化员萍，view、cell拣度、cellModel三個都要子類化碎绎，即使某個子類cell什么事情都不做。用于維護繼承鏈抗果，以免以后子類化都不知道要繼承誰了筋帖；
• 如果你想完全自定義cell里面的內(nèi)容，那就繼承JXCategoryIndicatorView冤馏、JXCategoryIndicatorCell幕随、JXCategoryIndicatorCellModel，就像JXCategoryTitleView宿接、JXCategoryTitleCell、JXCategoryTitleCellModel那樣去做辕录；
• 如果你只是在父類進行一些微調(diào)睦霎，那就繼承目標(biāo)view、cell走诞、cellModel副女，對cell原有控件微調(diào)、或者加入新的控件皆可蚣旱。就像JXCategoryTitleImageView系列碑幅、JXCategoryTitleAttributeView系列那樣去做；

側(cè)滑手勢

首先塞绿，在viewDidAppear加上下面代碼：

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

系統(tǒng)默認(rèn)返回Item

• 點擊處理：

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

自定義導(dǎo)航欄返回Item

• 設(shè)置代理：self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
• 實現(xiàn)代理方法：

- (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強關(guān)聯(lián)沟涨，你甚至可以不設(shè)置這個屬性，把它當(dāng)做簡單的SegmentedControl异吻。他們之間布局沒有任何要求裹赴，可以把JXCategoryView放入導(dǎo)航欄、UITableViewSectionHeader等任何你想要的地方诀浪。
• 點擊處理：因為充分解耦棋返，在JXCategoryView點擊回調(diào)中，你需要添加如下代碼進行內(nèi)容滾動切換：

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

補充

該倉庫保持隨時更新雷猪，對于主流新的分類選擇效果會第一時間支持睛竣。使用過程中，有任何建議或問題求摇，可以通過以下方式聯(lián)系我：
郵箱：317437084@qq.com
QQ群： 112440151

Github地址

下載源碼射沟，一睹為快殊者！JXCategoryView