Swift social application text input optimization summary, swift social text Summary

Swift social application text input optimization summary, swift social text Summary
I. Input-Related Optimization Problems

In most applications, there is a need for input. In the face of a large number of users, their ideas vary, and the input text content is strange. In the face of different input, how should we optimize the input experience? Here we will summarize the Input-related questions, mainly as follows:
1. The input control UITextField follows the keyboard
2. filter input content
3. Respond to the processing of programming and remove the dialog box and HUD prompts with poor experience
4. Chinese Input

2. Move the input box with the keyboard

There are two methods to build the interface: code or storyboard/xib. These two methods are the same on keyboard movement. We recommend using the encapsulated third-party framework: TPKeyboardAvoiding.

1. Code Handling Method

Use rootViewTPKeyboardAvoidingIn the Framework, the TPKeyboardAvoidingScrollView is implemented. For example, on the logon interface, LoginViewController (inherited from UIViewController) is handled as follows:

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

The Code build interface enables the input box to move with the keyboard.TPKeyboardAvoidingScrollViewAs the Root View.

2. storyboard/xib Solution

Storyboard/xib is easier to process. Set the rootView of the View Controller to TPKeyboardAvoidingScrollView.

(1) Select the Root View of the controller.

(2) set the default instantiation class

3. Common basic settings 1. Common basic settings

This includes opening or disabling the keyboard, specifying the input type of the keyboard, and specifying the return button type, as shown in the following code:

// Open the keyboard self. inputText. becomeFirstResponder () // close the keyboard self. inputText. resignFirstResponder () // specifies the input type of the keyboard self. inputText. keyboardType = UIKeyboardType. numberPad // specify the type of the return button self. inputText. returnKeyType = UIReturnKeyType. go

2. filter input by proxy

You can use the UITextField/UITextView proxy to control input more accurately, for example, filter specified characters and prohibit input when the number of characters exceeds

(1) The UITextField code is as follows:

// Sets the proxy. You can set the proxy according to the actual situation. Here, use self to specify self. textField. delegate = self // implement the func textField (textField: UITextField, shouldChangeCharactersInRange range: nsange, replacementString string: String) using the proxy method) -> Bool {// do not enter spaces if (string = "") {return false} // press enter to cancel the keyboard if (string = "\ n ") {textField. resignFirstResponder () return false} return true}

(2) The UITextView code is as follows:

/Set proxy. You can set proxy according to the actual situation. Here, self is used to specify self. textView. delegate = self // implement func textView using the proxy method (textView: UITextView, shouldChangeTextInRange range: nsange, replacementText: String) -> Bool {// do not enter spaces if (text = "") {return false} // press enter to cancel the keyboard if (text = "\ n ") {textView. resignFirstResponder () return false} return true}

UITextField/UITextView can detect user input content in real time through the proxy method to facilitate input constraints. For example, if the input exceeds 10 characters, user input is forbidden. However, this experience is poor, do not use

4. Respond to programming and provide accurate information 1. How to optimize

The constraint for entering information is generally to direct the rule to the user, for example, the input of user nickname in social media:

Enter 1-8 characters as the nickname, not including spaces, carriage return, and punctuation.

User clickOKAfter the button, check the validity of the input, and prompt the user information in the form of a dialog box (or HUD ).

The above processing method is very common and can meet basic requirements. However, we no longer use the above design because of the following two reasons:

1. There are too many prompts, and most users will not read them. 2. The dialog box and HUD prompts are abrupt, which may cause user frustration.

In the actual development process, the message is as follows:

Enter 1-8 characters

When a user actively enters space, press enter, punctuation, or exceeds the length, the user will be notified of the information. For example, if no input is specified, the confirm button disable will only prompt very little useful information.

Enter valid. Click enable.

Invalid input. Highlighted or incorrect display. Click "disable ".

2. Code Implementation

The third-party framework ReactiveCocoa is used to first implement the prompt below and the picture on the right when the user inputs (the third-party framework is not used and can be implemented by proxy by itself)

@ IBOutlet weak var nickTextField: UITextField! // Text input box @ IBOutlet weak var checkResultShowImageView: UIImageView! // The image @ IBOutlet weak var button on the right of the input box: UIButton! @ IBOutlet weak var hintLabel: UILabel! // The text box prompts override func viewDidLoad () {super. viewDidLoad () // configure the input configInput ()} func 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 = "exceeds \ (text. length-8) characters "} self. checkResultShowImageView. image = UIImage (named: imageName)} func checkInputValidate ()-> Bool {// input condition check. For example, only check the character length let length = (self. nickTextField. text as NSString ). length return length> 0 & length <= 8}

The following functions are implemented: Set the enabled attribute of the button Based on the validity of the input. In this step, you need to download the file RAC syntax support file. For more information, refer to Swift's support for ReactiveCocoa.

func configButtonEnable() {        RAC(self.button, "enabled") <~ RACSignal.combineLatest(            [self.nickTextField.rac_textSignal()],            reduce: { () -> AnyObject! in            return self.checkInputValidate()        })    }

V. Solutions to Chinese Characters

When there is a Chinese input, the above word count check is not accurate, for example, input ** "I love Chinese culture" ** 6 Characters in the input method self. nickTextField. the number of characters in text is 23, and the prompt message is incorrect.

UITextView/UITextFiled has a markedTextRange attribute used to identify whether the selected text exists (when selected text exists, it is in the unfinished input state). This principle is used to solve similar problems such as Chinese.

@ 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;} // here you can add spaces, punctuation, and other operations such as 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 = "exceeds \ (text. length-8) characters "} self. ch EckResultShowImageView. image = UIImage (named: imageName)} func checkInputValidate ()-> Bool {// input condition check. For example, only check the character length 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 )")}

Vi. Summary

The input is the most time-consuming operation in the mobile App and is easy to lose users due to improper handling. The following points are summarized:

1. do not directly display all constraints to users. Only the information useful to most users is displayed. If other constraints are entered incorrectly, the system returns a Message 2. try to use less or do not use the dialog box or the HUD method to prompt error 3. the prompt information is accurate. For example, if the number of characters is exceeded, one prompt is: the maximum number of 140 characters is exceeded, and the other is: More than n characters. Obviously, the latter prompt is more valuable to users. do not modify user input content without authorization or prohibit user input.