Swift社交应用文本输入优化汇总

Swift 社交应用文本输入优化汇总社交应用文本输入优化汇总 一 输入相关的优化问题一 输入相关的优化问题 在大部分应用中 都有输入的需求 面对众多用户 他们的想法各异 输入的文本内容也是千奇百怪 面对不同的输 入 我们该如何优化输入体验 本文将汇总一下 Swift 社交应用文本输入优化技巧 这里集中汇总输入相关问题 主要如下 输入控件 UITextField 跟随键盘移动 过滤输入内容过滤输入内容 响应编程的处理 去除体验不好的对话框 HUD 提示 中文输入中文输入 二 输入框随键盘移动二 输入框随键盘移动 界面构建有两种方法 代码或者 storyboard xib 这两种方法在处理键盘移动上方法相同 这里推荐使用已经封装好 的第三方框架 TPKeyboardAvoiding 1 代码处理方法 rootView 使用 TPKeyboardAvoiding 框架中的 TPKeyboardAvoidingScrollView 来初使化 例如 登录界面 LoginViewController 继承自 UIViewController 处理方法如下 1 let rootView TPKeyboardAvoidingScrollView frame self view bounds 2 3 add all subviews to rootView 4 5 self view addSubview rootView 代码构建界面 实现输入框随键盘移动 需要将类 TPKeyboardAvoidingScrollView 做为根视图来处理 2 storyboard xib 处理办法处理办法 storyboard xib 处理起来更简单 将视图控制器的 rootView 设置为 TPKeyboardAvoidingScrollView 即可 1 选择控制器的根视图选择控制器的根视图 2 设置默认实例化类设置默认实例化类 三 常用基本设置三 常用基本设置 1 常用基本设置 常用基本设置 包括打开键盘 关闭键盘 指定键盘的输入类型 指定 return 按钮的类型 如以下代码 1 打开键盘 2 self inputText becomeFirstResponder 3 关闭键盘 4 self inputText resignFirstResponder 5 指定键盘的输入类型 6 self inputText keyboardType UIKeyboardType NumberPad 7 指定 return 按键的类型 8 self inputText returnKeyType UIReturnKeyType Go 2 通过代理过滤输入 通过代理过滤输入 通过 UITextField UITextView 的代理 可以更精确的控制输入 例如 过滤指定字符 超过字符数禁止输入等 1 UITextField 代码如下 1 设置代理 可根据实际情况来设置代理 这里使用 self 来指定 2 self textField delegate self 3 4 代理方法实现 5 func textField textField UITextField shouldChangeCharactersInRange 6 range NSRange replacementString string String Bool 7 8 禁止输入空格 9 if string 10 return false 11 12 13 按下回车后取消键盘 14 if string n 15 textField resignFirstResponder 16 return false 17 18 19 return true 20 2 UITextView 代码如下 代码如下 1 self textView delegate self 2 3 代理方法实现 4 func textView textView UITextView shouldChangeTextInRange range NSRange 5 replacementText text String Bool 6 7 禁止输入空格 8 if text 9 return false 10 11 12 按下回车后取消键盘 13 if text n 14 textView resignFirstResponder 15 return false 16 17 18 return true 19 UITextField UITextView 可以通过代理方法实时检测用户输入的内容 方便对输入约束 例如 在输入超过 10 个字符 时 禁止用户输入 不过这种体验不好 建议不要使用 四 响应编程处理 精确提示信息四 响应编程处理 精确提示信息 1 如何优化 如何优化 输入信息的约束一般是将规则直接提示给用户 例如 社交中用户昵称的输入 请输入 1 8 位的字符作为昵称 不能包括空格 回车 标点 用户点击 确定 按钮之后 检查输入的合法性 并通过对话框 或 HUD 的形式 提示给用户信息 上面的处理方式 十分常见 能满足基本需求 不过我们已经不再采用上面的设计 原因有以下两点 提示信息过多 大部分用户不会看提示信息过多 大部分用户不会看 对话框及对话框及 HUD 提示比较突兀 容易使用户产生挫败感提示比较突兀 容易使用户产生挫败感 在实际开发过程中 精减提示信息为在实际开发过程中 精减提示信息为 1 请输入 1 8 个字符 用户主动输入空格 回车 标点这些字符或者超出长度时 才主动提示给用户信息 如下图 无输入 确定按钮 disable 只提示极少有用信息 输入合法 确定按钮输入合法 确定按钮 enable 输入不合法 高亮错误显示 确定按钮输入不合法 高亮错误显示 确定按钮 disable 2 代码实现 代码实现 使用第三方框架 ReactiveCocoa 首先实现在用户输入时 下方提示及右侧图片的功能 不使用三方框架 可自己通过 代理实现 1 IBOutlet weak var nickTextField UITextField 文本输入框 2 IBOutlet weak var checkResultShowImageView UIImageView 输入框右侧图片 3 IBOutlet weak var button UIButton 4 IBOutlet weak var hintLabel UILabel 文本框下方提示文字 5 6 override func viewDidLoad 7 super viewDidLoad 8 配置输入 9 configInput 10 11 12 func configInput 13 self nickTextField rac textSignal subscribeNext text Void in 14 if text nil text length 0 15 self checkResultShowImageView hidden false 16 return 17 18 19 self checkResultShowImageView hidden true 20 var imageName 21 if self checkInputValidate 22 imageName ok png 23 self hintLabel text 24 else 25 imageName warning png 26 self hintLabel text 超出 text length 8 个字符 27 28 self checkResultShowImageView image UIImage named imageName 29 30 31 32 33 func checkInputValidate Bool 34 输入条件检查 这里示例 只检查字符长度 35 let length self nickTextField text as NSString length 36 return length 0 21 22 这里可以加入去除空格 标点等操作 23 self chineseText text as NSString 24 25 if text nil text length 0 26 self checkResultShowImageView hidden false 27 return 28 29 30 self checkResultShowImageView hidden true 31 var imageName 32 if self checkInputValidate 33 imageName ok png 34 self hintLabel text 35 else 36 imageName warning png 37 self hintLabel text 超出 text length 8 个字符 38 39 self checkResultShowImageView i