好久没有给大家带来iOS开发的干货了。今天给大家分享一个头条新闻客户端切换分类的例子。Demo中对所需组件的简单封装，在封装的组件中使用纯代码。如果你想在项目中使用它，你可以稍微修改它。话不多说，先介绍一下功能点。下图展示了整个Demo的功能点。左上角的TabBarButtonItem用于减少项目。例如下图中的三个按钮。单击减号将减少一项。右边的是添加条目。点击对应的按钮可以切换到对应的表格视图，下面红色的是滑动指示器，支持手势滑动。具体运行效果如下图所示。一：执行方案最上面是一个View，上面实例化了一些按钮，用来平分屏幕的宽度，下面是一个ScrollView，上面放了一些tableview，点击不同的Button，滑动到相应的表示。除了点击按钮，还可以滑动切换。切换时，红色指示灯也会滑动。主要技术点是通过ScrollView的回调和事件的响应来改变ScrollView的ContentOffset的值。在回调中，根据ContentOffset的值计算红色指示器的偏移量。二：核心代码1.组件中的main属性封装了上面的整个view，并命名为SlideTabBarView。下面代码是主要的属性：@interfaceSlideTabBarView()///@brife整个view的大小@property(assign)CGRectmViewFrame；///ScrollView@property(strong,nonatomic)UIScrollView*scrollViewbelow@brife;///按钮数组@property(strong,nonatomic)NSMutableArray*topViewsabove@brife;///Form数组@propertybelow@brife(strong,nonatomic)NSMutableArray*scrollTableViews;///@brifeTableViews的数据来源@property(strong,nonatomic)NSMutableArray*dataSource;///@brife当前选中的pages@property(assign)NSIntegercurrentPage;///@brife下面的SlidingView@property（强，非原子）UIView*slideView；@end2。初始化方法如下。在调用初始化方法时，需要传入SlideTabBarView的frame和tab的个数。初始化函数会调用组件的一系列初始化方法进行初始化，代码如下：-(instancetype)initWithFrame:(CGRect)frameWithCount:(NSInteger)count{self=[superinitWithFrame:frame];if(self){_mViewFrame=frame;_tabCount=count;_topViews=[[NSMutableArrayalloc]init];_scrollTableViews=[[NSMutableArrayalloc]init];[selfinitDataSource];[selfinitScrollView];[selfinitTopTabs];[selfinitDownTables];[selfinitDataSource];[selfinitSlideView];}returnself;}3。initDataSource方法主要负责模拟生成下面TableView中要显示的数据。代码如下：#pragmamark--初始化表的数据源-(void)initDataSource{_dataSource=[[NSMutableArrayalloc]initWithCapacity:_tabCount];for(inti=1;i<=_tabCount;i++){NSMutableArray*tempArray=[[NSMutableArrayalloc]initWithCapacity:20];for(intj=1;j<=20;j++){NSString*tempStr=[NSStringstringWithFormat:@”我是%dTableView的%d数据。",i,j];[tempArrayaddObject:tempStr];}[_dataSourceaddObject:tempArray];}}4.红色滑动指示器初始化代码如下：#pragmamark--初始化滑动视图View-(void)initSlideView{CGFloatwidth=_mViewFrame.size.width/_tabCount;_slideView=[[UIViewalloc]initWithFrame:CGRectMake(0,TOPHEIGHT-5,width,5)];[_slideViewsetBackgroundColor:[UIColorredColor]];[selfaddSubview:_slideView];}5、ScrollView的初始化代码如下，指定ScrollView的大小、位置和背景色，并设置分页可用并添加代理。#pragmamark--实例化ScrollView-(void)initScrollView{_scrollView=[[UIScrollViewalloc]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=[UIColorgrayColor];_scrollView.pagingEnabled=YES;_scrollView.delegate=self;[selfaddSubview:_scrollView];}6.添加上面的按钮根据传入的数字实例化了多个按钮。#pragmamark--实例化顶部标签-(void)initTopTabs{CGFloatwidth=_mViewFrame.size.width/_tabCount;for(inti=0;i<_tabCount;i++){UIView*view=[[UIViewalloc]initWithFrame:CGRectMake(i*width,0,width,TOPHEIGHT)];view.backgroundColor=[UIColorlightGrayColor];if(i%2){view.backgroundColor=[UIColorgrayColor];}UIButton*button=[[UIButtonalloc]initWithFrame:CGRectMake(0,0,宽度,TOPHEIGHT)];button.tag=i;[buttonsetTitle:[NSStringstringWithFormat:@"button%d",i+1]forState:UIControlStateNormal];[buttonaddTarget:selfaction:@selector(tabButton:)forControlEvents:UIControlEventTouchUpInside];[viewaddSubview:button];[_topViewsaddObject:view];[selfaddSubview:view];}}7.点击按钮触发的方法如下：#pragmamark--点击顶部按钮触发的方法-(void)tabButton:(id)sender{UIButton*button=sender;[_scrollViewsetContentOffset:CGPointMake(button.tag*_mViewFrame.size.width,0)animated:YES];}8.下面初始化多个表视图：实例化表视图并指定委托回调。#pragmamark--初始化下面的TableViews--(void)initDownTables{for(inti=0;i<_tabCount;i++){UITableView*tableView=[[UITableViewalloc]initWithFrame:CGRectMake(i*_mViewFrame.size.width,0,_mViewFrame.size.width,_mViewFrame.size.height-TOPHEIGHT)];tableView.delegate=self;tableView.dataSource=self;[_scrollTableViewsaddObject:tableView];[_scrollViewaddSubview:tableView];}}9.ScrollView的回调方法如下，下面***一个代理方法一是根据ScrollView的偏移量计算红色指示器的偏移量，二是滑动到哪个tableView，然后加载哪个tableView的数据表视图。#pragmamark--ScrollView代理方法-(void)scrollViewDidEndScrollingAnimation:(UIScrollView*)scrollView{[selfscrollViewDidEndDecelerating:scrollView];}-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView{_currentPage=_scrollView.contentOffset.x/_size.width;UITableView*currentTable=_scrollTableViews[_currentPage];[currentTablereloadData];}-(void)scrollViewDidScroll:(UIScrollView*)scrollView{if([_scrollViewisEqual:scrollView]){CGRectframe=_slideView.frame;frame.origin.x=scrollView.contentOffset.x/_tabCount;_slideView.frame=frame;}}10、TableView的代理方法如下，数据源是我们刚才做的假数据，Cell是xib实现的，注册后就可以使用了。pragmamark--talbeView的代理方法-(NSInteger)numberOfSectionsInTableView:(UITableView*)tableView{return1;}-(NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{NSMutableArray*tempArray=_dataSource[_currentPage];returntempArray.数;}-(CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath:(NSIndexPath*)indexPath{return60;}-(UITableViewCell*)tableView:tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{BOOLnibsRegistered=NO;if(!nibsRegistered){UINib*nib=[UINibnibWithNibName:@"SlideBarCell"bundle:nil];[tableViewregisterNib:nibforCellReuseIdentifier:@"SlideBarCell"];nibsRegistered=YES;}SlideBarCell*cell=[tableViewdequeueReusableCellWithIdentifier:@"SlideBarCell"];if([tableViewisEqual:_scrollTableViews[_currentPage]]){cell.tipTitle.text=_dataSource[_currentPage][indexPath.row];}returncell;}Demo在GitHub上的分享地址：https://github.com/lizelu/SliderTabBar
