如何在Swift中实现类似Citymapper的地图视差滚动效果？

嘿，这个效果我之前做过类似的，其实核心就是监听滚动偏移量，动态调整地图的高度/位置，同时配合列表的内容内边距，下面一步步给你拆解：

1. 基础布局（用Auto Layout） #

先在ViewController里搭好基础视图：

• 添加一个MKMapView（或者你自定义的地图视图），设置它的top、leading、trailing约束绑定到父视图对应边缘，再给它加一个高度约束，拖成IBOutlet命名为mapHeightConstraint。
• 添加一个UITableView，把它的top、leading、trailing、bottom约束都绑定到父视图边缘。
• 给地图设置初始最大高度（比如300），同时给tableView设置初始contentInset.top = 300，这样初始状态下tableView顶部会留出地图的高度，刚好显示完整地图。

2. 核心滚动监听逻辑 #

让ViewController遵守UIScrollViewDelegate，实现scrollViewDidScroll方法——这是处理视差效果的核心：

class MapViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    @IBOutlet weak var mapView: MKMapView!
    @IBOutlet weak var mapHeightConstraint: NSLayoutConstraint!
    @IBOutlet weak var tableView: UITableView!
    
    // 定义地图的最大/最小高度（可根据需求调整）
    let maxMapHeight: CGFloat = 300
    let minMapHeight: CGFloat = 0 // 设为0是完全隐藏，也可以留80px做小条
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        // 初始设置列表内边距，留出地图空间
        tableView.contentInset = UIEdgeInsets(top: maxMapHeight, left: 0, bottom: 0, right: 0)
        // 初始偏移让列表顶部对齐地图底部
        tableView.contentOffset = CGPoint(x: 0, y: -maxMapHeight)
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        
        // 限制向上滚动的范围：防止用户拉得太狠超出地图最大高度
        if offsetY < -maxMapHeight {
            scrollView.contentOffset = CGPoint(x: 0, y: -maxMapHeight)
            return
        }
        
        // 计算地图高度变化的进度：从0（完全展开）到1（完全隐藏）
        let scrollRange = maxMapHeight - minMapHeight
        let progress = min(1.0, max(0.0, (offsetY + maxMapHeight) / scrollRange))
        
        // 更新地图高度
        let currentMapHeight = maxMapHeight - (progress * scrollRange)
        mapHeightConstraint.constant = currentMapHeight
        
        // 更新列表内边距，保证列表顶部始终贴合地图底部
        tableView.contentInset = UIEdgeInsets(top: currentMapHeight, left: 0, bottom: 0, right: 0)
        
        // 可选：添加地图缩放的视差增强效果（滚动时地图轻微缩小）
        let scale = 1 - (progress * 0.1) // 最多缩小10%
        mapView.transform = CGAffineTransform(scaleX: scale, y: scale)
    }
    
    // 补全tableView的数据源方法（示例）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel?.text = "列表项 \(indexPath.row + 1)"
        return cell
    }
}

3. 关键细节优化 #

• 滚动边界控制：限制向上滚动的最大范围，避免地图被拉得超出屏幕，提升交互体验。
• 平滑过渡：用进度值线性计算地图高度，保证滚动时地图的变化流畅无跳动。
• 视觉增强：可以给地图添加透明度变化（比如mapView.alpha = 1 - progress * 0.5），让隐藏过程更自然。
• 性能优化：如果地图上有大量标注，滚动时可以暂时关闭标注渲染，滚动结束后再恢复，减少卡顿。

4. 注意事项 #

• 如果用UIScrollView替代UITableView，逻辑完全一致，只需要监听它的滚动事件即可。
• 确保tableView的clipsToBounds设为true，避免列表内容跑到地图下方显示。
• 测试不同屏幕尺寸，调整最大/最小高度值，保证在各种设备上的显示效果合理。

这样实现出来的效果就和Citymapper几乎一致：向下滚动时地图逐渐收缩隐藏，向上滚动时地图展开显示，整个过程平滑自然。

内容的提问来源于stack exchange，提问作者cusmar