Swift social app text input optimization "hodgepodge"

1. Input-related optimization issues

In most applications, there is a need for input. Faced with many users, their ideas are different, and the text content they input is also strange. Faced with different inputs, how can we optimize the input experience? Here we summarize the input-related issues, mainly as follows:

 1、输入控件UITextField跟随键盘移动2、过滤输入内容3、响应编程的处理，去除体验不好的对话框、HUD提示4、中文输入

2. The input box moves with the keyboard

There are two ways to build the interface, code or storyboard/xib. These two methods are the same in handling keyboard movement. Here we recommend using a packaged third-party framework: TPKeyboardAvoiding

1. Code processing method

rootView uses TPKeyboardAvoidingScrollView in the TPKeyboardAvoiding framework to initialize. For example, the login interface, LoginViewController (inherited from UIViewController), the processing method is as follows:

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

The code constructs the interface and realizes that the input box moves with the keyboard. The class TPKeyboardAvoidingScrollView needs to be processed as the root view.

2. Storyboard/xib processing method

Storyboard/xib is easier to handle, just set the rootView of the view controller to TPKeyboardAvoidingScrollView

(1) Select the root view of the controller

(2) Setting the default instantiation class

#p#

3. Commonly used basic settings

1. Common basic settings

Including opening the keyboard, closing the keyboard, specifying the keyboard input type, and specifying the type of the return button, such as the following code

 //Open the keyboard  
 self.inputText.becomeFirstResponder()
 //Close the keyboard  
 self.inputText.resignFirstResponder()
 //Specify the keyboard input type  
 self.inputText.keyboardType = UIKeyboardType.NumberPad
 //Specify the type of the return button  
 self.inputText.returnKeyType = UIReturnKeyType.Go

2. Filter input through a proxy

Through the UITextField/UITextView proxy, you can control the input more accurately, for example: filter specified characters, prohibit input when the number of characters exceeds the limit, etc.

(1) The UITextField code is as follows:

 //Set the proxy. You can set the proxy according to the actual situation. Here, self is used to specify  
 self.textField.delegate = self 
 
 //Proxy method implementation  
 func textField(textField: UITextField, shouldChangeCharactersInRange
 range: NSRange, replacementString string: String) -> Bool
 { 
         //No spaces allowed  
         if (string == " " ) { 
             return   false  
 } 
 
         //Cancel the keyboard after pressing enter  
         if (string == "\n" ) {
            textField.resignFirstResponder() 
             return   false  
 } 
 
         return   true  
 }

(2) The UITextView code is as follows:

 /Set the proxy. You can set the proxy according to the actual situation. Here, self is used to specify
 self.textView.delegate = self 
 
 //Proxy method implementation  
 func textView(textView: UITextView, shouldChangeTextInRange range: NSRange,
 replacementText text: String) -> Bool
 { 
         //No spaces allowed  
         if (text == " " ) { 
             return   false  
 } 
 
         //Cancel the keyboard after pressing enter  
         if (text == "\n" ) {
            textView.resignFirstResponder() 
             return   false  
 } 
 
         return   true  
 }

UITextField/UITextView can detect the user input in real time through the proxy method, which is convenient for input constraints. For example, when the input exceeds 10 characters, the user is prohibited from inputting. However, this experience is not good and it is recommended not to use it.

#p#

4. Response programming processing, accurate prompt information

1. How to optimize

The constraints of input information are generally to directly prompt the rules to the user, for example: the input of user nicknames in social networking:

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

After the user clicks the OK button, the validity of the input is checked and the user is prompted with information in the form of a dialog box (or HUD)

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

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

In the actual development process, the prompt information is reduced to

请输入1-8个字符

When the user actively enters characters such as spaces, carriage returns, punctuation marks, or exceeds the length, the system will automatically prompt the user for information. As shown in the following figure, there is no input, the OK button is disabled, and only very little useful information is prompted.

The input is legal, the confirmation button is enabled

If the input is illegal, the error is highlighted and the OK button is disabled.

2. Code implementation

Using the third-party framework ReactiveCocoa, first implement the function of the prompt below and the picture on the right when the user inputs (do not use the third-party framework, you can implement it yourself through the proxy)

 @IBOutlet weak var nickTextField: UITextField! //text input box  
 @IBOutlet weak var checkResultShowImageView: UIImageView! //Image on the right side of the input box  
  @IBOutlet weak var button: UIButton!
 @IBOutlet weak var hintLabel: UILabel! //Hint text below the text box  
 
 override func viewDidLoad() { 
       super .viewDidLoad() 
       //Configure input  
 configInput()
 } 
 
 unc 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, here is an example, only check the character length  
      let length = (self.nickTextField.text as NSString).length 
       return length > 0 && length <= 8
 }

The following functions are implemented: According to the legality of the input, set the enabled property of the button. This step requires downloading the RAC syntax support file. More detailed introduction to Swift support for ReactiveCocoa

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

#p#

5. Chinese processing method

When Chinese characters are input, the above word count check is inaccurate. For example, when 6 characters of "I love Chinese culture" are input through the input method, the number of characters in self.nickTextField.text is 23, and the prompt information is incorrect.

UITextView/UITextFiled has a markedTextRange property, which is used to identify whether there is currently selected text (when there is selected text, it is the unfinished input state in the above figure). 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 ;
 } 
         //You can add operations such as removing spaces and punctuation here  
        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.checkResultShowImageView.image = UIImage(named: imageName) 
 
 }
 } 
 
 func checkInputValidate() -> Bool { 
     //Input condition check, here is an 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. Conclusion

Input is the most time-consuming operation in mobile apps. If it is not handled properly, it is easy to lose users. Here are some points to summarize:

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