iOS 键盘弹起页面滚动

原创

mob64ca12e10b51 2024-11-19 07:28:31 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e10b51的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS 键盘弹起页面滚动实现指南

在开发 iOS 应用时，用户输入时通常会调出键盘。在输入框被键盘遮挡时，页面需要相应地进行滚动，以确保用户可以看到他们正在输入的内容。下面，我将引导你完成实现这一功能的步骤，以及代码示例和解释。

解决方案的流程

为确保你的页面在键盘弹起时能够正确滚动，我们可以按照以下步骤进行操作：

步骤	描述
1	注册键盘出现与消失的通知
2	监听通知并调整页面内容的位置
3	销毁通知以避免内存泄漏

步骤 1: 注册键盘出现与消失的通知

我们首先需要在视图控制器中注册键盘的通知，以便在键盘出现或消失时可以接收到消息。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    // 注册键盘弹起和收起的通知
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
}

使用 NotificationCenter 添加两个观察者，分别监听键盘出现和消失的事件。

步骤 2: 监听通知并调整页面内容的位置

我们将在收到消息时调整页面内容的位置。

@objc func keyboardWillShow(notification: NSNotification) {
    // 获取键盘的高度
    if let userInfo = notification.userInfo {
        let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue
        let height = keyboardFrame?.cgRectValue.height ?? 0
        
        // 调整页面的底部约束
        self.view.frame.origin.y -= height
    }
}

@objc func keyboardWillHide(notification: NSNotification) {
    // 将视图复位
    self.view.frame.origin.y = 0
}

在 keyboardWillShow 方法中，获取键盘的高度并根据这个高度调整视图的 y 坐标值。
在 keyboardWillHide 方法中，将视图的 y 坐标复位。

步骤 3: 销毁通知以避免内存泄漏

最后，要记得在视图控制器消失时移除观察者，以避免内存泄漏。

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    // 移除观察者
    NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
    NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillHideNotification, object: nil)
}

在 viewWillDisappear 方法中，移除我们之前注册的通知。

关系图（ER图）

我们可以用如下的关系图（ER图）来展示视图控制器、通知中心和键盘之间的关系：

erDiagram
    VIEW_CONTROLLER {
        +viewWillAppear()
        +viewWillDisappear()
        +keyboardWillShow()
        +keyboardWillHide()
    }
    NOTIFICATION_CENTER {
        +addObserver()
        +removeObserver()
    }
    KEYBOARD {
        +keyboardWillShowNotification
        +keyboardWillHideNotification
    }
    VIEW_CONTROLLER ||--|| NOTIFICATION_CENTER : uses
    NOTIFICATION_CENTER ||--|| KEYBOARD : listens_for

类图

接下来，是视图控制器与键盘的类图，这展示了它们之间的继承关系和交互。

classDiagram
    class ViewController {
        +viewWillAppear(animated: Bool)
        +viewWillDisappear(animated: Bool)
        +keyboardWillShow(notification: NSNotification)
        +keyboardWillHide(notification: NSNotification)
    }
    class NotificationCenter {
        +addObserver()
        +removeObserver()
    }
    class Keyboard {
        +keyboardWillShowNotification
        +keyboardWillHideNotification
    }
    ViewController <|-- NotificationCenter
    ViewController <|-- Keyboard