博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
最全的Swift社交应用文本输入优化汇总
阅读量:5014 次
发布时间:2019-06-12

本文共 5431 字,大约阅读时间需要 18 分钟。

在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?本文将汇总一下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)选择控制器的根视图

(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.     } 

UITextView代码如下:

  1. //设置代理,可根据实际情况来设置代理,这里使用self来指定 
  2. self.textView.delegate = self 
  3.   
  4. //代理方法实现 
  5. func textView(textView: UITextView, shouldChangeTextInRange range: NSRange,  
  6. replacementText text: String) -> Bool 
  7.     { 
  8.         //禁止输入空格 
  9.         if (text == " ") { 
  10.             return false 
  11.         } 
  12.   
  13.         //按下回车后取消键盘 
  14.         if (text == "\n") { 
  15.             textView.resignFirstResponder() 
  16.             return false 
  17.         } 
  18.   
  19.         return true 
  20.     } 

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 <= 
  37.     } 

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

  1. func configButtonEnable() { 
  2.         RAC(self.button, "enabled") < ~ RACSignal.combineLatest( 
  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 < = 
  48.     } 
  49.   
  50.     func configButtonEnable() { 
  51.         RAC(self.button, "enabled") < ~ RACSignal.combineLatest( 
  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个字符,显然后者提示对用户更有价值

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

转载于:https://www.cnblogs.com/Free-Thinker/p/4834826.html

你可能感兴趣的文章
JAVA项目将 Oracle 转 MySQL 数据库转换(Hibernate 持久层)
查看>>
三层架构(我的理解及详细分析)
查看>>
Django模板语言相关内容
查看>>
前端开发工程师如何在2013年里提升自己【转】--2016已更新升级很多何去何从?...
查看>>
markdown语法测试集合
查看>>
running and coding
查看>>
实现QQ第三方登录、网站接入
查看>>
HTML CSS 层叠样式表 三
查看>>
Qt pro pri 文件学习1
查看>>
软件工程概论第六周学习进度条
查看>>
[思路]导入导出功能
查看>>
【iOS】UICollectionView自己定义Layout之蜂窝布局
查看>>
golang——(strings包)常用字符串操作函数
查看>>
发布aar到jcenter
查看>>
跨浏览器问题的五种解决方案
查看>>
XPath定位时,使用文本的方法小技巧。
查看>>
安装pandas报错(AttributeError: 'module' object has no attribute 'main')
查看>>
ch02 fundamental definition 01
查看>>
JSON解析
查看>>
Position is everything?(css定位学习的一些心得)(一)
查看>>