最近一個(gè)項(xiàng)目 需要用到多個(gè)tableView展現(xiàn)效果，頂部一個(gè)banner。和掌上英雄聯(lián)盟首頁(yè)，個(gè)人中心效果是一樣的。完成項(xiàng)目，故花時(shí)間寫(xiě)了一個(gè)這樣的demo，希望初學(xué)者能學(xué)到點(diǎn)東西，也能做出這樣的效果。

• 話不都說(shuō)，首先看一下效果圖。

效果.gif

• 實(shí)現(xiàn)原理 底部的scrollView，上面三個(gè)tableview，結(jié)構(gòu)如下：
• scrollView
  • tableView
  • tableView

  • tableView（每個(gè)tableView頂部有一個(gè)tableheaderView，高度和最上層的headerview高度相同）
    圖層如下：

    
    
    C434F3C8-5491-4F6B-913C-B5DB0AE20494.png
• 具體實(shí)現(xiàn)如下：

//創(chuàng)建底部scrollerView
UIScrollView *tableScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    tableScrollView.contentSize = CGSizeMake(SCREEN_WIDTH * 3, 0);
    tableScrollView.pagingEnabled = YES;
    tableScrollView.delegate = self;
    tableScrollView.backgroundColor = [UIColor groupTableViewBackgroundColor];

• 創(chuàng)建tableView，只寫(xiě)了一個(gè)，另外的相同。

NSArray *colorArr = @[[UIColor redColor], [UIColor yellowColor], [UIColor blueColor]];
    self.firstTableView = [[DetailTableViewController alloc] initWithStyle:UITableViewStylePlain];
    self.firstTableView.tableView.frame = CGRectMake(0  * SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    self.firstTableView.tableView.tag = 100;
    self.firstTableView.tableView.delegate = self;
    self.firstTableView.tableView.backgroundColor = colorArr[0];
    [self createTableHeadView:self.firstTableView.tableView];
    [tableScrollView addSubview:self.firstTableView.tableView];

• 每個(gè)tableview都創(chuàng)建一個(gè)tableHeaderView，背景顏色要設(shè)置為透明色，這個(gè)是實(shí)現(xiàn)的關(guān)鍵。

UIView *tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 246)];
    tableHeaderView.backgroundColor = [UIColor clearColor];
    tableView.showsVerticalScrollIndicator = NO;
    tableView.tableHeaderView = tableHeaderView;

• 然后添加頂層的view，可以是輪播圖等，可以根據(jù)自己的需求修改.
• 設(shè)置頂層的view，跟隨tableview一起的滾動(dòng)，在scrollview代理方法中實(shí)現(xiàn)

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    
if ([scrollView isEqual:_tableScrollView]) {
       return;
    }
//獲取tableview的偏移量
CGFloat offsetY = scrollView.contentOffset.y;
    if (scrollView.contentOffset.y > 200) {
        self.headerView.center = CGPointMake(_headerView.center.x,  self.headerCenterY - 200);
        return;
    }
    CGFloat h = self.headerCenterY - offsetY;
//改變頂層view的位置讓其根據(jù)偏移量上下移動(dòng)
    self.headerView.center = CGPointMake(self.headerView.center.x, h); 
}

• scrollview結(jié)束減速的代理方法,結(jié)束拖拽的方法中同樣的處理方法

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ 
  if ([scrollView isEqual:_tableScrollView]) {
        NSInteger index = scrollView.contentOffset.x / SCREEN_WIDTH;
        [self titleClick:self.titlesView.subviews[index]];
         return;
    }
//此方法改變其他tableview偏移量的方法
[self setTableViewContentOffsetWithTag:scrollView.tag contentOffset:scrollView.contentOffset.y];
}

//設(shè)置tableView的偏移量
-(void)setTableViewContentOffsetWithTag:(NSInteger)tag contentOffset:(CGFloat)offset{    
    CGFloat tableViewOffset = offset;
    if(offset > 200){        
        tableViewOffset = 200;
    }    
    if (tag == 100) {
        [self.secondTableView.tableView setContentOffset:CGPointMake(0, tableViewOffset) animated:NO];
        [self.thirdTableView.tableView setContentOffset:CGPointMake(0, tableViewOffset) animated:NO];        
    }else if(tag == 101){        
        [self.firstTableView.tableView setContentOffset:CGPointMake(0, tableViewOffset) animated:NO];
        [self.thirdTableView.tableView setContentOffset:CGPointMake(0, tableViewOffset) animated:NO];        
    }else{        
        [self.firstTableView.tableView setContentOffset:CGPointMake(0, tableViewOffset) animated:NO];
        [self.secondTableView.tableView setContentOffset:CGPointMake(0, tableViewOffset) animated:NO];        
    }
}

• 界面的完成，有問(wèn)題可以留言給我的,需要demo的也可以聯(lián)系我。
• gitHub demo鏈接地址：https://github.com/yixuanjiang/jianshu