iOS 应用中巧妙打造可拖动导航浮动按钮，解锁便捷导航体验

2023-12-02 02:41:55

在纷繁复杂的应用世界中，清晰便捷的导航功能犹如一盏指路明灯，引领用户畅游应用的各个角落。当应用的规模逐渐庞大，导航的重要性更是不言而喻。在众多常见的导航方式中，UITabBarController、UINavigationBar 堪称标杆。然而，有一种导航方式，虽非 iOS 原生，却凭借其独特魅力而备受青睐——可拖动导航浮动按钮。

可拖动导航浮动按钮的魅力

相较于传统的导航方式，可拖动导航浮动按钮拥有以下独特的优势：

交互灵活性： 用户可以自由拖动浮动按钮至屏幕任意位置，无需拘泥于固定的导航栏或底部栏。
空间优化： 浮动按钮体积小巧，不会占用过多的屏幕空间，为应用内容展示留出更多空间。
快速访问： 浮动按钮始终悬浮在屏幕上方，用户可以在任何界面快速访问它，省去频繁切换页面的繁琐。

从零打造可拖动导航浮动按钮

1. 创建基础浮动按钮

首先，我们创建一个 UIButton 作为浮动按钮：

let floatButton = UIButton()
floatButton.setImage(UIImage(systemName: "plus"), for: .normal)
floatButton.backgroundColor = .blue
floatButton.layer.cornerRadius = 30

2. 添加拖动手势

为了让浮动按钮可拖动，需要添加拖动手势：

let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(gesture:)))
floatButton.addGestureRecognizer(panGesture)

3. 处理拖动手势

在处理拖动手势的方法中，实时更新浮动按钮的位置：

@objc func handlePanGesture(gesture: UIPanGestureRecognizer) {
    let translation = gesture.translation(in: self.view)
    floatButton.center = CGPoint(x: floatButton.center.x + translation.x, y: floatButton.center.y + translation.y)
    gesture.setTranslation(.zero, in: self.view)
}

4. 限制拖动范围（可选）

如果需要限制浮动按钮的拖动范围，可以设置边界约束：

// 设置左右边界约束
let leftConstraint = NSLayoutConstraint(item: floatButton, attribute: .left, relatedBy: .greaterThanOrEqual, toItem: self.view, attribute: .left, multiplier: 1, constant: 20)
let rightConstraint = NSLayoutConstraint(item: floatButton, attribute: .right, relatedBy: .lessThanOrEqual, toItem: self.view, attribute: .right, multiplier: 1, constant: -20)
// 设置上下边界约束
let topConstraint = NSLayoutConstraint(item: floatButton, attribute: .top, relatedBy: .greaterThanOrEqual, toItem: self.view, attribute: .top, multiplier: 1, constant: 20)
let bottomConstraint = NSLayoutConstraint(item: floatButton, attribute: .bottom, relatedBy: .lessThanOrEqual, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -20)
// 激活边界约束
NSLayoutConstraint.activate([leftConstraint, rightConstraint, topConstraint, bottomConstraint])