如圖所示,首先已知的是有一個 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的高度,因為我是在 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;
}
}
效果就是這樣了
不過還有一種方法也可以做到
如果不想讓_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
