周口网站开发,云南人社,手机网站怎么做SEO优化,软件网站模板好长时间没为大家带来iOS开发干货的东西了#xff0c;今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例。在Demo中对所需的组件进行的简单封装#xff0c;在封装的组件中使用的是纯代码的形式#xff0c;如果想要在项目中进行使用#xff0c;稍微进行修改即可。…好长时间没为大家带来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;45 ///brife 下方的ScrollView6 property (strong, nonatomic) UIScrollView *scrollView;78 ///brife 上方的按钮数组9 property (strong, nonatomic) NSMutableArray *topViews;1011 ///brife 下方的表格数组12 property (strong, nonatomic) NSMutableArray *scrollTableViews;1314 ///brife TableViews的数据源15 property (strong, nonatomic) NSMutableArray *dataSource;1617 ///brife 当前选中页数18 property (assign) NSInteger currentPage;1920 ///brife 下面滑动的View21 property (strong, nonatomic) UIView *slideView;22 end2.初始化方法如下在调用初始化方法时需要传入SlideTabBarView的frame和选项卡的个数初始化函数会调用一系列的初始化方法对组件进行初始化代码如下1 -(instancetype)initWithFrame:(CGRect)frame WithCount: (NSInteger) count{2 self [super initWithFrame:frame];34 if(self) {5 _mViewFrame frame;6 _tabCount count;7 _topViews [[NSMutableArray alloc] init];8 _scrollTableViews [[NSMutableArray alloc] init];910 [self initDataSource];1112 [self initScrollView];1314 [self initTopTabs];1516 [self initDownTables];1718 [self initDataSource];1920 [self initSlideView];2122 }2324 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.pagingEnabledYES;_scrollView.delegate self;[self addSubview:_scrollView];}6.添加上方的按钮根据传入的个数来实例化多个按钮。1 #pragma mark -- 实例化顶部的tab2 -(void) initTopTabs{3 CGFloat width _mViewFrame.size.width /_tabCount;45 for (int i 0; i _tabCount; i ) {67 UIView *view [[UIView alloc] initWithFrame:CGRectMake(i * width, 0, width, TOPHEIGHT)];89 view.backgroundColor [UIColor lightGrayColor];1011 if (i % 2) {12 view.backgroundColor [UIColor grayColor];13 }1415 UIButton *button [[UIButton alloc] initWithFrame:CGRectMake(0, 0, width, TOPHEIGHT)];16 button.tag i;17 [button setTitle:[NSString stringWithFormat:按钮%d, i1] forState:UIControlStateNormal];18 [button addTarget:self action:selector(tabButton:) forControlEvents:UIControlEventTouchUpInside];19 [view addSubview:button];202122 [_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 --初始化下方的TableViews2 -(void) initDownTables{34 for (int i 0; i _tabCount; i ) {56 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;910 [_scrollTableViews addObject:tableView];11 [_scrollView addSubview:tableView];12 }1314 }9.ScrollView的回调方法如下下面最后一个代理方法是根据ScrollView的偏移量来计算红色指示器的偏移量第二个是滑动到哪个tableView然后进行哪个TableView的数据加载。1 #pragma mark -- scrollView的代理方法2 -(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{3 [self scrollViewDidEndDecelerating:scrollView];4 }56 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView78 {9 _currentPage _scrollView.contentOffset.x/_mViewFrame.size.width;1011 UITableView *currentTable _scrollTableViews[_currentPage];12 [currentTable reloadData];1314 }1516 -(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 }56 -(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{7 NSMutableArray *tempArray _dataSource[_currentPage];8 returntempArray.count;9 }1011 -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{12 return 60;13 }1415 -(UITableViewCell *)tableView:tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{1617 BOOL nibsRegisteredNO;18 if (!nibsRegistered) {19 UINib *nib[UINib nibWithNibName:SlideBarCellbundle:nil];20 [tableView registerNib:nib forCellReuseIdentifier:SlideBarCell];21 nibsRegisteredYES;22 }232425 SlideBarCell *cell [tableView dequeueReusableCellWithIdentifier:SlideBarCell];26 if([tableView isEqual:_scrollTableViews[_currentPage]]) {27 cell.tipTitle.text _dataSource[_currentPage][indexPath.row];28 }2930 returncell;31 }Demo在GitHub上的分享地址https://github.com/lizelu/SliderTabBar
