JXCategoryView.png

騰訊新聞今日頭條、QQ音樂(lè)、網(wǎng)易云音樂(lè)、京東、愛(ài)奇藝、淘寶、天貓、 、微博等所有主流APP分類切換滾動(dòng)視圖

與其他的同類三方庫(kù)對(duì)比的優(yōu)點(diǎn)：

• 使用POP(Protocol Oriented Programming面對(duì)協(xié)議編程)封裝指示器邏輯，可以為所欲為的自定義指示器效果；
• 提供更加全面豐富的效果，交互更加順暢；
• 使用子類化管理cell樣式，邏輯更清晰，擴(kuò)展更簡(jiǎn)單；

Github地址

下載源碼，一睹為快！JXCategoryView

效果預(yù)覽

指示器效果預(yù)覽

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

Cell樣式效果預(yù)覽

說(shuō)明	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-紅點(diǎn)	CellRedDot.gif
自定義cell-背景色漸變	CellBackgroundColorGradient.gif
騰訊視頻效果	TXVedio.gif
自定義cell示例-多行+富文本	AttributeView.gif

特殊效果預(yù)覽

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

要求

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

安裝

手動(dòng)

Clone代碼，把Sources文件夾拖入項(xiàng)目，#import "JXCategoryView.h"，就可以使用了；

CocoaPods

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

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

JXCategoryViewStructure.png

• 指示器樣式自定義：使用POP(Protocol Oriented Programming面對(duì)協(xié)議編程)封裝指示器邏輯，只要遵從JXCategoryIndicatorProtocol協(xié)議，就可以實(shí)現(xiàn)你的指示器效果。參考：JXCategoryIndicatorLineView；
• Cell樣式自定義：使用子類化，基類搭建基礎(chǔ)，子類實(shí)現(xiàn)特殊效果。便于代碼管理，功能擴(kuò)展；參考：JXCategoryNumberView；

特殊說(shuō)明

• 自定義：即使提供了靈活擴(kuò)展，我的源碼也不可能滿足所有情況，建議大家可以通過(guò)fork倉(cāng)庫(kù)，維護(hù)自己的一套效果。也可以直接拖入源文件進(jìn)行修改。
• 個(gè)人主頁(yè)效果：上下左右滾動(dòng)且HeaderView懸浮的實(shí)現(xiàn)，用的是我寫的這個(gè)庫(kù)JXPagingView。
• 垂直列表滾動(dòng)：參考demo工程的VerticalListViewController，未做功能封裝，參考里面的代碼做，多注意注釋，就可以實(shí)現(xiàn)了。

POP說(shuō)明

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

常用屬性說(shuō)明

JXCategoryView常用屬性說(shuō)明

屬性	說(shuō)明
defaultSelectedIndex	默認(rèn)選中的index，用于初始化時(shí)指定選中某個(gè)index
selectedIndex	只讀屬性，當(dāng)前選中的index
cellWidth	cell的寬度，默認(rèn)：JXCategoryViewAutomaticDimension
cellSpacing	cell之間的間距，默認(rèn)20
cellWidthIncrement	cell寬度的補(bǔ)償值，默認(rèn)0
averageCellWidthEnabled	當(dāng)cell內(nèi)容總寬度小于JXCategoryBaseView的寬度，是否將cellWidth均分。默認(rèn)為YES。
contentScrollView	需要關(guān)聯(lián)的contentScrollView，內(nèi)部監(jiān)聽(tīng)contentOffset

Cell樣式常用屬性說(shuō)明

屬性	說(shuō)明
titleColor	titleLabel未選中顏色 默認(rèn)：[UIColor blackColor]
titleSelectedColor	titleLabel選中顏色 默認(rèn)：[UIColor redColor]
titleFont	titleLabel的字體 默認(rèn)：[UIFont systemFontOfSize:15]
titleColorGradientEnabled	title的顏色是否漸變過(guò)渡 默認(rèn)：NO
titleLabelMaskEnabled	titleLabel是否遮罩過(guò)濾 默認(rèn)：NO
titleLabelZoomEnabled	titleLabel是否縮放 默認(rèn)：NO
titleLabelZoomScale	citleLabel縮放比例 默認(rèn)：1.2
imageZoomEnabled	imageView是否縮放 默認(rèn)：NO
imageZoomScale	imageView縮放比例 默認(rèn)：1.2
separatorLineShowEnabled	cell分割線是否展示 默認(rèn)：NO (顏色、寬高可以設(shè)置)
JXCategoryTitleImageType	圖片所在位置：上面、左邊、下面、右邊 默認(rèn)：左邊

指示器常用屬性說(shuō)明

