Swift社交应用文本输入优化”大杂烩“

移动开发 iOS
在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?这里集中汇总输入相关问题。

一、输入相关的优化问题

在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?这里集中汇总输入相关问题,主要如下:

1、输入控件UITextField跟随键盘移动
2、过滤输入内容
3、响应编程的处理,去除体验不好的对话框、HUD提示
4、中文输入
  • 1.
  • 2.
  • 3.
  • 4.

二、输入框随键盘移动

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

1、代码处理方法

rootView使用TPKeyboardAvoiding框架中的TPKeyboardAvoidingScrollView来初使化。例如,登录界面,LoginViewController(继承自UIViewController),处理方法如下:

let rootView = TPKeyboardAvoidingScrollView(frame: self.view.bounds);  
//...  
//add all subviews to rootView  
//...  
self.view.addSubview(rootView)  
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

代码构建界面,实现输入框随键盘移动,需要将类TPKeyboardAvoidingScrollView做为根视图来处理。

2、storyboard/xib处理办法

storyboard/xib处理起来更简单,将视图控制器的rootView设置为TPKeyboardAvoidingScrollView即可

(1)选择控制器的根视图

 

 

(2)设置默认实例化类

 

#p#

三、常用基本设置

1、常用基本设置

包括打开键盘、关闭键盘、指定键盘的输入类型、指定return按钮的类型,如以下代码

//打开键盘  
self.inputText.becomeFirstResponder()  
//关闭键盘  
self.inputText.resignFirstResponder()  
//指定键盘的输入类型  
self.inputText.keyboardType = UIKeyboardType.NumberPad  
//指定return按键的类型  
self.inputText.returnKeyType = UIReturnKeyType.Go  
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

2、通过代理过滤输入

通过UITextField/UITextView的代理,可以更精确的控制输入,例如:过滤指定字符、超过字符数禁止输入等

(1)UITextField代码如下:

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

(2)UITextView代码如下:

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

UITextField/UITextView可以通过代理方法实时检测用户输入的内容,方便对输入约束,例如,在输入超过10个字符时,禁止用户输入,不过这种体验不好,建议不要使用

#p#

四、响应编程处理,精确提示信息

1、如何优化

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

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

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

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

1.提示信息过多,大部分用户不会看
2.对话框及HUD提示比较突兀,容易使用户产生挫败感
  • 1.
  • 2.

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

请输入1-8个字符
  • 1.

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

 

输入合法,确定按钮enable

 

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

 

 

2、代码实现

使用第三方框架ReactiveCocoa,首先实现在用户输入时,下方提示及右侧图片的功能(不使用三方框架,可自己通过代理实现)

  @IBOutlet weak var nickTextField: UITextField!//文本输入框  
  @IBOutlet weak var checkResultShowImageView: UIImageView!//输入框右侧图片  
  @IBOutlet weak var button: UIButton!  
  @IBOutlet weak var hintLabel: UILabel!//文本框下方提示文字  
 
override func viewDidLoad() {  
      super.viewDidLoad()  
      //配置输入  
      configInput()  
  }  
 
unc configInput() {  
      self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void in 
          if (text == nil || text.length == 0) {  
              self.checkResultShowImageView.hidden = false 
              return 
          }  
 
          self.checkResultShowImageView.hidden = true 
          var imageName = "" 
          if (self.checkInputValidate()) {  
              imageName = "ok.png" 
              self.hintLabel.text = "" 
          } else {  
              imageName = "warning.png" 
              self.hintLabel.text = "超出\(text.length - 8)个字符" 
          }  
          self.checkResultShowImageView.image = UIImage(named: imageName)  
 
      }  
  }  
 
  func checkInputValidate() -> Bool {  
      //输入条件检查,这里示例,只检查字符长度  
      let length = (self.nickTextField.text as NSString).length  
      return length > 0 && length <= 8  
  }  
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.

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

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

#p#

五、中文处理办法

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

 

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

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

六、总结

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

1.不要将所有的约束信息直接展示给用户,只展示那些对大部分用户都有用的信息,对于其他约束
在用户输入错误的时候再提示
2.尽量少用或者不用对话框及HUD的方式提示错误
3.提示信息准确,例如超出字符数,一种提示为:超出***140字符
另一种为:超出n个字符,显然后者提示对用户更有价值
4.不要擅自更改用户输入内容或者粗暴禁止用户输入
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
责任编辑:林师授 来源: 一叶博客
相关推荐

2015-03-27 09:58:51

SwiftcodeSwift开发

2015-03-19 09:51:37

Swift输入文本

2010-02-24 14:38:06

Python应用语言

2010-02-23 17:13:39

Python版本

2010-02-05 18:25:26

Android 版本

2013-01-06 14:53:59

2010-05-04 12:26:44

联想杨元庆

2012-12-25 11:44:10

移动社交应用微博LBS

2021-02-06 09:21:17

MySQL索引面试

2021-01-31 23:54:23

数仓模型

2013-11-08 09:19:12

OpenStack产品开源云管理CloudForms

2010-07-19 10:16:24

ibmdwWeb2.0

2013-01-14 11:35:59

IBMdW

2012-10-23 13:51:21

大品牌公司只做表面工作

2020-12-23 11:45:27

鸿蒙HarmonyOSTextField组件

2011-09-19 16:14:33

Glmps社交应用

2021-02-23 10:42:45

AI

2013-11-05 10:15:35

AdMaster大数据

2011-09-19 10:56:21

IOS应用Frenzapp Mu音乐

2024-06-28 08:49:24

点赞
收藏

51CTO技术栈公众号