当前位置: 首页 > 科技观察

Swift社交应用中最全的文本输入优化总结

时间:2023-03-17 21:50:16 科技观察

1.输入相关的优化问题在大多数应用中,都有一个输入需求。面对众多用户,想法各异,输入的文字内容也千奇百怪。面对不同的输入,如何优化输入体验?本文将总结Swift社交应用的文本输入优化技巧。这里总结一下输入相关的问题,主要有:输入控件UITextField跟随键盘移动过滤输入内容响应编程,去掉体验不好的对话框,HUD提示中文输入。code或者storyboard/xib,这两种方式处理键盘移动的方法是一样的。这里推荐使用封装好的第三方框架:TPKeyboardAvoiding1。代码处理方法rootView使用**TPKeyboardAvoding**框架中的TPKeyboardAvoidingScrollView进行初始化。比如登录界面,LoginViewController(继承自UIViewController),处理方式如下:letrootView=TPKeyboardAvoidingScrollView(frame:self.view.bounds);//...//addallsubviewstorootView//...self.view.addSubview(rootView)代码构建界面,实现输入框随键盘移动,类**TPKeyboardAvoidingScrollView**需要作为根视图处理。2.Storyboard/xib的处理方法storyboard/xib比较好办,只需将viewcontroller的rootView设置为TPKeyboardAvoidingScrollView即可(1)选择controller的rootview(2)设置默认实例化类3.常用的基本设置1.常用的基本设置有打开键盘,关闭键盘,指定键盘的输入类型,指定返回键的类型,比如下面的代码//打开键盘self.inputText.becomeFirstResponder()//关闭键盘self.inputText.resignFirstResponder()//指定键盘的输入类型self.inputText.keyboardType=UIKeyboardType.NumberPad//指定返回键的类型self.inputText.returnKeyType=UIReturnKeyType.Go2,通过过滤输入theproxy通过UITextField/UITextView的代理,可以更精确的控制输入,例如:过滤指定字符,超过字符数禁止输入等。(1)UITextField代码is如下://设置代理,可以根据实际情况设置代理,这里使用self指定self.textField.delegate=self//代理方法实现functextField(textField:UITextField,shouldChangeCharactersInRangerange:NSRange,replacementStringstring:String)->Bool{//禁止输入空格if(string==""){returnfalse}//回车后取消键盘if(string=="\n"){textField.resignFirstResponder()returnfalse}returntrue}UITextView代码如下://设置代理,可以根据实际情况设置代理,这里使用self指定self.textView.delegate=self//代理方法实现functextView(textView:UITextView,shouldChangeTextInRangerange:NSRange,replacementTexttext:String)->Bool{//禁止输入空格if(text==""){returnfalse}//回车后取消键盘if(text="\n"){textView.resignFirstResponder()returnfalse}returntrue}UITextField/UITextView可以通过代理方式实时检测用户输入的内容,方便输入约束。比如输入超过10个字符时,禁止用户输入,但是这种体验不好,建议不要使用。处理、准确提示信息1.如何优化输入信息的约束条件。一般直接向用户提示规则。例如:社交网络用户昵称的输入:昵称请输入1-8个字符,不能包含空格、回车、标点符号用户点击**确定**按钮后,检查输入的合法性,并以对话框(或HUD)的形式提示用户对以上信息进行处理,很常见,可以满足基本需求但是我们不再使用上面的设计,原因有二:提示太多,大部分用户不会看对话框,HUD提示太突兀,容易让用户产生挫败感。在实际开发过程中,应该减少提示信息为请输入1-8个字符。当用户主动输入空格、回车或标点符号,或超出长度时,会提示用户输入信息,如下图所示。如果没有输入,OK按钮被禁用,只提示一些有用的信息。输入是合法的。,确认按钮enable输入不合法,高亮错误显示,确认按钮disable2,代码实现使用第三方框架ReactiveCocoa,首先实现用户输入时下方提示和右图的功能(不使用第三方框架,可以自己通过代理实现)@IBOutletweakvarnickTextField:UITextField!//文本输入框@IBOutletweakvarcheckResultShowImageView:UIImageView!//输入框右侧的图片@IBOutletweakvarbutton:UIButton!@IBOutletweakvarhintLabel:UILabel!//文本框下面的提示文字Voidinif(text==nil||text.length==0){self.checkResultShowImageView.hidden=falsereturn}self.checkResultShowImageView.hidden=truevariimageName=""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)}}funccheckInputValidate()->Bool{//输入条件检查,这里举例,只检查字符长度letlength=(self.nickTextField.textasNSString).lengthreturnlength>0&&length<=8}实现了以下功能:根据输入的合法性,设置按钮的enabled属性。这一步需要下载文件RAC语法支持文件。更详细地说,Swift支持ReactiveCocoafuncconfigButtonEnable(){RAC(self.button,"enabled")<~RACSignal.combineLatest([self.nickTextField.rac_textSignal()],reduce:{()->AnyObject!inreturnsself.checkInputValidate()})}5.中文处理方法当有中文输入时,上面的字数检查不准确,比如通过输入法输入**“我爱中国文化”时有6个字,self的字数.nickTextField.text为23,提示信息不正确。UITextView/UITextFiled有一个markedTextRange属性,用来识别当前是否有选中的文本(当有选中的文本时就是上图中未完成的输入状态),利用这个原理解决了中文@IBOutletweakvarnickTextField中类似的问题:UITextField!@IBOutletweakvarcheckResultShowImageView:UIImageView!@IBOutletweakvarbutton:UIButton!@IBOutletweakvarhintLabel:UILabel!varchineseText:NSString!overridefuncviewDidLoad(){super.viewDidLoad()self.nickTextField.delegate=selffilterInput()configButtonEnable()}funcfilterInput(){self.nickTextField.rac_textSignal().subscribeNext{(text)->Voidinif(self.nickTextField.markedTextRange!=nil){return;}//这里可以添加空格、标点符号等操作self.chineseText=textasNSStringif(text==nil||text.length==0){self.checkResultShowImageView.hidden=falsereturn}self.checkResultShowImageView.hidden=truevariimageName=""if(self.checkInputValidate()){imageName="ok.png"self.hintLabel.text=""}else{imageName="warning.png"self.hintLabel.text="exceeds\(text.length-8)characters"}self.checkResultShowImageView.image=UIImage(named:imageName)}}funccheckInputValidate()->bool{//输入条件检查,这里举例,只检查字符长度letlength=chineseText.lengthreturnlength>0&&length<=8}funcconfigButtonEnable(){RAC(self.button,"enabled")<~RACSignal.combineLatest([self.nickTextField.rac_textSignal()],reduce:{()->AnyObject!inif(self.nickTextField.markedTextRange==nil){返回self.checkInputValidate()}返回self.button.enabled})}@IBActionfuncbuttonPressed(sender:AnyObject){println("------>\(self.chineseText)")}6.小结输入是移动应用中最耗时的操作,不输入很容易流失用户妥善处理。这里有以下几点不要直接向用户展示所有的约束信息,只展示对大多数用户有用的信息。对于其他约束,当用户出错时,应提示用户尽量少用或不用对话框和HUD来提示错误信息准确无误,比如超出字符数,一种提示是:exceed***140characters;另一种是:超过n个字符,显然后一种提示对用户更有价值,不要擅自改变用户输入内容或粗暴禁止用户输入