iOS自定义一个仿网易左右滑动切换页面框架
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中有很详细的注释说明,通俗易懂
框架包含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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
2018-07-02 cocoapod使用
2018-07-02 Android-利用LinearGradient实现文字一闪一闪
2015-07-02 android开发隐藏了actionbar仍然短暂闪现的解决方法
2015-07-02 如何灵活使用 ActionBar, Google 音乐ActionBar 隐藏和显示效果
2015-07-02 Activity的绘制流程简单分析(基于android 4.0源码进行分析)
2015-07-02 【Android自定义控件】支持多层嵌套RadioButton的RadioGroup