iOS development of multi-table view sliding switching example (imitating "Toutiao" client)

It's been a long time since I brought you some useful information about iOS development. Today, I'd like to share with you an example of switching between categories in a headline news client. In the demo, the required components are simply encapsulated, and the encapsulated components are in the form of pure code. If you want to use them in your project, you can just make some minor modifications.

Without further ado, let me introduce the functions first. The figure below shows the functions of the entire Demo. The TabBarButtonItem on the top left is used to reduce items. For example, there are three buttons in the figure below. Clicking the minus sign will reduce an item. The one on the right is to add an item. Clicking the corresponding button will switch to the corresponding table view. The red one below is the sliding indicator, which also supports gesture sliding. The specific effect of running is shown in the figure below.

1. Implementation plan

At the top is a View with some buttons instantiated on it, dividing the width of the screen equally. Below is a ScrollView with some table views placed on it. Click different buttons to slide to the corresponding representation. In addition to clicking buttons, you can also slide to switch. When switching, the red indicator will also slide.

The main technical point is to change the value of ScrollView's ContentOffset through the callback of ScrollView and the response of the event. In the callback, the offset of the red indicator is calculated according to the value of ContentOffset.

2. Core code

1. Main properties in the component

Encapsulate the entire view above and name it SlideTabBarView. The following code is the main properties:

 @interface SlideTabBarView() ///@brife The size of the entire view  
 @property (assign) CGRect mViewFrame;
 ///@brife ScrollView below  
 @property (strong, nonatomic) UIScrollView *scrollView;
 ///@brife Button array above  
 @property (strong, nonatomic) NSMutableArray *topViews;
 ///@brife The table array below  
 @property (strong, nonatomic) NSMutableArray *scrollTableViews;
 ///@brife TableViews data source  
 @property (strong, nonatomic) NSMutableArray *dataSource;
 ///@brife Current selected page number  
 @property (assign) NSInteger currentPage;
 ///@brife The sliding View below  
 @property (strong, nonatomic) UIView *slideView;
 @end  

2. The initialization method is as follows. When calling the initialization method, you need to pass in the frame of SlideTabBarView and the number of tabs. The initialization function will call a series of initialization methods to initialize the components. The code is as follows:

 -(instancetype)initWithFrame:(CGRect)frame WithCount: (NSInteger) count{
 self = [ super initWithFrame: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]; 
 
 } 
 
 return self;
 }

3. The initDataSource method is mainly responsible for simulating the generation of data to be displayed in the TableView below. The code is as follows:

 #pragma mark -- Initialize the data source of the table
 -( 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:@ "I am the %dth data in the %dth TableView." , i, j];
 [tempArray addObject:tempStr];
 } 
 
 [_dataSource addObject:tempArray];
 }
 }

4. The initialization code of the red sliding indicator is as follows:

 #pragma mark -- Initialize the sliding indication 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. The initialization code of ScrollView is as follows, which specifies the size, position and background color of ScrollView, enables paging and adds a proxy.

 #pragma mark -- instantiate 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. Add the buttons above and instantiate multiple buttons according to the number passed in.

 #pragma mark -- instantiate the top tab
 -( void ) initTopTabs{
 CGFloat width = _mViewFrame.size.width / _tabCount; 
 
 for ( int i = 0 ; i < _tabCount; 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:@ "Button%d" , i+ 1 ] forState:UIControlStateNormal];
 [button addTarget:self action: @selector (tabButton:) forControlEvents:UIControlEventTouchUpInside];
 [view addSubview:button]; 
 
 
 [_topViews addObject:view];
 [self addSubview:view];
 }
 }

7. Click the button to trigger the method as follows:

 #pragma mark --The method triggered by clicking the top button
 -( void ) tabButton: (id) sender{
 UIButton *button = sender;
 [_scrollView setContentOffset:CGPointMake(button.tag * _mViewFrame.size.width, 0 ) animated:YES];
 }

8. Initialize the multiple table views below: Instantiate the table views and specify the delegate callback.

 #pragma mark -- Initialize the TableViews below
 -( void ) initDownTables{ 
 
 for ( int i = 0 ; i < _tabCount; 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. The callback method of ScrollView is as follows. The first proxy method below calculates the offset of the red indicator based on the offset of ScrollView. The second one is to slide to which tableView and then load the data of which TableView.

 #pragma mark -- scrollView proxy method
 -( 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. The proxy method of TableView is as follows. The data source is the fake data we just made. Cell is implemented by Xib. It can be used by registering it when using it.

 Pragma mark -- talbeView's proxy method
 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
 return   1 ;
 }
 -(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
 NSMutableArray *tempArray = _dataSource[_currentPage];
 return tempArray.count;
 }
 -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
 return   60 ;
 }
 -(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];
 } 
 
 return cell;
 } 
 
 Demo sharing address on GitHub: https://github.com/lizelu/SliderTabBar