1、Swift社交应用文本输入优化汇总Swift社交应用文本输入优化汇总一、输入相关的优化问题在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?本文将汇总一下Swift社交应用文本输入优化技巧。这里集中汇总输入相关问题,主要如下:输入控件UITextField跟随键盘移动过滤输入内容响应编程的处理,去除体验不好的对话框、HUD提示中文输入二、输入框随键盘移动界面构建有两种方法,代码或者storyboard/xib,这两种方法在处理键盘移动上方法相同,这里推荐使用已经封装好的第三方框架:TPKeyboardAvoidin
2、g1、代码处理方法rootView使用*TPKeyboardAvoiding*框架中的TPKeyboardAvoidingScrollView来初使化。例如,登录界面,LoginViewController(继承自UIViewController),处理方法如下:1. letrootView=TPKeyboardAvoidingScrollView(frame:self.view.bounds);2. /.3. /addallsubviewstorootView4. /.5. self.view.addSubview(rootView)代码构建界面,实现输入框随键盘移动,需要将类*TPKeyb
3、oardAvoidingScrollView*做为根视图来处理。2、storyboard/xib处理办法 storyboard/xib处理起来更简单,将视图控制器的rootView设置为TPKeyboardAvoidingScrollView即可(1)选择控制器的根视图(2)设置默认实例化类三、常用基本设置1、常用基本设置包括打开键盘、关闭键盘、指定键盘的输入类型、指定return按钮的类型,如以下代码1. /打开键盘2. self.inputText.becomeFirstResponder()3. /关闭键盘4. self.inputText.resignFirstResponder()5
4、. /指定键盘的输入类型6. self.inputText.keyboardType=UIKeyboardType.NumberPad7. /指定return按键的类型8. self.inputText.returnKeyType=UIReturnKeyType.Go2、通过代理过滤输入通过UITextField/UITextView的代理,可以更精确的控制输入,例如:过滤指定字符、超过字符数禁止输入等(1)UITextField代码如下:1. /设置代理,可根据实际情况来设置代理,这里使用self来指定2. self.textField.delegate=self3. 4. /代理方法实现5
5、. functextField(textField:UITextField,shouldChangeCharactersInRange6. range:NSRange,replacementStringstring:String)-Bool7. 8. /禁止输入空格9. if(string=)10. returnfalse11. 12. 13. /按下回车后取消键盘14. if(string=n)15. textField.resignFirstResponder()16. returnfalse17. 18. 19. returntrue20. (2)UITextView代码如下:1. se
6、lf.textView.delegate=self2. 3. /代理方法实现4. functextView(textView:UITextView,shouldChangeTextInRangerange:NSRange,5. replacementTexttext:String)-Bool6. 7. /禁止输入空格8. if(text=)9. returnfalse10. 11. 12. /按下回车后取消键盘13. if(text=n)14. textView.resignFirstResponder()15. returnfalse16. 17. 18. returntrue19. UIT
7、extField/UITextView可以通过代理方法实时检测用户输入的内容,方便对输入约束,例如,在输入超过10个字符时,禁止用户输入,不过这种体验不好,建议不要使用四、响应编程处理,精确提示信息1、如何优化输入信息的约束一般是将规则直接提示给用户,例如:社交中用户昵称的输入:请输入1-8位的字符作为昵称,不能包括空格、回车、标点用户点击*确定*按钮之后,检查输入的合法性,并通过对话框(或HUD)的形式,提示给用户信息上面的处理方式,十分常见,能满足基本需求。不过我们已经不再采用上面的设计,原因有以下两点:提示信息过多,大部分用户不会看对话框及HUD提示比较突兀,容易使用户产生挫败感在实际开
8、发过程中,精减提示信息为1. 请输入1-8个字符用户主动输入空格、回车、标点这些字符或者超出长度时,才主动提示给用户信息,如下图,无输入,确定按钮disable,只提示极少有用信息输入合法,确定按钮enable输入不合法,高亮错误显示,确定按钮disable2、代码实现使用第三方框架ReactiveCocoa,首先实现在用户输入时,下方提示及右侧图片的功能(不使用三方框架,可自己通过代理实现)1. IBOutletweakvarnickTextField:UITextField!/文本输入框2. IBOutletweakvarcheckResultShowImageView:UIImageVi
9、ew!/输入框右侧图片3. IBOutletweakvarbutton:UIButton!4. IBOutletweakvarhintLabel:UILabel!/文本框下方提示文字5. 6. overridefuncviewDidLoad()7. super.viewDidLoad()8. /配置输入9. configInput()10. 11. 12. funcconfigInput()13. self.nickTextField.rac_textSignal().subscribeNext(text)-Voidin14. if(text=nil|text.length=0)15. sel
10、f.checkResultShowImageView.hidden=false16. return17. 18. 19. self.checkResultShowImageView.hidden=true20. varimageName=21. if(self.checkInputValidate()22. imageName=ok.png23. self.hintLabel.text=24. else25. imageName=warning.png26. self.hintLabel.text=超出(text.length-8)个字符27. 28. self.checkResultShow
11、ImageView.image=UIImage(named:imageName)29. 30. 31. 32. 33. funccheckInputValidate()-Bool34. /输入条件检查,这里示例,只检查字符长度35. letlength=(self.nickTextField.textasNSString).length36. returnlength0&length=837. 下面实现功能:根据输入的合法性,设置按钮的enabled属性,此步骤需要下载文件RAC语法支持文件,更详细介绍Swift支持ReactiveCocoa1. funcconfigButtonEnable(
12、)2. RAC(self.button,enabled)AnyObject!in5. 6. returnself.checkInputValidate()7. 8. )9. 五、中文处理办法有中文输入时,上面的字数检查不准确,如通过输入法输入*我爱中国文化*6个字符时self.nickTextField.text的字符个数为23个,提示信息不正确UITextView/UITextFiled有一个markedTextRange属性,用于标识当前是否有选中的文本(有选中文本时即为上图中的未完成输入状态),利用此原理来解决中文等类似问题1. IBOutletweakvarnickTextField:
13、UITextField!2. IBOutletweakvarcheckResultShowImageView:UIImageView!3. IBOutletweakvarbutton:UIButton!4. IBOutletweakvarhintLabel:UILabel!5. 6. varchineseText:NSString!7. 8. overridefuncviewDidLoad()9. super.viewDidLoad()10. self.nickTextField.delegate=self11. filterInput()12. configButtonEnable()13.
14、 14. 15. 16. 17. funcfilterInput()18. self.nickTextField.rac_textSignal().subscribeNext(text)-Voidin19. if(self.nickTextField.markedTextRange!=nil)20. return;21. 22. /这里可以加入去除空格,标点等操作23. self.chineseText=textasNSString24. 25. if(text=nil|text.length=0)26. self.checkResultShowImageView.hidden=false27
15、. return28. 29. 30. self.checkResultShowImageView.hidden=true31. varimageName=32. if(self.checkInputValidate()33. imageName=ok.png34. self.hintLabel.text=35. else36. imageName=warning.png37. self.hintLabel.text=超出(text.length-8)个字符38. 39. self.checkResultShowImageView.image=UIImage(named:imageName)4
16、0. 41. 42. 43. 44. funccheckInputValidate()-Bool45. /输入条件检查,这里示例,只检查字符长度46. letlength=chineseText.length47. returnlength0&length=848. 49. 50. funcconfigButtonEnable()51. RAC(self.button,enabled)AnyObject!in54. 55. if(self.nickTextField.markedTextRange=nil)56. returnself.checkInputValidate()57. 58. r
17、eturnself.button.enabled59. 60. )61. 62. 63. 64. IBActionfuncbuttonPressed(sender:AnyObject)65. println(-(self.chineseText)66. 六、总结输入是手机App中最耗时的操作,处理不当很容易失去用户,这里总结以下几点不要将所有的约束信息直接展示给用户,只展示那些对大部分用户都有用的信息,对于其他约束在用户输入错误的时候再提示尽量少用或者不用对话框及HUD的方式提示错误提示信息准确,例如超出字符数,一种提示为:超出最大140字符;另一种为:超出n个字符,显然后者提示对用户更有价值不要擅自更改用户输入内容或者粗暴禁止用户输入
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1