最近一個(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
