Example of sliding switching between multiple table views in iOS development (imitation & quot; toutiao & quot; client) and ios example

Example of sliding switching between multiple table views in iOS development (similar to the "toutiao" client) and ios example

For a long time, I haven't brought you anything to do With iOS development. Today I want to share with you an example of switching various categories of toutiao.com clients. Simple encapsulation of the required components in the Demo is in the form of pure code. If you want to use the components in the project, make a slight modification.

To put it bluntly, let's first introduce the functional points, which are the functional points of the entire Demo. The TabBarButtonItem on the top is used to reduce the number of items. For example, if there are three buttons, clicking the minus sign will reduce one entry. Add an entry to the right. Click the corresponding button to switch to the corresponding table view. The red icon below is a sliding indicator, and gesture sliding is supported. Shows the running effect.

I. Implementation Scheme

A View is at the top. Some buttons are instantiated on the View to split the screen width. A ScrollView is shown below. Some table views are placed on the ScrollView and different buttons are clicked, slide to the corresponding graph. In addition to clicking the button, you can also perform slide switching. When switching, the red indicator also slides.

The main technical point is to change the ContentOffset value of ScrollView through the callback of ScrollView and Event Response. In the callback, the offset of the red indicator is calculated based on the value of ContentOffset.

Ii. Core code

1. main attributes of components

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

1 @ interface SlideTabBarView () <UIScrollViewDelegate, UITableViewDataSource, UITableViewDelegate> 2 // @ brife size of the entire view 3 @ property (assign) CGRect mViewFrame; 4 5 // @ ScrollView 6 @ property (strong, nonatomic) UIScrollView * scrollView; 7 8 // @ the button array above brife 9 @ property (strong, nonatomic) NSMutableArray * topViews; 10 11 // @ List of tables under brife 12 @ property (strong, nonatomic) NSMutableArray * scrollTableViews; 13 14 // @ brife TableViews data source 15 @ property (strong, nonatomic) NSMutableArray * dataSource; 16 17 // @ brife current selected page number 18 @ property (assign) NSInteger currentPage; 19 20 // @ View21 @ property (strong, nonatomic) UIView * slideView; 22 @ end

 

2. the initialization method is as follows. When the initialization method is called, the number of frames and tabs of SlideTabBarView must be passed in. The initialization function calls a series of initialization methods to initialize the component. The Code is as follows:

 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     return self;25 }

 

3. The initDataSource method is mainly used to generate the 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 % d data of the % d TableView. ", I, j]; [tempArray addObject: tempStr];} [_ dataSource addObject: tempArray] ;}}

 

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

# Pragma mark -- initialize the slide indicator 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 ScrollView initialization code is as follows: specify the size and position of the ScrollView and the background color, set the available pages, and add 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 to instantiate multiple buttons based on the number of incoming buttons.

1 # pragma mark -- instantiate the top 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: @ "button % 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. click the button to trigger the event as follows:

1 # pragma mark -- Method triggered by clicking the button on the top 2-(void) tabButton: (id) sender {3 UIButton * button = sender; 4 [_ scrollView setContentOffset: CGPointMake (button. tag * _ mViewFrame. size. width, 0) animated: YES]; 5}

 

8. initialize multiple table views below: instantiate the table view and specify the delegate callback.

1 # pragma mark -- initialize TableViews 2-(void) initdownables below {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. the callback method of ScrollView is as follows. The last proxy method below is to calculate the offset of the red Indicator Based on the ScrollView offset, and the second is to slide to the tableView and then load the TableView data.

1 # pragma mark -- proxy method of scrollView 2-(void) preview :( UIScrollView *) scrollView {3 [self scrollViewDidEndDecelerating: scrollView]; 4} 5 6-(void) scrollViewDidEndDecelerating :( UIScrollView *) scrollView 7 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. The TableView proxy method is as follows. The data source is the fake data we just made. The Cell is implemented by Xib and can be registered once used.

1 # proxy method of 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 return tempArray. 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 (! Messages) {19 UINib * nib = [UINib nibWithNibName: @ "SlideBarCell" bundle: nil]; 20 [tableView registerNib: nib forCellReuseIdentifier: @ "SlideBarCell"]; 21 response = 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 return cell; 31}

 

Demo share on GitHub: https://github.com/lizelu/SliderTabBar