IOS中UITextField 遮挡试图问题

原创

mob649e815adb02 2024-08-02 05:27:30 ©著作权

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

在iOS中解决UITextField遮挡视图问题

对于刚入行的小白来说，开发过程中常会遇到一些 UI 问题，特别是在输入框（UITextField）上下文环境中。最常见的情况是，当键盘弹出时，输入框会被键盘遮挡，影响用户体验。下面我将详细讲解如何解决这个问题，并提供一个清晰的流程图和代码实例。

一、整体实现流程

在处理UITextField被遮挡的问题时，一般可以依照以下步骤进行操作：

步骤	描述
1	注册键盘通知，监控键盘的弹出和收回事件
2	在收到键盘弹出通知时，调整视图（例如：UIScrollView或UIView）的位置
3	在收到键盘收起通知时，恢复视图位置
4	完成设置并测试

接下来，我们将详细介绍每一个步骤。

二、实现步骤详细说明

1. 注册键盘通知

当应用程序启动时，我们需要注册键盘的通知，以便能够监控键盘的弹出和收起。

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

注释：

NotificationCenter.default.addObserver：用来注册观察者，以便在指定通知发生时调用相应的方法。
UIResponder.keyboardWillShowNotification 和 UIResponder.keyboardWillHideNotification：分别表示键盘弹出和收回的通知。

2. 处理键盘弹出事件

当键盘弹出时，我们需要获取键盘的高度，以便调整视图的位置。

@objc func keyboardWillShow(notification: Notification) {
    // 获取键盘的高度
    if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue {
        // 计算适合的视图偏移量
        let bottomSpace = keyboardSize.height
        // 移动视图，通常视图是 UIScrollView
        self.view.frame.origin.y = -bottomSpace
    }
}

注释：

UIResponder.keyboardFrameEndUserInfoKey：用于获取键盘的尺寸。
self.view.frame.origin.y = -bottomSpace：将视图向上移动，以避免遮挡。

3. 处理键盘收起事件

与键盘弹出相对应，当键盘收回时，我们需要恢复视图到原来的位置。

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

注释：

将 self.view.frame.origin.y 设置回 0，以将视图恢复到初始状态。

4. 完成设置并测试

在实现完上述功能后，不要忘记在 deinit 中移除观察者，以避免内存泄漏。

deinit {
    NotificationCenter.default.removeObserver(self)
}

三、类图

我们可以通过下面的 Mermaid 语法来呈现类图，说明我们项目中主要类和其关系。

classDiagram
    class ViewController {
        +viewDidLoad()
        +keyboardWillShow(notification: Notification)
        +keyboardWillHide(notification: Notification)
    }

四、旅程图

接下来，我们使用 Mermaid 语法来展现用户交互的旅程图。

journey
    title 用户输入框交互旅程
    section 用户输入
      用户触碰输入框: 5: 用户
      键盘弹出: 5: 系统
    section 用户调整视图
      用户看到输入框没被遮挡: 5: 用户
    section 用户结束输入
      用户点击完成: 5: 用户
      键盘收回: 5: 系统