JXCategoryView.png

騰訊新聞今日頭條、QQ音樂、網易云音樂、京東、愛奇藝、淘寶、天貓、 、微博等所有主流APP分類切換滾動視圖

與其他的同類三方庫對比的優點：

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

Github地址

下載源碼，一睹為快！JXCategoryView

效果預覽

指示器效果預覽

說明	Gif
指示器LineView	LineView.gif
指示器LineView京東風格	JDLineStyle.gif
指示器LineView愛奇藝風格	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樣式效果預覽

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

特殊效果預覽

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

要求

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

安裝

手動

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

CocoaPods

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

結構圖

JXCategoryViewStructure.png

• 指示器樣式自定義：使用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搭配使用，但是效果需要自己把控，效果不是越多越好。參考混合使用；

使用

//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的初始化細節參考源碼。 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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/13828.html