ios 顶部tab滑动实现_iOS开发之多表视图滑动切换示例(仿头条客户端)

好长时间没为大家带来iOS开发干货的东西了,今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例。在Demo中对所需的组件进行的简单封装,在封装的组件中使用的是纯代码的形式,如果想要在项目中进行使用,稍微进行修改即可。

废话少说,先介绍一下功能点,下图是整个Demo的功能点,最上面左边的TabBarButtonItem是用来减少条目的,比如下图有三个按钮,点击减号会减少一个条目。右边的为增加一个条目。点击相应的按钮是切换到对应的表视图上,下方红色的是滑动的指示器,同时支持手势滑动。运行具体效果如下图所示。

  

    

一:实现方案

最上方是一个View, View上面实例化了一些按钮,平分屏幕的宽度,下方是一个ScrollView, ScrollView上面放了一些表视图,点击不同的Button, 滑动到对应的表示图上。除了点击按钮,还可以进行滑动切换,切换时,红色的指示器也会随之滑动。

主要的技术点就是通过ScrollView的回调,通过事件的响应来改变ScrollView的ContentOffset的值。在回调中根据ContentOffset的值来计算红色指示器的偏移量。

二:核心代码

1.组件中的主要属性

把上面整个视图进行了封装,命名为SlideTabBarView,下面的代码是主要属性:

1 @interface SlideTabBarView()

2 ///@brife 整个视图的大小

3 @property (assign) CGRect mViewFrame;4

5 ///@brife 下方的ScrollView

6 @property (strong, nonatomic) UIScrollView *scrollView;7

8 ///@brife 上方的按钮数组

9 @property (strong, nonatomic) NSMutableArray *topViews;10

11 ///@brife 下方的表格数组

12 @property (strong, nonatomic) NSMutableArray *scrollTableViews;13

14 ///@brife TableViews的数据源

15 @property (strong, nonatomic) NSMutableArray *dataSource;16

17 ///@brife 当前选中页数

18 @property (assign) NSInteger currentPage;19

20 ///@brife 下面滑动的View

21 @property (strong, nonatomic) UIView *slideView;22 @end

2.初始化方法如下,在调用初始化方法时需要传入SlideTabBarView的frame和选项卡的个数,初始化函数会调用一系列的初始化方法对组件进行初始化,代码如下:

1 -(instancetype)initWithFrame:(CGRect)frame WithCount: (NSInteger) count{2 self =[super initWithFrame:frame];3

4 if(self) {5 _mViewFrame =frame;6 _tabCount =count;7 _topViews =[[NSMutableArray alloc] init];8 _scrollTableViews =[[NSMutableArray alloc] init];9

10 [self initDataSource];11

12 [self initScrollView];13

14 [self initTopTabs];15

16 [self initDownTables];17

18 [self initDataSource];19

20 [self initSlideView];21

22 }23

24 returnself;25 }

3.initDataSource方法主要负责模拟生成下方TableView要显示的数据。代码如下:

#pragma mark -- 初始化表格的数据源

-(void) initDataSource{

_dataSource=[[NSMutableArray alloc] initWithCapacity:_tabCount];for (int i = 1; i <= _tabCount; i ++) {

NSMutableArray*tempArray = [[NSMutableArray alloc] initWithCapacity:20];for (int j = 1; j <= 20; j ++) {

NSString*tempStr = [NSString stringWithFormat:@"我是第%d个TableView的第%d条数据。", i, j];

[tempArray addObject:tempStr];

}

[_dataSource addObject:tempArray];

}

}

4.红色滑动指示器的初始化代码如下所示:

#pragma mark -- 初始化滑动的指示View

-(void) initSlideView{

CGFloat width= _mViewFrame.size.width /_tabCount;

_slideView= [[UIView alloc] initWithFrame:CGRectMake(0, TOPHEIGHT - 5, width, 5)];

[_slideView setBackgroundColor:[UIColor redColor]];

[self addSubview:_slideView];

}

5.ScrollView的初始化代码如下, 指定ScrollView的大小位置以及背景颜色,并且设置分页可用并添加代理。

#pragma mark -- 实例化ScrollView

