Swift Social app text input optimization summary

Source: Internet
Author: User

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:


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:


During the actual development process, the reduction prompt information is


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


Swift Social app text input optimization summary

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.