iOS Development Multi-table View Slide Switch Example (faux "headline" client)

Transferred from: http://www.cnblogs.com/ludashi/p/4610364.html

For a long time did not bring you the iOS development dry things, today to share a headline news a sample for each category of the client to switch. A simple encapsulation of the required components in the demo, using a purely code form in the encapsulated component, can be modified slightly if you want to use it in your project.

Talk less, first introduce the function point, is the function of the entire demo point, the top left of the Tabbarbuttonitem is used to reduce the bar, such as there are three buttons, click the minus sign will reduce an entry. To the right, add an entry. Click the corresponding button to switch to the corresponding table view, below the red is the slide indicator, while supporting gesture swipe. Run the specific effect as shown in.

One: Implementation plan

At the top is a view, the view is instantiated a number of buttons, split the width of the screen, below is a scrollview, ScrollView above a few table views, click on a different button, swipe to the corresponding representation diagram. In addition to clicking the button, you can also slide the switch, the red indicator will also slide.

The main technical point is to change the value of the ScrollView Contentoffset by the response of the ScrollView through the callback of the event. The offset of the red indicator is calculated in the callback based on the value of Contentoffset.

Two: Core code

1. Main properties in the component

The entire view above is encapsulated, named Slidetabbarview, and the following code is the main attribute:

1 @interface slidetabbarview () <UIScrollViewDelegate,UITableViewDataSource,UITableViewDelegate> 2//@brife The size of the entire view 3 @property (assign) CGRect mviewframe; 4  5///@brife below the ScrollView 6 @property (Strong, nonatomic) Uiscrollview *scrollview; 7 8///  @brife above the button array 9 @pro  Perty (Strong, nonatomic) Nsmutablearray *topviews;10 One///@brife table array below @property (strong, nonatomic) Nsmutablearray *SCROLLTABLEVIEWS;13///@brife tableviews Data source @property (strong, nonatomic) Nsmutablearray *datasource;16///@br IFE currently selected page @property (assign) Nsinteger currentpage;19///@brife slide View21 @property (Strong, nonatomic) UIView *SL Ideview;22 @end

2. The initialization method is as follows, the number of frames and tabs that need to be passed in to the Slidetabbarview when the initialization method is called, and the initialization function invokes a series of initialization methods to initialize the component, with the following code:

1-(Instancetype) initWithFrame: (CGRect) frame withcount: (Nsinteger) count{2 self     = [Super Initwithframe:frame]; 3<  C1/>4     if (self) {5         _mviewframe = frame; 6         _tabcount = count; 7         _topviews = [[Nsmutablearray alloc] init]; 8         _scrolltableviews = [[Nsmutablearray alloc] init]; 9         [self initdatasource];11         initscrollview];13 [self inittoptabs];15 (self         initdowntables];17         ) [self] initdatasource];19         [self initslideview];21]     }23     return self;25}

The 3.initDataSource method is primarily responsible for simulating the data that is generated below TableView to be displayed. The code is as follows:

#pragma mark--Initialize the table's data source-(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 <=; J + +) {                        NSString *tempstr = [NSString stringwithformat:@ "I am%d data of%d TableView. ", I, j];            [Temparray addobject:tempstr];        }                [_datasource Addobject:temparray];}    }

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

#pragma mark-the indicator view-(void) initslideview{     cgfloat width = _mviewframe.size.width/_tabcount of the initialization slip;    _slideview = [[UIView alloc] Initwithframe:cgrectmake (0, TOPHEIGHT-5, width, 5)];    [_slideview Setbackgroundcolor:[uicolor Redcolor];    [Self addsubview:_slideview];}

The initialization code for the 5.ScrollView is as follows, specifying the size position of the scrollview and the background color, and setting paging available and adding proxies.

#pragma mark--instantiation 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 according to the number of incoming.

1 #pragma mark--Instantiate the Top tab 2-(void) inittoptabs{3     cgfloat width = _mviewframe.size.width/_tabcount; 4      5     F  or (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         all         if (i% 2) {             View.backgroundcolor = [ Uicolor graycolor];13         }14         UIButton *button = [[UIButton alloc] Initwithframe:cgrectmake (0, 0, width, Topheight)];16         button.tag = i;17         [button settitle:[nsstring stringwithformat:@ "Pushbutton%d", i+1] forstate: uicontrolstatenormal];18         [button addtarget:self action: @selector (Tabbutton:) forControlEvents: uicontroleventtouchupinside];19         [view addsubview:button];20         [_topviews Addobject:view] ;         [self addsubview:view];24     }25}

7. Click the button to trigger the following method:

1 #pragma mark--click the button at the top to trigger the method 2-(void) Tabbutton: (ID) sender{3     UIButton *button = sender;4     [_scrollview Setcont Entoffset:cgpointmake (Button.tag * _mviewframe.size.width, 0) Animated:yes];5}

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

1 #pragma mark--Initialize the tableviews below 2-(void) initdowntables{3      4 for     (int i = 0; i < _tabcount; i + +) {5          6< C6/>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         [_scrolltableviews addobject: Tableview];11         [_scrollview addsubview:tableview];12     }13 14}

The callback method for 9.ScrollView is as follows, and the last proxy method below calculates the offset of the red indicator based on the offset of the ScrollView, the second is which tableview to slide to, and then which tableview data is loaded.

1 #pragma mark-ScrollView proxy Method 2-(void) Scrollviewdidendscrollinganimation: (Uiscrollview *) scrollview{3 [self     Scrollviewdidenddecelerating:scrollview]; 4} 5  6-(void) scrollviewdidenddecelerating: (Uiscrollview *) ScrollView 7  8 {9     _currentpage = _ scrollview.contentoffset.x/_mviewframe.size.width;10     UITableView *currenttable = _scrollTableViews[_ Currentpage];12     [currenttable reloaddata];13     }15-(void) Scrollviewdidscroll: (Uiscrollview *) Scrollview{17     if ([_scrollview Isequal:scrollview]) {         CGRect frame = _slideview.frame;19         frame.origin.x = scrollview.contentoffset.x/_tabcount;20         _slideview.frame = frame;21     }22}

10.TableView Proxy method is as follows, the data source is the fake data we just made, the cell is implemented by Xib, the use of registration is available.

 1 #pragma mark-Talbeview's Proxy Method 2-(Nsinteger) Numberofsectionsintableview: (UITableView *) tableview{3 return 1; 4} 5 6-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) section{7 Nsmutablearray *tempa Rray = _datasource[_currentpage]; 8 return temparray.count; 9}10-(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) indexpath{12 return 60;1 3}14-(UITableViewCell *) Tableview:tableview Cellforrowatindexpath: (Nsindexpath *) indexpath{16-BOOL NibsReg         istered=no;18 if (!nibsregistered) {uinib *nib=[uinib nibwithnibname:@ "Slidebarcell" bundle:nil];20      [TableView registernib:nib forcellreuseidentifier:@ "Slidebarcell"];21 nibsregistered=yes;22}23 24 25 Slidebarcell *cell = [TableView dequeuereusablecellwithidentifier:@ "Slidebarcell"];26 if ([TableView ISEQUAL:_SCR Olltableviews[_currentpage]]) {Cell.tipTitle.text = _datasource[_currentpage][indexpath.row];28}29 return cell;31} 

Demo on GitHub share address: Https://github.com/lizelu/SliderTabBar

iOS Development Multi-table View Slide Switch Example (faux "headline" client)