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 ...
随机推荐
- Quartz.Net 学习随手记之03 配置文件
第一种方式:直接写入代码中 NameValueCollection properties = new NameValueCollection(); properties["quartz.sc ...
- MySQL数据库之sql_mode解释
在MySQL5.6中,默认的SQL模式为:NO_ENGINE_SUBSTITUTION, 而在MySQL5.7中默认的SQL模式为:ONLY_FULL_GROUP_BY, STRICT_TRANS_T ...
- java从包package中获取所有的Class
1.从包package中获取所有的Class方法: /** * 从包package中获取所有的Class * @param pack * @return */ public static List ...
- SM30维护视图屏蔽按钮
标准维护视图 GUI状态 ESLG 编辑按钮 AEND 达到效果 DATA: l_act TYPE char1, l_name TYPE dd02v-tabname. DATA: lt_vimex ...
- Flutter 流式布局列表实例+上拉加载
页面变化的几种方式: 一.StatefulWidget的setState形式 先声明两个变量. ; List<Map> list = []; 写了一个方法,获取数据: void _getH ...
- WebGL学习之纹理盒
原文地址:WebGL学习之纹理盒 我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...
- NVIDIA显卡电源不足
NVIDIA显卡 Ubuntu16.04安装驱动后出现问题:Unable to determine the device handle for GPUXXX 安装NVIDIA驱动后输入:nvidia- ...
- 理解KNN算法中的k值-knn算法中的k到底指的是什么 ?
2019-11-09 20:11:26为方便自己收藏学习,转载博文from:https://blog.csdn.net/llhwx/article/details/102652798 knn算法是指对 ...
- RH124-3 目录结构_转
在linux里安装的时候,是可以指定某分区装在某文件夹里 目录意义 /bin 存放命令,不可以在装系统单独挂载分区 /home /dev 存放硬件设备 不可以单独挂载分区 /boot 500M 和系统 ...
- CentOS7使用yum和源码升级内核
原文:https://blog.csdn.net/bayin4937/article/details/100949870 两种方式升级内核 一.yum升级内核 参考:https://blog.csdn ...