首頁.gif

如圖所示,首先已知的是有一個 UITableView,在下拉的時候頂端的藍(lán)色可以跟隨 tableView 一起下拉刷新! 上拉時搜索框會變成一個導(dǎo)航的樣子,并且隱藏上面的地址和天氣 UI. 之前看了好多次不知道是如何實(shí)現(xiàn)的,百度了一圈后算是知道了.(這個視覺效果太具有欺騙性了)

藍(lán)色區(qū)域我分為兩個 View 做的,頂部的搜索框以上是一個 View, 以下是一個 View (包括下面的白色區(qū)域,也就是 cell 以上).

首先創(chuàng)建兩個 View,_navigationView添加到根視圖上作為導(dǎo)航用,_headerView添加到 tableView上作為類似區(qū)頭效果.
在滑動時_navigationView會向上移動來適配導(dǎo)航高度,并且會遮蓋_headerView

 _navigationView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 120)];
    _navigationView.backgroundColor = [UIColor orangeColor];
//    _navigationView.alpha = 1;
    [self.view addSubview:_navigationView];
    
    
    _headerView = [[UIView alloc] initWithFrame:CGRectMake(0, -kHeaderHeight, SCREEN_WIDTH, kHeaderHeight)];
    _headerView.backgroundColor = [UIColor redColor];
//    _headerView.alpha = 1;
    [_tableView addSubview:_headerView];

然后是創(chuàng)建 tableView 了
由于_headerView是添加在 tableView的top,所以需要用UIEdgeInsetsMake這個屬性來改變 cell 的 top, 也就是_headerView的高度加_navigationView的高度(76和上面的120不一樣,但確實(shí)是_navigationView的高度,因?yàn)槲沂窃?iPhone X 上適配的,劉海有44的高度,所以120-44=76)

_tableView = [[UITableView alloc]init];
    _tableView.frame = CGRectMake(0, 44, SCREEN_WIDTH, SCREEN_HEIGHT);
    _tableView.delegate = self;
    _tableView.dataSource = self;
    [self.view addSubview:_tableView];
    
    _tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLineEtched;
    _tableView.separatorColor = [UIColor greenColor];
    // 隱藏滑動條
    _tableView.showsVerticalScrollIndicator = NO;
    // 設(shè)置表格的間隔
    _tableView.contentInset = UIEdgeInsetsMake(kHeaderHeight + 76, 0, 0, 0);

緊接著就是滑動效果了
通過 tableview 的滑動方法,讓 View 跟隨滑動:
這部分我只是讓 _navigationView 在滑動的時候改變其Y 軸以適配導(dǎo)航欄高度

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offSetY = scrollView.contentOffset.y + scrollView.contentInset.top;

//            //iPhone X 下 View 滑動后的高度
            CGFloat minY = 32 ;
//            // 設(shè)置頂部視圖Y軸坐標(biāo)
            _navigationView.y = -MIN(offSetY, minY);
//            // 計算透明度
            CGFloat alpha = 0 + offSetY / minY;
            _textF.alpha = alpha;
    
    if (offSetY < 0)
    {
        //View 跟隨 TableView 滑動下拉
//        _navigationView.y = kHeaderHeight - offSetY;
//        _navigationView.h = kHeaderHeight - offSetY;
    }
}

首頁.gif

效果就是這樣了
不過還有一種方法也可以做到
如果不想讓_headerView添加到 tableview
那么還可以這樣,達(dá)到的效果是一樣的,而且不用再修改 cell 的 top 了

    UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200)];
    // 設(shè)置header
    _tableView.tableHeaderView = header;
    _tableView.tableHeaderView.backgroundColor = [UIColor blueColor];

開始感覺好難,做出來后覺得真的是只有想不到,沒有做不到!
我也是看了別人的代碼后才慢慢改的,我還是太菜了.
有問題的可以留言,如果有需要代碼的 稍后我會上傳到 GitHub