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

在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?本文将汇总一下Swift社交应用文本输入优化技巧。

AD:

一、输入相关的优化问题

在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?本文将汇总一下Swift社交应用文本输入优化技巧。

这里集中汇总输入相关问题,主要如下:

输入控件UITextField跟随键盘移动

过滤输入内容

响应编程的处理,去除体验不好的对话框、HUD提示

中文输入

二、输入框随键盘移动

界面构建有两种方法,代码或者storyboard/xib,这两种方法在处理键盘移动上方法相同,这里推荐使用已经封装好的第三方框架:TPKeyboardAvoiding
1、代码处理方法

rootView使用**TPKeyboardAvoding**框架中的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)选择控制器的根视图

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

(2)设置默认实例化类

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

三、常用基本设置
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. func textField(textField: UITextField, shouldChangeCharactersInRange
  5. range: NSRange, replacementString string: String) -> Bool
  6. {
  7. //禁止输入空格
  8. if (string == " ") {
  9. return false
  10. }
  11. //按下回车后取消键盘
  12. if (string == "\n") {
  13. textField.resignFirstResponder()
  14. return false
  15. }
  16. return true
  17. }

UITextView代码如下:

  1. //设置代理,可根据实际情况来设置代理,这里使用self来指定
  2. self.textView.delegate = self
  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. if (text == "\n") {
  13. textView.resignFirstResponder()
  14. return false
  15. }
  16. return true
  17. }

UITextField/UITextView可以通过代理方法实时检测用户输入的内容,方便对输入约束,例如,在输入超过10个字符时,禁止用户输入,不过这种体验不好,建议不要使用
四、响应编程处理,精确提示信息
1、如何优化

输入信息的约束一般是将规则直接提示给用户,例如:社交中用户昵称的输入:

请输入1-8位的字符作为昵称,不能包括空格、回车、标点

用户点击**确定**按钮之后,检查输入的合法性,并通过对话框(或HUD)的形式,提示给用户信息

上面的处理方式,十分常见,能满足基本需求。不过我们已经不再采用上面的设计,原因有以下两点:

提示信息过多,大部分用户不会看

对话框及HUD提示比较突兀,容易使用户产生挫败感

在实际开发过程中,精减提示信息为

  1. 请输入1-8个字符

用户主动输入空格、回车、标点这些字符或者超出长度时,才主动提示给用户信息,如下图,无输入,确定按钮disable,只提示极少有用信息

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

输入合法,确定按钮enable

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

输入不合法,高亮错误显示,确定按钮disable

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

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. override func viewDidLoad() {
  6. super.viewDidLoad()
  7. //配置输入
  8. configInput()
  9. }
  10. func configInput() {
  11. self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void in
  12. if (text == nil || text.length == 0) {
  13. self.checkResultShowImageView.hidden = false
  14. return
  15. }
  16. self.checkResultShowImageView.hidden = true
  17. var imageName = ""
  18. if (self.checkInputValidate()) {
  19. imageName = "ok.png"
  20. self.hintLabel.text = ""
  21. } else {
  22. imageName = "warning.png"
  23. self.hintLabel.text = "超出\(text.length - 8)个字符"
  24. }
  25. self.checkResultShowImageView.image = UIImage(named: imageName)
  26. }
  27. }
  28. func checkInputValidate() -> Bool {
  29. //输入条件检查,这里示例,只检查字符长度
  30. let length = (self.nickTextField.text as NSString).length
  31. return length > 0 && length <= 8
  32. }

下面实现功能:根据输入的合法性,设置按钮的enabled属性,此步骤需要下载文件RAC语法支持文件,更详细介绍Swift支持ReactiveCocoa

  1. func configButtonEnable() {
  2. RAC(self.button, "enabled") < ~ RACSignal.combineLatest(
  3. [self.nickTextField.rac_textSignal()],
  4. reduce: { () -> AnyObject! in
  5. return self.checkInputValidate()
  6. })
  7. }

五、中文处理办法

有中文输入时,上面的字数检查不准确,如通过输入法输入**"我爱中国文化"**6个字符时self.nickTextField.text的字符个数为23个,提示信息不正确

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

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

UITextView/UITextFiled有一个markedTextRange属性,用于标识当前是否有选中的文本(有选中文本时即为上图中的未完成输入状态),利用此原理来解决中文等类似问题

  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. var chineseText: NSString!
  6. override func viewDidLoad() {
  7. super.viewDidLoad()
  8. self.nickTextField.delegate = self
  9. filterInput()
  10. configButtonEnable()
  11. }
  12. func filterInput() {
  13. self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void in
  14. if(self.nickTextField.markedTextRange != nil) {
  15. return;
  16. }
  17. //这里可以加入去除空格,标点等操作
  18. self.chineseText = text as NSString
  19. if (text == nil || text.length == 0) {
  20. self.checkResultShowImageView.hidden = false
  21. return
  22. }
  23. self.checkResultShowImageView.hidden = true
  24. var imageName = ""
  25. if (self.checkInputValidate()) {
  26. imageName = "ok.png"
  27. self.hintLabel.text = ""
  28. } else {
  29. imageName = "warning.png"
  30. self.hintLabel.text = "超出\(text.length - 8)个字符"
  31. }
  32. self.checkResultShowImageView.image = UIImage(named: imageName)
  33. }
  34. }
  35. func checkInputValidate() -> Bool {
  36. //输入条件检查,这里示例,只检查字符长度
  37. let length = chineseText.length
  38. return length > 0 && length < = 8
  39. }
  40. func configButtonEnable() {
  41. RAC(self.button, "enabled") < ~ RACSignal.combineLatest(
  42. [self.nickTextField.rac_textSignal()],
  43. reduce: { () -> AnyObject! in
  44. if(self.nickTextField.markedTextRange == nil) {
  45. return self.checkInputValidate()
  46. }
  47. return self.button.enabled
  48. })
  49. }
  50. @IBAction func buttonPressed(sender: AnyObject) {
  51. println("------>\(self.chineseText)")
  52. }

六、总结

输入是手机App中最耗时的操作,处理不当很容易失去用户,这里总结以下几点

不要将所有的约束信息直接展示给用户,只展示那些对大部分用户都有用的信息,对于其他约束在用户输入错误的时候再提示

尽量少用或者不用对话框及HUD的方式提示错误

提示信息准确,例如超出字符数,一种提示为:超出最大140字符;另一种为:超出n个字符,显然后者提示对用户更有价值

不要擅自更改用户输入内容或者粗暴禁止用户输入

上一篇:poj 1847( floyd && spfa )


下一篇:Linux内核分析(六)----字符设备控制方法实现|揭秘系统调用本质