知乎状态栏滚动效果

项目中要实现知乎三个状态栏类似的效果,网上搜了一片并没有找到合适的,只能自己写了。
主要思想是利用tableView的contentInset和contentOffset,判断向上滑动时,headerview收起,tableview顶部至headerview,向下滑动时headerview展开,tableview顶部至headerView。
注意:tableView一定要在headerView的底层,不然就会盖住headerView,显示不出来。
粘代码:

- (void)viewDidLoad {
      [superviewDidLoad];
      // Do any additional setup after loading the view, typically from a nib.
      self.title=@"我是title";
    **//注意层级关系**
    **[self.viewinsertSubview:self.headerViewatIndex:1];**
    **[self.viewinsertSubview:self.mainTableViewatIndex:0];**
}
-(UIView*)headerView
{
    if(!_headerView)
    {
          _headerView=    [[UIViewalloc]initWithFrame:CGRectMake(0,kNavHeight,kWidth_Screen,kHeaderViewHeight)];
        _headerView.backgroundColor= [UIColororangeColor];
    }
    return_headerView;
}
-(UITableView*)mainTableView
{
    if(!_mainTableView)
    {
    _mainTableView=         [[UITableViewalloc]initWithFrame:CGRectMake(0,kNavHeight,kWidth_Screen,kHeight_Screen-    kHeaderViewHeight)style:UITableViewStylePlain];
    _mainTableView.delegate=self;
    _mainTableView.dataSource=self;
    //tableview默认向下滚动kkHeaderViewHeight
          _mainTableView.contentInset=UIEdgeInsetsMake(kHeaderViewHeight,0,0,0);
  _mainTableView.contentOffset=CGPointMake(0, -kHeaderViewHeight);
    }
    return_mainTableView;
}

#pragma mark - scroll view delegate
-(void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
{
    lastScrollOffsetY= scrollView.contentOffset.y;
}
-(void)scrollViewDidScroll:(UIScrollView*)scrollView
{
    CGFloatoffsetY = scrollView.contentOffset.y;
    if(offsetY <0|| offsetY > scrollView.contentSize.height)
  {
      return;
  }
    if(offsetY >lastScrollOffsetY&& !headerViewHidden)//往上滑动
  {
    //向上滑动,headerview收起,tableview顶部至headerview
    [UIViewanimateWithDuration:.25animations:^{
  **[self.headerViewsetY:kNavHeight-kHeaderViewHeight];**
    **self.mainTableView.contentInset=UIEdgeInsetsMake(0,0,0,0);;**
    }];
    headerViewHidden=YES;
}
else if(offsetY
{
    //向下滑动,headerview展开,tableview顶部至headerView
    [UIViewanimateWithDuration:.25animations:^{
**[self.headerViewsetY:kNavHeight];**
**self.mainTableView.contentInset=UIEdgeInsetsMake(kHeaderView    Height,0,0,0);;**
    }];
    headerViewHidden=NO;
  }
}

git地址:github.com/zgsddzwj/WJScrollViewDemo/
TODO:其实还可以利用KVO监听TableView的滑动来实现,回头有时间了整理下。

你可能感兴趣的:(知乎状态栏滚动效果)