如图所示,首先已知的是有一个 UITableView,在下拉的时候顶端的蓝色可以跟随 tableView 一起下拉刷新! 上拉时搜索框会变成一个导航的样子,并且隐藏上面的地址和天气 UI. 之前看了好多次不知道是如何实现的,百度了一圈后算是知道了.(这个视觉效果太具有欺骗性了)
蓝色区域我分为两个 View 做的,顶部的搜索框以上是一个 View, 以下是一个 View (包括下面的白色区域,也就是 cell 以上).
首先创建两个 View,_navigationView添加到根视图上作为导航用,_headerView添加到 tableView上作为类似区头效果.
在滑动时_navigationView会向上移动来适配导航高度,并且会遮盖_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];
然后是创建 tableView 了
由于_headerView是添加在 tableView的top,所以需要用UIEdgeInsetsMake这个属性来改变 cell 的 top, 也就是_headerView的高度加_navigationView的高度(76和上面的120不一样,但确实是_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;
// 设置表格的间隔
_tableView.contentInset = UIEdgeInsetsMake(kHeaderHeight + 76, 0, 0, 0);
紧接着就是滑动效果了
通过 tableview 的滑动方法,让 View 跟随滑动:
这部分我只是让 _navigationView 在滑动的时候改变其Y 轴以适配导航栏高度
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offSetY = scrollView.contentOffset.y + scrollView.contentInset.top;
// //iPhone X 下 View 滑动后的高度
CGFloat minY = 32 ;
// // 设置顶部视图Y轴坐标
_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
那么还可以这样,达到的效果是一样的,而且不用再修改 cell 的 top 了
UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200)];
// 设置header
_tableView.tableHeaderView = header;
_tableView.tableHeaderView.backgroundColor = [UIColor blueColor];
开始感觉好难,做出来后觉得真的是只有想不到,没有做不到!
我也是看了别人的代码后才慢慢改的,我还是太菜了.
有问题的可以留言,如果有需要代码的 稍后我会上传到 GitHub
