iOS modalVC 键盘弹出上移问题

原创

mob64ca12dab0a2 2024-10-21 03:53:02 ©著作权

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

iOS ModalVC 键盘弹出上移问题解决方案

在开发 iOS 应用时，处理键盘在输入框上方弹出的行为是常见的需求。尤其是在使用模态视图控制器 (Modal View Controller) 时，确保输入框在键盘弹出时能够正常显示是非常重要的。本文将为你逐步阐述如何解决这一问题。

整体流程

步骤	说明
1	监听键盘的弹出和隐藏事件
2	计算键盘的高度
3	调整视图的约束或位置
4	恢复视图到原来的位置

步骤详解

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 来添加观察者，监听键盘的展示和隐藏。keyboardWillShow 和 keyboardWillHide 是我们后面将定义的方法。

2. 计算键盘高度

当键盘展示时，我们需要获取它的高度，以便我们能够移动视图。

@objc func keyboardWillShow(notification: NSNotification) {
    if let userInfo = notification.userInfo,
       let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
        let keyboardHeight = keyboardFrame.cgRectValue.height
        adjustViewForKeyboard(height: keyboardHeight)
    }
}

代码说明：

获取键盘的高度，调用 adjustViewForKeyboard(height:) 方法来调整视图。

3. 调整视图的位置或约束

我们需要根据键盘的高度调整视图的位置。

func adjustViewForKeyboard(height: CGFloat) {
    // 假设有一个约束是底部安全距离，调整这个约束
    yourViewBottomConstraint.constant = height
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

代码说明：

通过修改视图的底部约束，利用 layoutIfNeeded() 方法进行动画展示。

4. 恢复视图

当键盘隐藏，我们需要将视图恢复到原来的状态。

@objc func keyboardWillHide(notification: NSNotification) {
    yourViewBottomConstraint.constant = 0 // 恢复到原来的位置
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

代码说明：

键盘隐藏时，将底部约束设回 0，然后通过动画效果刷新视图布局。

甘特图示例

gantt
    title iOS ModalVC 键盘弹出上移问题解决方案
    dateFormat  YYYY-MM-DD
    section Step 1: 监听键盘事件
    设定观察者          :done,    des1, 2023-10-01, 1d
    section Step 2: 获取键盘高度
    计算键盘高度      :done,    des2, 2023-10-02, 1d
    section Step 3: 调整视图
    视图位置调整      :active,  des3, 2023-10-03, 1d
    section Step 4: 恢复视图
    恢复视图位置      :done,    des4, 2023-10-04, 1d

关系图示例

erDiagram
    Notice {
        string title
        string message
    }
    User {
        string username
        string email
    }
    User ||--o{ Notice : "receives"