Swift社交应用文本输入优化汇总.docx
《Swift社交应用文本输入优化汇总.docx》由会员分享，可在线阅读，更多相关《Swift社交应用文本输入优化汇总.docx（13页珍藏版）》请在冰豆网上搜索。
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 && length <= 8
37. }
下面实现功能：
根据输入的合法性，设置按钮的enabled属性，此步骤需要下载文件RAC语法支持文件,更详细介绍Swift支持ReactiveCocoa
1.func configButtonEnable（） {
2. RAC（self.button, "enabled"） < ~ RACSbineLatest（
3. [self.nickTextField.rac_textSignal（）],
4. reduce:
{ （） -> AnyObject!
in
5.
6. return self.checkInputValidate（）
7.
8. }）
9. }
五、中文处理办法
有中文输入时，上面的字数检查不准确，如通过输入法输入**"我爱中国文化"**6个字符时self.nickTextField.text的字符个数为23个，提示信息不正确
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.
6. var chineseText:
NSString!
7.
8. override func viewDidLoad（） {
9. super.viewDidLoad（）
10. self.nickTextField.delegate = self
11. filterInput（）
12. configButtonEnable（）
13.
14.
15. }
16.
17. func filterInput（） {
18. self.nickTextField.rac_textSignal（）.subscribeNext { （text） -> Void in
19. if（self.nickTextField.markedTextRange !
= nil） {
20. return;
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.image = UIImage（named:
imageName）
40.
41. }
42. }
43.
44. func checkInputValidate（） -> Bool {
45. //输入条件检查，这里示例，只检查字符长度
46. let length = chineseText.length
47. return length > 0 && length < = 8
48. }
49.
50. func configButtonEnable（） {
51. RAC（self.button, "enabled"） < ~ RACSbineLatest（
52. [self.nickTextField.rac_textSignal（）],
53. reduce:
{ （） -> AnyObject!
in
54.
55. if（self.nickTextField.markedTextRange == nil） {
56. return self.checkInputValidate（）
57. }
58. return self.button.enabled
59.
60. }）
61. }
62.
63.
64. @IBAction func buttonPressed（sender:
AnyObject） {
65. println（"------>\（self.chineseText）"）
66. }
六、总结
输入是手机App中最耗时的操作，处理不当很容易失去用户，这里总结以下几点
不要将所有的约束信息直接展示给用户，只展示那些对大部分用户都有用的信息，对于其他约束在用户输入错误的时候再提示
尽量少用或者不用对话框及HUD的方式提示错误
提示信息准确，例如超出字符数，一种提示为：
超出最大140字符;另一种为：
超出n个字符，显然后者提示对用户更有价值
不要擅自更改用户输入内容或者粗暴禁止用户输入
升级会员 