屬性	說(shuō)明
JXCategoryIndicatorComponentView.componentPosition	指示器的位置 默認(rèn)：Bottom
JXCategoryIndicatorComponentView.scrollEnabled	手勢(shì)滾動(dòng)、點(diǎn)擊切換的時(shí)候，是否允許滾動(dòng)，默認(rèn)YES
JXCategoryIndicatorLineView.lineStyle	普通、京東、愛(ài)奇藝效果 默認(rèn)：Normal
JXCategoryIndicatorLineView.lineScrollOffsetX	愛(ài)奇藝效果專用，line滾動(dòng)時(shí)x的偏移量，默認(rèn)為10；
JXCategoryIndicatorLineView.indicatorLineWidth	默認(rèn)JXCategoryViewAutomaticDimension（與cellWidth相等）
JXCategoryIndicatorLineView.indicatorLineViewHeight	默認(rèn)：3
JXCategoryIndicatorLineView.indicatorLineViewCornerRadius	默認(rèn)JXCategoryViewAutomaticDimension （等于self.indicatorLineViewHeight/2）
JXCategoryIndicatorLineView.indicatorLineViewColor	默認(rèn)為[UIColor redColor]
JXCategoryIndicatorTriangleView.triangleViewSize	默認(rèn)：CGSizeMake(14, 10)
JXCategoryIndicatorTriangleView.triangleViewColor	默認(rèn)為[UIColor redColor]
JXCategoryIndicatorImageView.indicatorImageView	設(shè)置image
JXCategoryIndicatorImageView.indicatorImageViewRollEnabled	是否允許滾動(dòng)，默認(rèn)：NO
JXCategoryIndicatorImageView.indicatorImageViewSize	默認(rèn)：CGSizeMake(30, 20)
JXCategoryIndicatorBackgroundView.backgroundViewWidth	默認(rèn)JXCategoryViewAutomaticDimension（與cellWidth相等）
JXCategoryIndicatorBackgroundView.backgroundViewWidthIncrement	寬度增量補(bǔ)償，因?yàn)閎ackgroundEllipseLayer一般會(huì)比實(shí)際內(nèi)容大一些。默認(rèn)10
JXCategoryIndicatorBackgroundView.backgroundViewHeight	默認(rèn)JXCategoryViewAutomaticDimension（與cell高度相等）
JXCategoryIndicatorBackgroundView.backgroundViewCornerRadius	默認(rèn)JXCategoryViewAutomaticDimension(即backgroundViewHeight/2)
JXCategoryIndicatorBackgroundView.backgroundViewColor	默認(rèn)為[UIColor redColor]
JXCategoryIndicatorBallView.ballViewSize	默認(rèn)：CGSizeMake(15, 15)
JXCategoryIndicatorBallView.ballScrollOffsetX	小紅點(diǎn)的偏移量 默認(rèn)：20
JXCategoryIndicatorBallView.ballViewColor	默認(rèn)為[UIColor redColor]

可以多個(gè)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的初始化細(xì)節(jié)參考源碼。 self.categoryView.contentScrollView = self.scrollView; [self.view addSubview:self.categoryView]; 

• 單個(gè)cell刷新：比如紅點(diǎn)示例里面，調(diào)用- (void)reloadCell:(NSUInteger)index
• 所有狀態(tài)重置：數(shù)據(jù)源、屬性配置有變動(dòng)時(shí)（比如從服務(wù)器拉取回來(lái)數(shù)據(jù)），需要調(diào)用reloadData方法刷新?tīng)顟B(tài)。

指示器樣式自定義

倉(cāng)庫(kù)自帶：JXCategoryIndicatorLineView、JXCategoryIndicatorTriangleView、JXCategoryIndicatorImageView、JXCategoryIndicatorBackgroundView、JXCategoryIndicatorBallView

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

• 繼承JXCategoryIndicatorComponentView，內(nèi)部遵從了JXCategoryIndicatorProtocol協(xié)議；
• 實(shí)現(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在進(jìn)行手勢(shì)滑動(dòng)時(shí)，處理指示器跟隨手勢(shì)變化UI邏輯；
  • - (void)jx_selectedCell:(CGRect)cellFrame clickedRelativePosition:(JXCategoryCellClickedPosition)clickedRelativePosition根據(jù)選中的某個(gè)cell，處理過(guò)渡效果；

具體實(shí)例：參考demo工程里面的JXCategoryIndicatorDotLineView

Cell子類化注意事項(xiàng)

倉(cāng)庫(kù)自帶：JXCategoryTitleView、JXCategoryTitleImageView、JXCategoryNumberView、JXCategoryDotView、JXCategoryImageView

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

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

具體實(shí)例：參考demo工程里面的JXCategoryTitleAttributeView

繼承提示

• 任何子類化，view、cell、cellModel三個(gè)都要子類化，即使某個(gè)子類cell什么事情都不做。用于維護(hù)繼承鏈，以免以后子類化都不知道要繼承誰(shuí)了；
• 如果你想完全自定義cell里面的內(nèi)容，那就繼承JXCategoryIndicatorView、JXCategoryIndicatorCell、JXCategoryIndicatorCellModel，就像JXCategoryTitleView、JXCategoryTitleCell、JXCategoryTitleCellModel那樣去做；
• 如果你只是在父類進(jìn)行一些微調(diào)，那就繼承目標(biāo)view、cell、cellModel，對(duì)cell原有控件微調(diào)、或者加入新的控件皆可。就像JXCategoryTitleImageView系列、JXCategoryTitleAttributeView系列那樣去做；

側(cè)滑手勢(shì)

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

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

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

• 點(diǎn)擊處理：

#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;
• 實(shí)現(xiàn)代理方法：

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer { return YES; } 

• 點(diǎn)擊處理：

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

contentScrollView

• 布局靈活：JXCategoryView沒(méi)有與contentScrollView強(qiáng)關(guān)聯(lián)，你甚至可以不設(shè)置這個(gè)屬性，把它當(dāng)做簡(jiǎn)單的SegmentedControl。他們之間布局沒(méi)有任何要求，可以把JXCategoryView放入導(dǎo)航欄、UITableViewSectionHeader等任何你想要的地方。
• 點(diǎn)擊處理：因?yàn)槌浞纸怦?，在JXCategoryView點(diǎn)擊回調(diào)中，你需要添加如下代碼進(jìn)行內(nèi)容滾動(dòng)切換：

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

補(bǔ)充

該倉(cāng)庫(kù)保持隨時(shí)更新，對(duì)于主流新的分類選擇效果會(huì)第一時(shí)間支持。使用過(guò)程中，有任何建議或問(wèn)題，可以通過(guò)以下方式聯(lián)系我：
郵箱：317437084@qq.com
QQ群： 112440151

Github地址

下載源碼，一睹為快！JXCategoryView

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/13828.html