UITableView与UIscrollview上下滚动左右滑动仿qq浏览器布局

最近公司搞了一个变态的布局，效果类似qq浏览器，话不多说，线上动态图

首先关于类似网易新闻的scrollview布局我用的是WJSegment这个第三方，有这个名字就去github找就好了。。。然后接下来讲如何实现这个变态的需求

#define velocity (340-64)/(200-64)//340微调结果
#define HeadViewHeight 200
#define CloumnOriginY 400
{
    UITableView * _mainTable,* _secondTable;
    NSArray * _tableData,* _scroArr;
    MyView * _headerView;
    UISearchBar * _searchBar;
    UIScrollView * _newsScroll;
    WJItemsControlView *_itemControlView;
    CGFloat _delta;
}
@property(nonatomic,assign)NSInteger moveToPage;//横向滚动要滚到的地方
@property(nonatomic,assign)BOOL isHomePage;//是否是首页
复制代码

之后再viewDidLoad写上各控件的初始化布局

_isHomePage = YES;//初始化默认首页
    _headerView = [[MyView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, HeadViewHeight)];
    _headerView.backgroundColor = [UIColor redColor];
    [self.view addSubview:_headerView];
    _searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(20, 130, ScreenWidth-40, 50)];
    [self.view addSubview:_searchBar];
    
    _scroArr = @[@"新闻",@"房产",@"体育",@"美女"];
    _newsScroll = [[UIScrollView alloc]initWithFrame:CGRectMake(0, HeadViewHeight, ScreenWidth, ScreenHeight - 44)];
    _newsScroll.delegate = self;
    _newsScroll.pagingEnabled = YES;
    _newsScroll.contentSize = CGSizeMake(ScreenWidth*_scroArr.count, 100);
    [self.view addSubview:_newsScroll];

    //头部控制的segMent，就新闻房产那个
    WJItemsConfig *config = [[WJItemsConfig alloc]init];
    config.itemWidth = ScreenWidth/4.0;
    
    _itemControlView = [[WJItemsControlView alloc]initWithFrame:CGRectMake(0, CloumnOriginY, ScreenWidth, 44)];
    _itemControlView.tapAnimation = YES;
    _itemControlView.config = config;
    _itemControlView.titleArray = _scroArr;
    __weak typeof (_newsScroll)weakScrollView = _newsScroll;
    [_itemControlView setTapItemWithIndex:^(NSInteger index,BOOL animation){
        [weakScrollView scrollRectToVisible:CGRectMake(index*weakScrollView.frame.size.width, 0.0, weakScrollView.frame.size.width,weakScrollView.frame.size.height) animated:animation];
    }];
//将它放在self.view上，然而看起像放在cell上而已，然后后面的工作就是保证跟cell同步
    [self.view addSubview:_itemControlView];
    
    _mainTable = [[UITableView alloc]initWithFrame:CGRectMake(0, 0,ScreenWidth, ScreenHeight) style:UITableViewStyleGrouped];
    _mainTable.delegate = self;
    _mainTable.dataSource = self;
    _mainTable.backgroundColor = [UIColor lightGrayColor];
    [_newsScroll addSubview:_mainTable];
//给tableview增加监听事件，后面都靠它吃饭
    [_mainTable addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
    
    _secondTable = [[UITableView alloc]initWithFrame:CGRectMake(ScreenWidth, 44,ScreenWidth, ScreenHeight-44)];//在顶端放新闻，房产，故空44
    _secondTable.delegate = self;
    _secondTable.dataSource = self;
    [_newsScroll addSubview:_secondTable];
复制代码

观察者调用这边的方法，所有的首页移动都来源于此

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"contentOffset"]) {
        CGPoint offset = [change[NSKeyValueChangeNewKey]CGPointValue];
        if (offset.y<=HeadViewHeight-64) {
            CGRect newFrame = CGRectMake(0, 0, ScreenWidth, HeadViewHeight-offset.y);
            _headerView.frame = newFrame;//头部view跟着变化
            _searchBar.frame = CGRectMake(20, 130-offset.y, ScreenWidth-40, 50);
            _itemControlView.frame = CGRectMake(0, CloumnOriginY-offset.y*velocity, ScreenWidth, 44);
            _newsScroll.frame = CGRectMake(0, _headerView.frame.size.height, ScreenWidth, ScreenHeight- _headerView.frame.size.height);
        }else if (offset.y>136 && offset.y<200){
//264是初始位置400减去已经移动的（200-64）因为这时候scrollview不再移动，速率发生变化了，做到无缝衔接，不然会有突变
            _itemControlView.frame = CGRectMake(0, 264-offset.y, ScreenWidth, 44);
        }else{
            CGRect newFrame = CGRectMake(0, 0, ScreenWidth, 64);
            _searchBar.frame = CGRectMake(20, 20, ScreenWidth-40, 30);
            _headerView.frame = newFrame;
            _mainTable.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
        }
    }
}
复制代码

有一个蛋疼的地方就是去掉区头，因为tableview的style是plain的话就会区头悬浮，然而网上的解决方案都是去掉第一个区的区头，而我的是第二个区的区头，所以只能把plain改为group，然后高度设为0.1

-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 0.1;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 0.1;
}
复制代码

源代码请看：https://git.oschina.net/vicnic/tableView_scrollview.git