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

本文介绍了如何在iOS应用中实现类似“头条”客户端的顶部tab滑动切换功能。详细讲解了实现方案,包括初始化组件、数据源管理、滑动指示器以及ScrollView回调等关键代码,提供了GitHub上的完整Demo链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

一:实现方案

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

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

二:核心代码

1.组件中的主要属性

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

@interfaceSlideTabBarView()///@brife 整个视图的大小

@property(assign) CGRect mViewFrame;

///@brife 下方的ScrollView

@property(strong, nonatomic) UIScrollView *scrollView;

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

@property(strong, nonatomic) NSMutableArray *topViews;

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

@property(strong, nonatomic) NSMutableArray *scrollTableViews;

///@brife TableViews的数据源

@property(strong, nonatomic) NSMutableArray *dataSource;

///@brife 当前选中页数

@property(assign) NSInteger currentPage;

///@brife 下面滑动的View

@property(strong, nonatomic) UIView *slideView;

@end

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

-(instancetype)initWithFrame:(CGRect)frame WithCount: (NSInteger) count{

self = [superinitWithFrame:frame];

if(self) {

_mViewFrame = frame;

_tabCount = count;

_topViews = [[NSMutableArray alloc] init];

_scrollTableViews = [[NSMutableArray alloc] init];

[self initDataSource];

[self initScrollView];

[self initTopTabs];

[self initDownTables];

[self initDataSource];

[self initSlideView];

}

returnself;

}

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

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

-(void) initDataSource{

_dataSource = [[NSMutableArray alloc] initWithCapacity:_tabCount];

for(inti =1; i <= _tabCount; i ++) {

NSMutableArray *tempArray = [[NSMutableArray alloc] initWithCapacity:20];

for(intj =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.添加上方的按钮,根据传入的个数来实例化多个按钮。

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

-(void) initTopTabs{

CGFloat width = _mViewFrame.size.width / _tabCount;

for(inti =0; i 

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

view.backgroundColor = [UIColor lightGrayColor];

if(i %2) {

view.backgroundColor = [UIColor grayColor];

}

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0,0, width, TOPHEIGHT)];

button.tag = i;

[button setTitle:[NSString stringWithFormat:@"按钮%d", i+1] forState:UIControlStateNormal];

[button addTarget:self action:@selector(tabButton:) forControlEvents:UIControlEventTouchUpInside];

[view addSubview:button];

[_topViews addObject:view];

[self addSubview:view];

}

}

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

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

-(void) tabButton: (id) sender{

UIButton *button = sender;

[_scrollView setContentOffset:CGPointMake(button.tag * _mViewFrame.size.width, 0) animated:YES];

}

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

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

-(void) initDownTables{

for(inti =0; i 

UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(i * _mViewFrame.size.width, 0, _mViewFrame.size.width, _mViewFrame.size.height - TOPHEIGHT)];

tableView.delegate = self;

tableView.dataSource = self;

[_scrollTableViews addObject:tableView];

[_scrollView addSubview:tableView];

}

}

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

#pragma mark -- scrollView的代理方法

-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{

[self scrollViewDidEndDecelerating:scrollView];

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

_currentPage = _scrollView.contentOffset.x/_mViewFrame.size.width;

UITableView *currentTable = _scrollTableViews[_currentPage];

[currentTable reloadData];

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

if([_scrollView isEqual:scrollView]) {

CGRect frame = _slideView.frame;

frame.origin.x = scrollView.contentOffset.x/_tabCount;

_slideView.frame = frame;

}

}

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

pragma mark -- talbeView的代理方法

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

return1;

}

-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

NSMutableArray *tempArray = _dataSource[_currentPage];

returntempArray.count;

}

-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

return60;

}

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

BOOL nibsRegistered=NO;

if(!nibsRegistered) {

UINib *nib=[UINib nibWithNibName:@"SlideBarCell"bundle:nil];

[tableView registerNib:nib forCellReuseIdentifier:@"SlideBarCell"];

nibsRegistered=YES;

}

SlideBarCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SlideBarCell"];

if([tableView isEqual:_scrollTableViews[_currentPage]]) {

cell.tipTitle.text = _dataSource[_currentPage][indexPath.row];

}

returncell;

}

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

【责任编辑:chenqingxiang TEL:(010)68476606】

点赞 0

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值