FSScrollContentView

github:https://github.com/shunFSKi/FSScrollContentView
这是本人在整理项目时抽离了业务代码整理封装的一个通俗易懂较为实用的框架。
支持点击上方标题,切换下方内容页面,也支持滑动下方内容区域,切换上方的标题。

  • 主要用来适用于多个视图左右滑动,切换顶部标签控制显示视图的需求
  • 仿网易新闻,一些电商app的样式实现
  • 实现简单,通俗易懂,支持一些简单的自定义
  • 自动适应标签数量控制滑动或不能滑动

效果图

scrollContentView.gif

使用方式

1、cocoapods

pod search FSScrollContentView
如果找不到执行pod setup
pod 'FSScrollContentView'

2、添加文件

直接clone代码后将项目中的FSScrollContentViewLib文件夹导入自己项目中,导入FSScrollContentView.h头文件

API使用说明

其实demo中有很详细的注释说明,通俗易懂
框架包含FSPageContentViewFSSegmentTitleView两个完全独立的类文件,可酌情使用

FSPageContentView

  • 创建FSPageContentView
/**
对象方法创建FSPageContentView @param frame frame
@param childVCs 子VC数组
@param parentVC 父视图VC
@param delegate delegate
@return FSPageContentView
*/
- (instancetype)initWithFrame:(CGRect)frame childVCs:(NSArray *)childVCs parentVC:(UIViewController *)parentVC delegate:(id<FSPageContentViewDelegate>)delegate;
  • FSPageContentView属性修改
/**
设置contentView当前展示的页面索引,默认为0
*/
@property (nonatomic, assign) NSInteger contentViewCurrentIndex;
  • FSPageContentView代理方法
/**
FSPageContentView开始滑动 @param contentView FSPageContentView
*/
- (void)FSContentViewWillBeginDragging:(FSPageContentView *)contentView; /**
FSPageContentView滑动调用 @param contentView FSPageContentView
@param startIndex 开始滑动页面索引
@param endIndex 结束滑动页面索引
@param progress 滑动进度
*/
- (void)FSContentViewDidScroll:(FSPageContentView *)contentView startIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex progress:(CGFloat)progress; /**
FSPageContentView结束滑动 @param contentView FSPageContentView
@param startIndex 开始滑动索引
@param endIndex 结束滑动索引
*/
- (void)FSContenViewDidEndDecelerating:(FSPageContentView *)contentView startIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex;

FSSegmentTitleView

  • 创建FSSegmentTitleView
/**
对象方法创建FSSegmentTitleView @param frame frame
@param titlesArr 标题数组,必须传值
@param delegate delegate
@param incatorType 指示器类型
@return FSSegmentTitleView
*/
- (instancetype)initWithFrame:(CGRect)frame titles:(NSArray *)titlesArr delegate:(id<FSSegmentTitleViewDelegate>)delegate indicatorType:(FSIndicatorType)incatorType;
  • FSSegmentTitleView属性修改

/**
标题数组,必须传值
*/
@property (nonatomic, strong) NSArray *titlesArr;
废弃/DEPRECATED_1.0.1

/**
标题文字间距,默认20
*/
@property (nonatomic, assign) CGFloat itemMargin; /**
当前选中标题索引,默认0
*/
@property (nonatomic, assign) NSInteger selectIndex; /**
标题字体大小,默认15
*/
@property (nonatomic, strong) UIFont *titleFont; /**
标题正常颜色,默认black
*/
@property (nonatomic, strong) UIColor *titleNormalColor; /**
标题选中颜色,默认red
*/
@property (nonatomic, strong) UIColor *titleSelectColor; /**
指示器颜色,默认与titleSelectColor一样,在FSIndicatorTypeNone下无效
*/
@property (nonatomic, strong) UIColor *indicatorColor; /**
在FSIndicatorTypeCustom时可自定义此属性,为指示器一端延伸长度,默认5
*/
@property (nonatomic, assign) CGFloat indicatorExtension;
  • FSSegmentTitleView代理方法
/**
切换标题 @param titleView FSSegmentTitleView
@param startIndex 切换前标题索引
@param endIndex 切换后标题索引
*/
- (void)FSSegmentTitleView:(FSSegmentTitleView *)titleView startIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex;
  • FSSegmentTitleView枚举类型
typedef enum : NSUInteger {
FSIndicatorTypeDefault,//默认与按钮长度相同
FSIndicatorTypeEqualTitle,//与文字长度相同
FSIndicatorTypeCustom,//自定义文字边缘延伸宽度
FSIndicatorTypeNone,
} FSIndicatorType;//指示器类型枚举

For example

详细使用可以查看demo

