iOS自定义一个仿网易左右滑动切换页面框架
FSScrollContentView
github:https://github.com/shunFSKi/FSScrollContentView
这是本人在整理项目时抽离了业务代码整理封装的一个通俗易懂较为实用的框架。
支持点击上方标题,切换下方内容页面,也支持滑动下方内容区域,切换上方的标题。
- 主要用来适用于多个视图左右滑动,切换顶部标签控制显示视图的需求
- 仿网易新闻,一些电商app的样式实现
- 实现简单,通俗易懂,支持一些简单的自定义
- 自动适应标签数量控制滑动或不能滑动
效果图

使用方式
1、cocoapods
pod search FSScrollContentView
如果找不到执行pod setup
pod 'FSScrollContentView'
2、添加文件
直接clone代码后将项目中的FSScrollContentViewLib文件夹导入自己项目中,导入FSScrollContentView.h头文件
API使用说明
其实demo中有很详细的注释说明,通俗易懂
框架包含FSPageContentView和FSSegmentTitleView两个完全独立的类文件,可酌情使用
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属性修改
/**废弃/DEPRECATED_1.0.1
标题数组,必须传值
*/
@property (nonatomic, strong) NSArray *titlesArr;
/**
标题文字间距,默认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自定义一个仿网易左右滑动切换页面框架的更多相关文章
- iOS开发之多表视图滑动切换示例(仿"头条"客户端)---优化篇
前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展 ...
- ViewPager源码分析——滑动切换页面处理过程
上周客户反馈Contacts快速滑动界面切换tab有明显卡顿,让优化. 自己验证又没发现卡顿现象,但总得给客户一个技术性的回复,于是看了一下ViewPager源码中处理滑动切换tab的过程. View ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- jquery mobile左右滑动切换页面
jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() { $.mobile.ch ...
- iOS 自定义返回按钮,保留系统滑动返回
原文链接 自定义返回按钮保留系统滑动返回手势.gif 1.简介 使用苹果手机,最喜欢的就是用它的滑动返回.作为一个开发者,我们在编写很多页面的时候,总是会因为这样那样的原因使得系统的滑动返回不可用.使 ...
- uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
效果图: tab栏可以滑动,切换页面跟随tab栏同步滑动.这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度. 下面是代码 html < ...
- 在Dynamics CRM中自定义一个通用的查看编辑注释页面
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复162或者20151016可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 注释在CRM中的显示是比较特别, ...
- 分享一个仿网易新闻客户端iPhone版的标签式导航ViewController
该Controller是一个容器,用于容纳其他的controller.效果与网易新闻客户端的标签式导航基本一样: (1)点击上面的标签,可以切换到对应的controller,标签下面的红色提示条的长度 ...
- 自定义一个仿Spinner
两个布局文件: adpter_list.xml <?xml version="1.0" encoding="utf-8"?> <LinearL ...
随机推荐
- 016-mac下ps
参看 http://www.ddooo.com/softdown/65448.htm#dltab 1.下载 安装运行:断网后,双击Photoshop CS6.dmg进入安装界面 2.安装提示:安装程序 ...
- 算法习题---3.12浮点数(UVa11809)
一:题目 尴尬的非会员水印 二:题目摘要 1.int和float比较 int共32位,可以表示的最大的数为2^32次方 float虽然也是32位,但是是以指数形式保存,指数占8位(含符号),最大127 ...
- 一百四十八:部署python项目之环境依赖
环境:centos7 + python3.6 准备工作,生成项目requirements.txt文件,用于存放第三方库和版本信息:pip freeze > requirements.txt,并且 ...
- java对list进行排序
主要讲述对list进行排序的几种方式 1.先来个简单的,上代码 import java.util.ArrayList; import java.util.Collections; import jav ...
- python调用HTMLTestRunner+unittest实现一次执行多个测试类,并生成与每个测试类对应的测试报告,具体看代码,附上整个project代码
python自动化框架雏形,根据自己需要封装:ui自动化,接口自动化均可适用,python版本为python3.x,不要问我为什么不用python2.x,附上整个project代码:http://fi ...
- spark:neither spark.yarn.jars not spark.yarn.archive is set
1.Spark启动警告:neither spark.yarn.jars not spark.yarn.archive is set,falling back to uploading librarie ...
- iOS的推送证书过期的处理
1.删除MAC上钥匙串访问中对应的推送证书.<根据过期日期看> 2.登录苹果开发者后台,revoke删除已过期推送证书(貌似会自己消失不用删除,具体记不清了...),然后为对应App ID ...
- jQuery BlockUI Plugin Demo 6(Options)
Options BlockUI's default options look (exactly) like this: // override these in your code to change ...
- idea的enable auto-import/内存设置
设置pom.xml依赖的自动导入 设置idea的memory heap On the Help menu, click Edit Custom VM Options. Set the -Xmx opt ...
- 解决kalilinux:“下列签名无效: KEYEXPIRED 1425567400"
Kali linux由于太长时间未更新,而出现GPG错误 KEYEXPIRED 1425567400.经检查源未出现问题可以解析,deb也不冲突,就是密钥过期了. 解决方式 使用一条命令,添加新的密钥 ...