ios 让输入框跟着键盘移动

原创

mob64ca12d39d4a 2024-09-23 04:06:16 ©著作权

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

iOS 输入框随键盘移动的实现方法

在iOS开发中，让输入框随着键盘的移动而移动，是提升用户体验的重要一环。本文将详细介绍实现这个功能的步骤，包括流程、所需代码及注释。通过本文，你将能够独立实现这个功能。

流程概述

以下是实现输入框跟随键盘移动的步骤：

步骤	描述
1	监听键盘通知
2	计算键盘高度
3	更新输入框的约束
4	动画输入框的移动
5	还原输入框位置

接下来我们用 Mermaid 流程图展示这个过程：

flowchart TD
    A[步骤1: 监听键盘通知] --> B[步骤2: 计算键盘高度]
    B --> C[步骤3: 更新输入框的约束]
    C --> D[步骤4: 动画输入框的移动]
    D --> E[步骤5: 还原输入框位置]

详细步骤及代码

步骤 1: 监听键盘通知

首先，我们需要注册键盘显示和隐藏的通知，以便能够获取键盘的高度和状态。我们通常在viewDidLoad方法中进行此操作。

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 注册键盘出现的通知
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
    
    // 注册键盘隐藏的通知
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
}

步骤 2: 计算键盘高度

当键盘显示时，我们需要获取键盘的高度，以便移动输入框。创建一个方法来处理键盘显示的事件。

@objc func keyboardWillShow(notification: Notification) {
    // 获取键盘的高度
    if let userInfo = notification.userInfo {
        let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue
        let keyboardHeight = keyboardFrame?.cgRectValue.height ?? 0

        // 调用更新输入框位置的方法
        updateInputFieldPosition(keyboardHeight: keyboardHeight)
    }
}

步骤 3: 更新输入框的约束

为了让输入框移动，我们需要更新它的约束。假设我们的输入框有一个底部约束。

@objc func keyboardWillHide(notification: Notification) {
    // 还原输入框位置
    updateInputFieldPosition(keyboardHeight: 0)
}

func updateInputFieldPosition(keyboardHeight: CGFloat) {
    // 假设 inputFieldBottomConstraint 是一个 IBOutlet 连接到输入框底部的约束
    inputFieldBottomConstraint.constant = keyboardHeight + 20 // 20 是距离底部的额外空间

    // 开始动画
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

步骤 4: 动画输入框的移动

在上述代码中，我们已经使用 UIView.animate 方法进行了输入框位置移动的动画处理。只需要提供动画持续时间，并调用 layoutIfNeeded 使布局更新。

步骤 5: 还原输入框位置

通过在键盘隐藏时调用 updateInputFieldPosition 方法，并将 keyboardHeight 设置为 0，可以还原输入框的位置。

@objc func keyboardWillHide(notification: Notification) {
    updateInputFieldPosition(keyboardHeight: 0)
}

序列图

以下是实现输入框移动过程的序列图，展示了整体交互流程：

sequenceDiagram
    participant User
    participant Keyboard
    participant InputField

    User->>Keyboard: 打开键盘
    Keyboard->>InputField: 调用keyboardWillShow
    InputField->>InputField: 更新约束
    InputField->>InputField: 动画移动
    User->>Keyboard: 关闭键盘
    Keyboard->>InputField: 调用keyboardWillHide
    InputField->>InputField: 还原约束