您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页仿掌上英雄联盟首页效果

仿掌上英雄联盟首页效果

来源:二三四教育网
最近一个项目 需要用到多个tableView展现效果,顶部一个banner。和掌上英雄联盟首页,个人中心效果是一样的。完成项目,故花时间写了一个这样的demo,希望初学者能学到点东西,也能做出这样的效果。
  • 话不都说,首先看一下效果图。
效果.gif
  • 实现原理 底部的scrollView,上面三个tableview,结构如下:
  • scrollView
    • tableView
    • tableView
    • tableView(每个tableView顶部有一个tableheaderView,高度和最上层的headerview高度相同)
      图层如下:


      C434F3C8-5491-4F6B-913C-B5DB0AE20494.png
  • 具体实现如下:
//创建底部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];
  • 创建tableView,只写了一个,另外的相同。
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];
  • 每个tableview都创建一个tableHeaderView,背景颜色要设置为透明色,这个是实现的关键。
UIView *tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 246)];
    tableHeaderView.backgroundColor = [UIColor clearColor];
    tableView.showsVerticalScrollIndicator = NO;
    tableView.tableHeaderView = tableHeaderView;
  • 然后添加顶层的view,可以是轮播图等,可以根据自己的需求修改.
  • 设置顶层的view,跟随tableview一起的滚动,在scrollview代理方法中实现
-(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的位置让其根据偏移量上下移动
    self.headerView.center = CGPointMake(self.headerView.center.x, h); 
}
  • scrollview结束减速的代理方法,结束拖拽的方法中同样的处理方法
-(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];
}
//设置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];        
    }
}
  • 界面的完成,有问题可以留言给我的,需要demo的也可以联系我。
  • gitHub demo链接地址:

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务