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

一、输入相关的优化问题

在大部分应用中,都有输入的需求,面对众多用户,他们的想法各异,输入的文本内容也是千奇百怪,面对不同的输入,我们该如何优化输入体验?这里集中汇总输入相关问题,主要如下: 1、输入控件UITextField跟随键盘移动 2、过滤输入内容 3、响应编程的处理,去除体验不好的对话框、HUD提示 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)

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

2、storyboard/xib处理办法

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

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

(2)设置默认实例化类

三、常用基本设置1、常用基本设置

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

//打开键盘self.inputText.becomeFirstResponder()//关闭键盘self.inputText.resignFirstResponder()//指定键盘的输入类型self.inputText.keyboardType = UIKeyboardType.NumberPad//指定return按键的类型self.inputText.returnKeyType = UIReturnKeyType.Go2、通过代理过滤输入

通过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}

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

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

四、响应编程处理,精确提示信息1、如何优化

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

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

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

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

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

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

请输入1-8个字符

用户主动输入空格、回车、标点这些字符或者超出长度时,才主动提示给用户信息,如下图,无输入,确定按钮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()} func configInput() {self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void inif (text == nil || text.length == 0) {self.checkResultShowImageView.hidden = falsereturn}self.checkResultShowImageView.hidden = truevar 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).lengthreturn length > 0 && length <= 8}三人一条心,黄土变成金。

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

相关文章:

你感兴趣的文章:

标签云: