Question

我试图从Postmates checkout复制以下GIF - 一个位于MapView顶部的可滚动UITableView。如果我向下或向上走太远，可以滚动此表视图，并具有正常的反弹效果。

目前，我已将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
                          );

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

我无法弄清楚如何在拉下时拖动整个桌面视图。例如。当我向下滚动时，灰色（我的tableView.backgroundColor）会粘住。但是，如果我将背景清晰，那么当我向上拖动时，您会看到地图后面的地图。
向上滚动时，我的细胞不断消失。我有clipsToBounds = false，我实际上并没有将单元格出列，只是在我的cellForRow方法中创建它们，但它们仍然会消失。

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

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

Answer 1

我们的应用程序需要类似的效果，以及基础视图中的视差（地图/我们有照片库）。

我认为你想要这个博客视频here

上显示的内容

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

基本上它只是contentInsets的{{1}}和contentOffset属性的播放

如果这不适合你，请在这两点中提出我的建议。

Controller的View有子视图

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

Answer 2

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

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

在表格视图的console.log("Connecting local"); return new Promise(function(resolve, reject){ exports.bs_local = new browserstack.Local(); exports.bs_local.start({'key': exports.config.capabilities['browserstack.key'] }, function(error) { if (error) return reject(error); console.log('Connected. Now testing...'); resolve(); }); });上添加一个虚拟视图，其中包含表格视图的背景颜色，其高度约为200像素，全宽度为<{1}}。

Connecting local
C:\Users\rparker\AppData\Roaming\npm\node_modules\protractor\node_modules\q\q.js
:155
                throw e;
                ^

Error: spawn UNKNOWN
    at exports._errnoException (util.js:1018:11)
    at ChildProcess.spawn (internal/child_process.js:319:11)
    at exports.spawn (child_process.js:378:9)
    at Object.exports.execFile (child_process.js:143:15)
    at C:\Users\rparker\Documents\GitHub\interACT\node_modules\browserstack-loca
l\lib\Local.js:33:34
    at LocalBinary.binaryPath (C:\Users\rparker\Documents\GitHub\interACT\node_m
odules\browserstack-local\lib\LocalBinary.js:83:7)
    at Local.getBinaryPath (C:\Users\rparker\Documents\GitHub\interACT\node_modu
les\browserstack-local\lib\Local.js:228:19)
    at Local.start (C:\Users\rparker\Documents\GitHub\interACT\node_modules\brow
serstack-local\lib\Local.js:28:10)
    at C:\Users\rparker\Documents\GitHub\interACT\test\protractor-ie.conf.js:34:
24
    at beforeLaunch (C:\Users\rparker\Documents\GitHub\interACT\test\protractor-
ie.conf.js:32:12)

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

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

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

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

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;

这将按下桌面视图，确保滚动条与表格视图匹配，但允许它在其初始位置上方“向上”反弹，并确保背景不会透过桌面视图的底部。

可滚动的UITableView作为叠加层

2 个答案: