首页 >iOS开发

iOS:一用就上瘾的CategoryView

2018-08-16 14:21 编辑: 游星啊 分类:iOS开发 来源:pujiaxin33的投稿

A powerful and easy to use category view (segmentedcontrol, pagingview, pagerview, pagecontrol, scrollview) (腾讯新闻、网易新闻、今日头条、QQ音乐、京东、爱奇艺等所有主流APP分类切换滚动视图)

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

  • 效果更加全面,使用更加方便;

  • 使用子类化管理代码,逻辑更清晰,功能扩展更简单;

Github地址

下载源码,一睹为快!JXCategoryView

效果预览

说明Gif
颜色渐变

TitleColorGradient.gif

大小缩放

Zoom.gif

指示器LineView

LineView.gif

指示器LineView京东风格

JDLineStyle.gif

指示器LineView爱奇艺风格

IQIYILineStyle.gif

指示器EllipseLayer

BackgroundEllipseLayer.gif

指示器EllipseLayer遮罩

TitleMask.gif

指示器ImageView(小船)

IndicatorImageView.gif

指示器滚动效果(足球)

Football.gif

指示器背景图(菜篮)

BackgroundImageView.gif

SegmentedControl

SegmentedControl.gif

导航栏使用

SegmentedControlNavi.gif

分割线

SeparatorLine.gif

TitleImage_Top

TitleImageTop.gif

TitleImage_Left

TitleImageLeft.gif

TitleImage_Bottom

TitleImageBottom.gif

TitleImage_Right

TitleImageRight.gif

TitleImage_OnlyImage

TitleImageOnlyImage.gif

自定义-数字

Number.gif

个人主页(上下左右滚动、header悬浮)

UserProfile.gif

要求

  • iOS 8.0+

  • Xcode 9+

  • Objective-C

安装

手动

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

CocoaPods

target '' do
    pod 'JXCategoryView'end

结构图

JXCategoryViewStructure.png

  • 学习借鉴了MJRefresh的子类化思想:基类搭建基础,子类实现特殊效果。便于代码管理,功能扩展;

  • JXCategoryComponentView、JXCategoryBackgroundImageView、JXCategoryLineStyleView完成指示器效果;

    • 如果要自定义指示器效果,选择其中一个继承,但是需要修改继承链,比如你继承JXCategoryComponentView实现XXView,那么之前继承于它的JXCategoryBackgroundImageView就要继承于XXView,不然XXView的效果不能得到传递;

  • JXCategoryTitleView、JXCategoryTitleImageView、JXCategoryNumberView完成cell显示自定义;

    • 如果要自定义cell样式,选择其中一个继承,并修改cell样式;

  • 特殊说明: 即使提供了灵活扩展,我的源码也不可能满足所有情况,建议大家可以通过fork仓库,维护自己的一套效果。也可以直接拖入源文件进行修改。

  • 个人主页效果:上下左右滚动且HeaderView悬浮的实现,用的是我写的这个库JXPagingView

常用属性说明

多个属性可以任意搭配使用,但是效果需要自己把控,效果不是越多越好哟

属性说明
defaultSelectedIndex默认选中的index,用于初始化时指定选中某个index
selectedIndex只读属性,当前选中的index
cellWidthcell的宽度,默认:JXCategoryViewAutomaticDimension
cellSpacingcell之间的间距,默认20
averageCellWidthEnabled当cell内容总宽度小于JXCategoryBaseView的宽度,是否将cellWidth均分。默认为YES。
contentScrollView需要关联的contentScrollView,内部监听contentOffset
titleColortitleLabel未选中颜色 默认:[UIColor blackColor]
titleSelectedColortitleLabel选中颜色 默认:[UIColor redColor]
titleFonttitleLabel的字体 默认:[UIFont systemFontOfSize:15]
titleColorGradientEnabledtitle的颜色是否渐变过渡 默认:NO
titleLabelMaskEnabledtitleLabel是否遮罩过滤 默认:NO
JXCategoryLineStyle京东、爱奇艺效果 默认:None
JXCategoryTitleImageType图片所在位置:上面、左边、下面、右边 默认:左边
backgroundContainerView承载背景指示器视图的容器,比如backgroundEllipseLayer、backgroundImageView
indicatorLineViewShowEnabled是否显示指示器LineView 默认:YES (颜色、宽高可以设置)
indicatorImageViewShowEnabled指示器ImageView是否展示 默认:NO (indicatorImageView公开、宽高可以设置)
indicatorImageViewRollEnabled指示器ImageView是否滚动(足球效果) 默认:NO
backgroundEllipseLayerShowEnabled指示器backgroundEllipseLayer是否展示 默认:NO (颜色、宽、高、圆角、宽度补偿可以设置)
zoomEnabledcell是否缩放 默认:NO
zoomScalecell缩放比例 默认:1.2
separatorLineShowEnabledcell分割线是否展示 默认:NO (颜色、宽高可以设置)
backgroundImageViewShowEnabledbackgroundImageView是否展示 默认:NO (backgroundImageView公开、宽高可以设置)

使用

self.categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(00, WindowsSize.width, categoryViewHeight)];
self.categoryView.delegate = self;
self.categoryView.contentScrollView = self.scrollView;
//------配置各类属性------//
[self.view addSubview:self.categoryView];

数据源、属性配置有变动时(比如从服务器拉取回来数据),需要调用reloadDatas方法刷新状态。

子类化注意事项

任何子类化,view、cell、cellModel三个都要子类化,即使某个子类cell什么事情都不做。用于维护继承链,以免以后子类化都不知道要继承谁了

子类化cell样式

主要重载的方法,参考:JXCategoryTitleView、JXCategoryTitleImageView、JXCategoryNumberView

  • - (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左右滚动切换的时候,进行状态刷新;

指示器样式自定义

参考:JXCategoryComponentView、JXCategoryBackgroundImageView、JXCategoryLineStyleView

  • 背景指示器视图自定义,添加到backgroundContainerView上面(比如backgroundEllipseLayer、backgroundImageView);

  • 底部指示图自定义,添加collectionView上面(比如indicatorLineView、indicatorImageView);

  • - (void)refreshState重载,根据属性刷新指示器状态;

  • - (void)contentOffsetOfContentScrollViewDidChanged:(CGPoint)contentOffset重载,根据滚动进度刷新指示器状态;

  • - (BOOL)selectItemWithIndex:(NSInteger)index重载,自定义点击的时候指示器刷新逻辑;

侧滑手势

首先,在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

Github地址

下载源码,一睹为快!JXCategoryView

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:iOS动画折线图
下一篇:UIWebView与UITableView的嵌套方案
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部