self.titleView = [[FSSegmentTitleView alloc]initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.bounds), 50) delegate:self indicatorType:0];
self.titleView.titlesArr = @[@"全部",@"服饰穿搭",@"生活百货",@"美食吃货",@"美容护理",@"母婴儿童",@"数码家电",@"其他"];
[self.view addSubview:_titleView]; NSMutableArray *childVCs = [[NSMutableArray alloc]init];
for (NSString *title in self.titleView.titlesArr) {
ChildViewController *vc = [[ChildViewController alloc]init];
vc.title = title;
[childVCs addObject:vc];
}
self.pageContentView = [[FSPageContentView alloc]initWithFrame:CGRectMake(0, 114, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds) - 90) childVCs:childVCs parentVC:self delegate:self];
[self.view addSubview:_pageContentView]; - (void)FSSegmentTitleView:(FSSegmentTitleView *)titleView startIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex
{
self.pageContentView.contentViewCurrentIndex = endIndex;
} - (void)FSContenViewDidEndDecelerating:(FSPageContentView *)contentView startIndex:(NSInteger)startIndex endIndex:(NSInteger)endIndex
{
self.titleView.selectIndex = endIndex;
}

版本

  • 2017.4.28 ——> 1.0初始版本
  • 2017.5.7 ——> 1.0.1修改初始化方法,添加了标题选中自定义文字大小类型

作者:PURE蓝胖子
链接:https://www.jianshu.com/p/34cecb066cc1
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

iOS自定义一个仿网易左右滑动切换页面框架的更多相关文章

  1. iOS开发之多表视图滑动切换示例(仿"头条"客户端)---优化篇

    前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展 ...

  2. ViewPager源码分析——滑动切换页面处理过程

    上周客户反馈Contacts快速滑动界面切换tab有明显卡顿,让优化. 自己验证又没发现卡顿现象,但总得给客户一个技术性的回复,于是看了一下ViewPager源码中处理滑动切换tab的过程. View ...

  3. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  4. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  5. iOS 自定义返回按钮,保留系统滑动返回

    原文链接 自定义返回按钮保留系统滑动返回手势.gif 1.简介 使用苹果手机,最喜欢的就是用它的滑动返回.作为一个开发者,我们在编写很多页面的时候,总是会因为这样那样的原因使得系统的滑动返回不可用.使 ...

  6. uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

    效果图: tab栏可以滑动,切换页面跟随tab栏同步滑动.这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度. 下面是代码 html < ...

  7. 在Dynamics CRM中自定义一个通用的查看编辑注释页面

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复162或者20151016可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 注释在CRM中的显示是比较特别, ...

  8. 分享一个仿网易新闻客户端iPhone版的标签式导航ViewController

    该Controller是一个容器,用于容纳其他的controller.效果与网易新闻客户端的标签式导航基本一样: (1)点击上面的标签,可以切换到对应的controller,标签下面的红色提示条的长度 ...

  9. 自定义一个仿Spinner

    两个布局文件: adpter_list.xml <?xml version="1.0" encoding="utf-8"?> <LinearL ...

随机推荐

  1. osgViewer::View::setUpViewOnSingleScreen()

    void ViewerBase::frame(double simulationTime) { if (_done) return; // OSG_NOTICE<<std::endl< ...

  2. IDEA启动tomcat报错:java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext、ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component

    先看错误日志: -May- ::.M26 -May- :: :: UTC -May- ::29.845 信息 [main] org.apache.catalina.startup.VersionLog ...

  3. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_17-身份校验-身份校验过虑器编写

    5 身份校验 5.1 需求分析 本小节实现网关连接Redis校验令牌: 1.从cookie查询用户身份令牌是否存在,不存在则拒绝访问 2.从http header查询jwt令牌是否存在,不存在则拒绝访 ...

  4. trylock方法

    synchronized 是不占用到手不罢休的,会一直试图占用下去. 与 synchronized 的钻牛角尖不一样,Lock接口还提供了一个trylock方法.trylock会在指定时间范围内试图占 ...

  5. APP手工项目02-用例编写-测试报告-fiddler弱网测试

    回顾 APP专项测试(兼容性,安装,卸载,升级,交叉事件,PUSH消息,性能,其他类型) 项目环境(开发环境,测试环境,准生产环境,生产环境) APP内测发布平台(蒲公英,fir.im)支持apk,i ...

  6. 123457123456#0#-----com.twoapp.mathGame13--前拼后广--13种数学方法jiemei

    com.twoapp.mathGame13--前拼后广--13种数学方法jiemei

  7. 腾讯ios内部视频,什么垃圾视频

    前几天朋友在网上花钱买了个,腾讯ios内部视频,我也跟着下载了, 看着这列表,我感觉没什么东西,一看就是基础的东西,完全没有实战的内容,就像培训机构骗学生的东西啊,讲些毛理论,结果一到实战了,问个Sc ...

  8. html页面设置自动刷新

    在中添加如下: <meta HTTP-EQUIV="REFRESH" CONTENT="1"> 其中CONTENT对应刷新的间隔时间,这里为1秒. ...

  9. Python 动态规划算法

    背包问题 假设你是一个小偷,背一个可装4磅东西的背包.可盗窃的商品有如下3件: 音响,4磅,价值3000美元 笔记本电脑,3磅,价值2000美元 吉他,1磅,价值1500美元 为了让盗窃的商品价值最高 ...

  10. python字典推导式 - python基础入门(17)

    在昨天的文章中,我们介绍了关于python列表推导式 的使用,字典推导式使用方法其实也类似,也是通过循环和条件判断表达式配合使用,不同的是字典推导式返回值是一个字典,所以整个表达式需要写在{}内部. ...