-(void) initScrollView{

_scrollView= [[UIScrollView alloc] initWithFrame:CGRectMake(0, _mViewFrame.origin.y, _mViewFrame.size.width, _mViewFrame.size.height -TOPHEIGHT)];

_scrollView.contentSize= CGSizeMake(_mViewFrame.size.width * _tabCount, _mViewFrame.size.height - 60);

_scrollView.backgroundColor=[UIColor grayColor];

_scrollView.pagingEnabled=YES;

_scrollView.delegate =self;

[self addSubview:_scrollView];

}

6.添加上方的按钮,根据传入的个数来实例化多个按钮。

1 #pragma mark -- 实例化顶部的tab

2 -(void) initTopTabs{3 CGFloat width = _mViewFrame.size.width /_tabCount;4

5 for (int i = 0; i < _tabCount; i ++) {6

7 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(i * width, 0, width, TOPHEIGHT)];8

9 view.backgroundColor =[UIColor lightGrayColor];10

11 if (i % 2) {12 view.backgroundColor =[UIColor grayColor];13 }14

15 UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, width, TOPHEIGHT)];16 button.tag =i;17 [button setTitle:[NSString stringWithFormat:@"按钮%d", i+1] forState:UIControlStateNormal];18 [button addTarget:self action:@selector(tabButton:) forControlEvents:UIControlEventTouchUpInside];19 [view addSubview:button];20

21

22 [_topViews addObject:view];23 [self addSubview:view];24 }25 }

7.点击按钮触发的方法如下:

1 #pragma mark --点击顶部的按钮所触发的方法

2 -(void) tabButton: (id) sender{3 UIButton *button =sender;4 [_scrollView setContentOffset:CGPointMake(button.tag * _mViewFrame.size.width, 0) animated:YES];5 }

8.初始化下方的多个表视图:实例化表视图,并指定委托回调。

1 #pragma mark --初始化下方的TableViews

2 -(void) initDownTables{3

4 for (int i = 0; i < _tabCount; i ++) {5

6 UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(i * _mViewFrame.size.width, 0, _mViewFrame.size.width, _mViewFrame.size.height -TOPHEIGHT)];7 tableView.delegate =self;8 tableView.dataSource =self;9

10 [_scrollTableViews addObject:tableView];11 [_scrollView addSubview:tableView];12 }13

14 }

9.ScrollView的回调方法如下,下面最后一个代理方法是根据ScrollView的偏移量来计算红色指示器的偏移量,第二个是滑动到哪个tableView,然后进行哪个TableView的数据加载。

1 #pragma mark -- scrollView的代理方法

