Swift Social app text input optimization summary

I. Input-related Optimization issues

In most applications, there are input requirements, in the face of many users, their ideas are different, the input text content is also strange, in the face of different input, how can we optimize the input experience? Here is a summary of input-related issues, mainly as follows:
1. Input control Uitextfield Follow keyboard move
2. Filter input Content
3, response to the processing of programming, remove the bad experience of the dialog box, HUD Tips
4. Chinese input

Second, the input box with the keyboard to move

There are two methods of interface building, code or STORYBOARD/XIB, both of which are the same way of handling keyboard moves, and it is recommended to use a third-party framework that is already packaged: tpkeyboardavoiding

1, the Code processing method

Rootview is initially made using the Tpkeyboardavoidingscrollview in the tpkeyboardavoiding framework. For example, the login interface, Loginviewcontroller (inherited from Uiviewcontroller), is handled as follows:

TPKeyboardAvoidingScrollView(frame:self.view.bounds);//...//add all subviews to rootView//...self.view.addSubview(rootView)

The code-building interface, which implements the input box to move with the keyboard, requires that the class Tpkeyboardavoidingscrollview be treated as a root view.

2, Storyboard/xib treatment methods

Storyboard/xib is easier to handle, setting the Rootview of the view controller to Tpkeyboardavoidingscrollview

(1) Select the root view of the controller

(2) Setting the default instantiation class

General Basic settings 1, common basic settings

This includes opening the keyboard, turning off the keyboard, specifying the input type of the keyboard, specifying the type of return button, as in the following code

//打开键盘self.inputText.becomeFirstResponder()//关闭键盘self.inputText.resignFirstResponder()//指定键盘的输入类型self.inputText.keyboardType = UIKeyboardType.NumberPad//指定return按键的类型self.inputText.returnKeyType = UIReturnKeyType.Go

2. Filter input by proxy

With the Uitextfield/uitextview agent, more precise control of the input, such as: Filter the specified characters, more than the number of characters prohibit input, etc.

(1) The Uitextfield code is as follows:

//设置代理，可根据实际情况来设置代理，这里使用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) The Uitextview code is as follows:

/设置代理，可根据实际情况来设置代理，这里使用self来指定selfself//代理方法实现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 can detect user input in real-time by proxy method, which is convenient for input constraint, for example, when input more than 10 characters, prohibit user input, but this kind of experience is not good, it is recommended not to use

Iv. responding to programming processing, accurate information 1, how to optimize

The constraint of entering information is usually to prompt the rule directly to the user, for example: the input of the user nickname in Social:

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

After the user clicks the OK button, checks the legitimacy of the input and prompts the user for information in the form of a dialog box (or HUD)

The above treatments are very common and can meet basic needs. However, we are no longer using the above design for the following two points:

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

During the actual development process, the reduction prompt information is

请输入1-8个字符

The user actively input space, enter, punctuation these characters or beyond the length, only active prompt to the user information, such as, no input, OK button Disable, only tips very few information

Enter legal, OK button to enable

Input illegal, highlight error display, OK button disable

2. Code implementation

Using the third-party framework Reactivecocoa, the first implementation of the user input, the following prompt and the right picture (not using the three-party framework, can be implemented by proxy)

    @IBOutletWeak VarNicktextfield: Uitextfield!//Text input Box@IBOutletWeak VarCheckresultshowimageview: Uiimageview!//Picture on the right of the input box@IBOutletWeak Varbutton: UIButton!@IBOutletWeak VarHintlabel: UILabel!//text box below prompt text override func Viewdidload () {Super. Viewdidload ()//config Input configinput ()} func Configinput () {self.nickTextField.rac_textSignal (). Subscribenext {(t  EXT), 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 = "exceeds \ (text.length-8) Characters "} self.checkResultShowImageView.image = UIImage (Named:imagename)}} func CheckIn Putvalidate (), Bool {//Input Condition Check, here example, check only character length let length = (Self.nickTextField.text as nsstring). Length return length > 0 & ;& length <= 8}

The following implementation features: Based on the legitimacy of the input, set the button's Enabled property, this step needs to download the file RAC Grammar support file, more detailed introduction of Swift support Reactivecocoa

func configButtonEnable() {        RAC(self"enabled"RACSignal.combineLatest(            [self.nickTextField.rac_textSignal()],            reduce:AnyObjectin            returnself.checkInputValidate()        })    }

V. Chinese methods of processing

Chinese input, the above word count is not accurate, such as input through the input * * "I love Chinese culture" **6 characters when the number of Self.nickTextField.text characters is 23, the message is incorrect

Uitextview/uitextfiled has a Markedtextrange property that identifies whether there is currently a selected text (which is the incomplete input state in the selected text), and uses this principle to solve similar problems such as Chinese

    @IBOutletWeak VarNicktextfield: Uitextfield!@IBOutletWeak VarCheckresultshowimageview: Uiimageview!@IBOutletWeak Varbutton: UIButton!@IBOutletWeak VarHintlabel: UILabel! VarChinesetext: NSString! Override Func Viewdidload () {Super. Viewdidload () Self. nicktextfield.delegate = SelfFilterinput () configbuttonenable ()} func Filterinput () { Self. Nicktextfield.rac_textsignal (). Subscribenext {(text)Void inch            if( Self. nicktextfield.markedtextrange! =Nil) {return; }            //Here can be added to remove whitespace, punctuation and other operations Self.chinesetext = text as NSString if (text = = Nil | | text.length = = 0) { Self.checkResultShowImageView.hidden = False Return} Self.checkresultsho Wimageview.hidden = true var imageName = "" If (Self.checkinputvalidate ()) {Imagenam                E = "Ok.png" Self.hintLabel.text = ""} else {imageName = "warning.png" Self.hintLabel.text = "Out of \ (text.length-8) characters"} Self.checkResultShowImageView.image = Uiima GE (Named:imagename)}} func Checkinputvalidate (), Bool {//Input Condition Check, example here, check only character length let length = chinesetext.length return length > 0 && length <= 8} Func configbuttonenable () {RAC (Self.button, "enabled") <~ racsignal.combinelatest ([Self.nicktex Tfield.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)")}

Vi. Summary

The input is the most time-consuming operation in the mobile app, it is easy to lose the user with improper handling, the following points are summarized here

1.不要将所有的约束信息直接展示给用户，只展示那些对大部分用户都有用的信息，对于其他约束在用户输入错误的时候再提示2.尽量少用或者不用对话框及HUD的方式提示错误3.提示信息准确，例如超出字符数，一种提示为：超出最大140字符另一种为：超出n个字符，显然后者提示对用户更有价值4.不要擅自更改用户输入内容或者粗暴禁止用户输入

Swift Social app text input optimization summary