使用UIPanGestureRecogniser实现汉堡菜单的滑动复位异常问题

嘿，我之前手动实现汉堡菜单时也踩过这个坑！看起来你的滑动手势逻辑已经能让侧边栏跟着动了，但松开手指后的布局处理出了问题，导致侧边栏顶部没能固定在屏幕顶部。下面是几个最可能的原因和对应的解决办法：

1. 检查侧边栏的顶部约束/位置绑定 #

首先要确保侧边栏的顶部位置是固定绑定到屏幕顶部（或安全区域顶部），而不是依赖主视图的位置。如果之前你把侧边栏的top和主视图的top关联，那主视图滑动时侧边栏的top也会跟着偏移，松开后自然回不到正确位置。

• 如果你用Frame直接控制：初始化侧边栏时就把y值设为0（或safeAreaInsets.top），滑动过程中不管x怎么变，y值始终保持不变。
• 如果你用Auto Layout：一定要给侧边栏添加固定的top约束，比如绑定到view.safeAreaLayoutGuide.topAnchor，不要让这个约束的constant值被手势修改。

2. 修正手势结束时的动画逻辑 #

在UIPanGestureRecognizer的.ended状态下，你可能不小心修改了侧边栏的y轴位置，或者计算最终位置时出错了。这里给你一个Frame方式的示例代码，重点是保持y值不变：

// 提前定义好侧边栏宽度和初始位置
let sidebarWidth: CGFloat = 280
private var initialSidebarX: CGFloat = 0

func setupPanGesture() {
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
    mainView.addGestureRecognizer(panGesture)
}

@objc func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
    let translation = gesture.translation(in: view)
    
    switch gesture.state {
    case .began:
        // 记录侧边栏初始的x位置
        initialSidebarX = sidebar.frame.origin.x
    case .changed:
        // 只更新x轴位置，y轴保持固定
        let newX = initialSidebarX + translation.x
        // 限制滑动范围：不能完全滑出右侧，也不能超过屏幕左侧
        let clampedX = max(-sidebarWidth, min(newX, 0))
        
        // 更新侧边栏frame
        sidebar.frame = CGRect(
            x: clampedX,
            y: sidebar.frame.origin.y, // 这里保持y不变！
            width: sidebarWidth,
            height: sidebar.frame.height
        )
        
        // 联动更新主视图位置
        mainView.frame = CGRect(
            x: sidebar.frame.maxX,
            y: mainView.frame.origin.y,
            width: mainView.frame.width,
            height: mainView.frame.height
        )
    case .ended:
        // 判断是否要完全展开侧边栏
        let shouldExpand = sidebar.frame.origin.x > -sidebarWidth / 2
        let finalX: CGFloat = shouldExpand ? 0 : -sidebarWidth
        
        // 动画到最终位置，依然保持y值不变
        UIView.animate(withDuration: 0.3) {
            self.sidebar.frame = CGRect(
                x: finalX,
                y: self.sidebar.frame.origin.y,
                width: self.sidebarWidth,
                height: self.sidebar.frame.height
            )
            self.mainView.frame = CGRect(
                x: finalX + self.sidebarWidth,
                y: self.mainView.frame.origin.y,
                width: self.mainView.frame.width,
                height: self.mainView.frame.height
            )
        }
    default:
        break
    }
}

3. 用Auto Layout约束更稳定（推荐） #

如果用Auto Layout来实现，逻辑会更清晰，也不容易出现位置偏移问题。核心是用侧边栏的leading约束控制滑动，top约束固定死：

// 提前创建并激活约束
private var sidebarLeadingConstraint: NSLayoutConstraint!

func setupLayout() {
    // 侧边栏添加到父视图，关闭translatesAutoresizingMaskIntoConstraints
    sidebar.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(sidebar)
    
    sidebarLeadingConstraint = sidebar.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: -sidebarWidth)
    
    NSLayoutConstraint.activate([
        sidebarLeadingConstraint,
        sidebar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor), // 固定顶部
        sidebar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        sidebar.widthAnchor.constraint(equalToConstant: sidebarWidth),
        
        // 主视图的leading绑定到侧边栏的trailing，实现联动
        mainView.leadingAnchor.constraint(equalTo: sidebar.trailingAnchor),
        mainView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        mainView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        mainView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
    ])
}

@objc func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
    let translation = gesture.translation(in: view)
    var initialConstant: CGFloat = 0
    
    switch gesture.state {
    case .began:
        initialConstant = sidebarLeadingConstraint.constant
    case .changed:
        let newConstant = initialConstant + translation.x
        // 限制滑动范围
        sidebarLeadingConstraint.constant = max(-sidebarWidth, min(newConstant, 0))
        // 实时更新布局
        view.layoutIfNeeded()
    case .ended:
        let shouldExpand = sidebarLeadingConstraint.constant > -sidebarWidth / 2
        sidebarLeadingConstraint.constant = shouldExpand ? 0 : -sidebarWidth
        // 动画收尾
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    default:
        break
    }
}

这种方式下，侧边栏的top被牢牢固定在安全区域顶部，不管怎么滑动都不会偏移，而且主视图和侧边栏的联动是通过约束自动实现的，逻辑更简洁。

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