2 -(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{3 [self scrollViewDidEndDecelerating:scrollView];4 }5

6 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView7

8 {9 _currentPage = _scrollView.contentOffset.x/_mViewFrame.size.width;10

11 UITableView *currentTable =_scrollTableViews[_currentPage];12 [currentTable reloadData];13

14 }15

16 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{17 if([_scrollView isEqual:scrollView]) {18 CGRect frame =_slideView.frame;19 frame.origin.x = scrollView.contentOffset.x/_tabCount;20 _slideView.frame =frame;21 }22 }

10.TableView的代理方法如下,数据源就是我们刚才做的假数据,Cell是由Xib实现的,使用的时候注册一下就可用了。

1 #pragma mark -- talbeView的代理方法

2 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{3 return 1;4 }5

6 -(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{7 NSMutableArray *tempArray =_dataSource[_currentPage];8 returntempArray.count;9 }10

11 -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{12 return 60;13 }14

15 -(UITableViewCell *)tableView:tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{16

17 BOOL nibsRegistered=NO;18 if (!nibsRegistered) {19 UINib *nib=[UINib nibWithNibName:@"SlideBarCell"bundle:nil];20 [tableView registerNib:nib forCellReuseIdentifier:@"SlideBarCell"];21 nibsRegistered=YES;22 }23

24

25 SlideBarCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SlideBarCell"];26 if([tableView isEqual:_scrollTableViews[_currentPage]]) {27 cell.tipTitle.text =_dataSource[_currentPage][indexPath.row];28 }29

30 returncell;31 }

Demo在GitHub上的分享地址:https://github.com/lizelu/SliderTabBar

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/311216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

上元节的灯会(灭)-区间dp

题目背景 上元节的庙会上&#xff0c;牛宝靠自己的聪明才智成功破解了花灯阵&#xff0c;点亮了在场所有花灯&#xff0c;但他没料到的是这个游戏包含AB两个项目&#xff0c;A项目就是点亮所有花灯&#xff0c;而B项目则是熄灭所有花灯。不过点亮的是花灯阵&#xff0c;熄灭的…

Asp.Net Core 中IdentityServer4 授权中心之应用实战

一、前言查阅了大多数相关资料&#xff0c;搜索到的IdentityServer4 的应用文章大多是比较简单并且多是翻译官网的文档编写的&#xff0c;我这里在 Asp.Net Core 中IdentityServer4 的应用分析中会以一个电商系统架构升级过程中普遍会遇到的场景进行实战性讲述分析&#xff0c;…

交通标志识别项目教程

项目结构图 下载好项目压缩包后解压&#xff0c;得到以上的文件&#xff0c;首先将画红圈的文件删除&#xff08;如果有&#xff09; 安装软件 安装Anaconda 安装Pycharm 安装格式工厂 在上图中这个位置输入cmd回车&#xff0c;即可打开命令终端。用这样的方式打开命令终端…

内存超频trfc_这只是开始?四款DDR4内存超频效果对比

原标题&#xff1a;这只是开始&#xff1f;四款DDR4内存超频效果对比之前有人说DDR4内存的频率极限是5000MHz&#xff0c;但在最近结束的台湾电脑展上&#xff0c;有些内存的默认频率已经达到了4400MHz&#xff0c;看样子5000MHz的频率极限很快要实现了&#xff0c;由此也说明5…

素数-试除法和埃式筛选法模板

试除法&#xff1a; bool is_prime(int n) {if (n < 1) return false;for (int i 2;i<sqrt(n);i)//这样写更好!if (n % i0) return false;return true; }埃式筛选法&#xff1a; const int N 1e7; int prime[N 1]; bool vis[N 1];int n_prime(int n) {int k 0;mem…

C# 视频监控系统

去过工厂或者仓库的都知道&#xff0c;在工厂或仓库里面&#xff0c;会有很多不同的流水线&#xff0c;大部分的工厂或仓库&#xff0c;都会在不同流水线的不同工位旁边安装一台电脑&#xff0c;一方面便于工位上的师傅把产品的重要信息录入系统&#xff0c;便于公司系统数据采…

sklearn svm如何选择核函数_机器学习之支持向量机多种核模型对比

机器学习xueyifeiyun1989zx&#xff0c;公众号&#xff1a;围着围巾的小黑机器学习之监督学习实战前文我们提到机器学习中的监督学习&#xff0c;其中有一个模型是我们提到的但是没有训练测试的&#xff0c;叫做支持向量机(简称SVM)。支持向量机也是监督学习里面一个非常容易理…

7的序列-数论

题目背景 墨家机关城即将被攻陷&#xff0c;墨家家主无意间发现了一道逃生密道&#xff0c;但这道密道需要密码&#xff0c;机智的你决定参与密码的破译。 题目描述 密码门上有两行数字序列&#xff0c;数字均为非负整数&#xff0c;根据门上的古语&#xff0c;你需要求出满足…

程序员过关斩将--从每秒6000写请求谈起

点击上方“蓝字”关注我们菜菜哥&#xff0c;紧急求助呀怎么回事&#xff1f;产品经理砍你了&#xff1f;没有&#xff0c;只是写了个新项目&#xff0c;上线就被压垮了什么功能&#xff0c;这么强悍&#xff1f;一个记录用户观看视频进度信息的功能那如果用户基数大&#xff0…

批量将PPM格式图片转化为JPG格式

将PPM格式图片转化为JPG格式 做图像识别的时候数据集常常是ppm格式的&#xff0c;虽然不影响建模训练&#xff0c;但是我们电脑往往不支持ppm格式的图像展示。 比如到做交通标志识别的时候用到的BelgiumTS交通数据集或者德国GTSRB数据集 下载后得到都是ppm格式的图像。 格式转…

python数据收集整理教案_数据收集整理教案讲解学习

一、数据收集整理第一课时教学目标初步体验数据收集、整理、描述的过程&#xff0c;会用分类数数的方法将数据整理成简单的统计表&#xff0c;初步认识统计表&#xff0c;能正确填写统计表&#xff0c;能从中获得简单统计的结果。通过对学生身边有趣事例的调查活动&#xff0c;…

hdu1873 看病要排队-优先队列

Problem Description 看病要排队这个是地球人都知道的常识。 不过经过细心的0068的观察&#xff0c;他发现了医院里排队还是有讲究的。0068所去的医院有三个医生&#xff08;汗&#xff0c;这么少&#xff09;同时看病。而看病的人病情有轻重&#xff0c;所以不能根据简单的先来…

Magicodes.IE 2.2里程碑需求和建议征集

简介Magicodes.IE是导入导出通用库&#xff0c;支持Dto导入导出以及动态导出&#xff0c;支持Excel、Word、Pdf、Csv和Html。已加入NCC开源组织。Magicodes.IE 2.0发布Github&#xff1a;https://github.com/dotnetcore/Magicodes.IE码云&#xff08;手动同步&#xff0c;不维护…

启动azkaban报错_解决启动Azkaban报错问题:java.lang.NoSuchMethodError: com.google.comm

问题描述&#xff1a;启动Azkaban报错&#xff1a;java.lang.NoSuchMethodError:com.google.common.collect.ImmutableMap.toImmutableMap解决方法&#xff1a;从报错信息来看&#xff0c;是找不到toImmutableMap这个方法。首先找到类ImmutableMap对应的Jar包为guava&#xff0…

(一)tensorflow笔记:Tensor数据类型

常见的数据类型载体 listnp.arraytf.tensor list: 可以存储不同数据类型&#xff0c;缺点不适合存储较大的数据&#xff0c;如图片 np.array: 解决同类型大数据数据的载体&#xff0c;方便数据运算&#xff0c;缺点是在深度学习之前就设计好的&#xff0c;不支持GPU tf.ten…

吃鸡蛋-优先队列

题目描述 小林养了一只母鸡&#xff0c;一连 n 天&#xff0c;每天都可以生下若干个鸡蛋。在第 i 天&#xff0c;母鸡会生下 eggs[i] 个鸡蛋&#xff0c;这些鸡蛋将会在days[i] 天后&#xff08;也就是说&#xff0c;第 i days[i] 天时&#xff09;腐烂&#xff0c;变得无法食…

交通标志识别教程(二)

项目结构图 下载好项目压缩包后解压&#xff0c;得到以上的文件&#xff0c;首先将画红圈的文件删除&#xff08;如果有&#xff09; 安装软件 解压软件包 安装Anaconda 直接下一步&#xff0c;到了这个页面全部勾选&#xff0c;否则不会添加添加环境变量。 安装Pycharm …

深度长文:Power Automation 帮助企业实现数字化转型

01自动化始于您在Ignite 2019上&#xff0c;我们宣布将Flow更改为Power Automate&#xff0c;并在UI Flow连接器的公开预览中引入了机器人流程自动化&#xff08;RPA&#xff09;。我们对几种激动人心的功能感到兴奋&#xff0c;这些功能将在今年全面上市&#xff0c;并想花一点…

数字电路技术可能出现的简答题_数字电子技术复习题(本科)

1数字电子技术复习题(本科)一、简答题&#xff1a;1、简述组合电路和时序电路各自的特点是什么&#xff1f;答&#xff1a;组合电路的特点&#xff1a;任何时刻电路的稳定输出&#xff0c;仅取决于该时刻各个输入变量的取值&#xff0c;组合电路是由门电路组合而成&#xff0c;…

hdu2544 最短路-Floyd算法

Problem Description 在每年的校赛里&#xff0c;所有进入决赛的同学都会获得一件很漂亮的t-shirt。但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候&#xff0c;却是非常累的&#xff01;所以现在他们想要寻找最短的从商店到赛场的路线&#xff0c;你可以帮助他们…