可滚动的 UITableView 作为覆盖

Question

我正在尝试从 Postmates 结帐中复制以下 GIF - 位于 MapView 顶部的可滚动 UITableView。这个 tableview 可以滚动，如果我向下或向上走得太远，会有正常的反弹效果。

目前，我已将 MapView 和 UITableView 作为同级视图添加到我的 ViewController 的视图中。我已经调整了表格视图的框架以将其向下移动。

    CGRect rect =  CGRectMake(
                          0.f,
                          200.f,
                          self.view.bounds.size.width,
                          self.view.bounds.size.height - self.navigationController.navigationBar.bounds.size.height - 200.f
                          );

我遇到的两个主要问题是：

1. 我不知道下拉时如何将整个 tableview 向下拖动。例如。当我向下滚动时，灰色（我的tableView.backgroundColor）会粘住。但是，如果我使背景清晰，那么当我向上拖动时，您会看到地图从视图后面出现。

2. 当我向上滚动时，我的单元格不断消失。我有clipsToBounds = false，实际上我并没有将单元格出列，只是在我的cellForRow 方法中创建它们，但它们仍然消失了。

我觉得这应该是一个简单的布局，但我错过了一些东西！

我尝试调整表格视图的contentInset，但滚动条与 gif 中的单元格不对齐，看起来不太好。

Answer 1

我们的应用需要类似的效果，以及底层视图中的视差（此处为地图/我们有一个照片库）。

我假设您想要在此博客视频 here 上显示的内容

我写了一篇关于如何实现这一目标的小博客。你可以找到这个here

基本上它只是contentInsets 和contentOffset 属性的UITableView 的一个游戏

---

如果这不适合你，这里我的建议在你的两个要点。

Controller 的 View 有子视图

1. 地图视图（填充完整的超级视图）
2. UITableView（填充完整的超级视图）和代码集内容insets.top = kHeightOfVisibleMap

Answer 2

解决方案比我想象的要简单，不需要自动布局或疯狂的奇怪技巧。

1. 向控制器添加全屏表格视图，并在其后面插入全屏地图视图。

   self.mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
   [self.view insertSubview:self.mapView belowSubview:self.tableView];
   

2. 在表格视图的tableFooterView 中添加一个高度约为 200 像素、全宽、具有表格视图背景颜色的虚拟视图。

   CGFloat footerHeight = 200.0;
   UIView *dummyView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, footerHeight)];
   dummyView.backgroundColor = [UIColor whiteColor];
   self.tableView.tableFooterView = dummyView;
   

3. 将表格视图的内容偏移设置为该页脚视图高度的倒数：

   CGFloat footerHeight = dummyFooterView.bounds.height;
   self.tableView.contentOffset = CGPointMake(0, -footerHeight);
   

4. 设置表格视图的内容插入以偏移页脚视图。

   self.tableView.contentInset = UIEdgeInsetsMake(footerHeight, 0, -footerHeight, 0)
   

5. 再次根据页脚的高度调整滚动条的位置。

   self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(footerHeight, 0, 0, 0);
   

这将向下推 tableview，确保滚动条与 table view 匹配，但允许它在其初始位置上方“向上”反弹，并确保背景不会从 tableview 底部窥视。