自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Swift社交應(yīng)用文本輸入優(yōu)化”大雜燴“

作者：一葉
移動開發(fā) iOS
在大部分應(yīng)用中，都有輸入的需求，面對眾多用戶，他們的想法各異，輸入的文本內(nèi)容也是千奇百怪，面對不同的輸入，我們該如何優(yōu)化輸入體驗？這里集中匯總輸入相關(guān)問題。

一、輸入相關(guān)的優(yōu)化問題

在大部分應(yīng)用中，都有輸入的需求，面對眾多用戶，他們的想法各異，輸入的文本內(nèi)容也是千奇百怪，面對不同的輸入，我們該如何優(yōu)化輸入體驗？這里集中匯總輸入相關(guān)問題，主要如下：

1、輸入控件UITextField跟隨鍵盤移動
2、過濾輸入內(nèi)容
3、響應(yīng)編程的處理，去除體驗不好的對話框、HUD提示
4、中文輸入

二、輸入框隨鍵盤移動

界面構(gòu)建有兩種方法，代碼或者storyboard/xib，這兩種方法在處理鍵盤移動上方法相同，這里推薦使用已經(jīng)封裝好的第三方框架：TPKeyboardAvoiding

1、代碼處理方法

rootView使用TPKeyboardAvoiding框架中的TPKeyboardAvoidingScrollView來初使化。例如，登錄界面，LoginViewController(繼承自UIViewController),處理方法如下：

  1. let rootView = TPKeyboardAvoidingScrollView(frame: self.view.bounds);  
  2. //...  
  3. //add all subviews to rootView  
  4. //...  
  5. self.view.addSubview(rootView)  

代碼構(gòu)建界面，實現(xiàn)輸入框隨鍵盤移動，需要將類TPKeyboardAvoidingScrollView做為根視圖來處理。

2、storyboard/xib處理辦法

storyboard/xib處理起來更簡單，將視圖控制器的rootView設(shè)置為TPKeyboardAvoidingScrollView即可

(1)選擇控制器的根視圖

 

 

(2)設(shè)置默認(rèn)實例化類

 

#p#

三、常用基本設(shè)置

1、常用基本設(shè)置

包括打開鍵盤、關(guān)閉鍵盤、指定鍵盤的輸入類型、指定return按鈕的類型，如以下代碼

  1. //打開鍵盤  
  2. self.inputText.becomeFirstResponder()  
  3. //關(guān)閉鍵盤  
  4. self.inputText.resignFirstResponder()  
  5. //指定鍵盤的輸入類型  
  6. self.inputText.keyboardType = UIKeyboardType.NumberPad  
  7. //指定return按鍵的類型  
  8. self.inputText.returnKeyType = UIReturnKeyType.Go  

2、通過代理過濾輸入

通過UITextField/UITextView的代理，可以更精確的控制輸入，例如：過濾指定字符、超過字符數(shù)禁止輸入等

(1)UITextField代碼如下：

  1. //設(shè)置代理，可根據(jù)實際情況來設(shè)置代理，這里使用self來指定  
  2. self.textField.delegate = self  
  3.  
  4. //代理方法實現(xiàn)  
  5. func textField(textField: UITextField, shouldChangeCharactersInRange  
  6.  range: NSRange, replacementString string: String) -> Bool  
  7.     {  
  8.         //禁止輸入空格  
  9.         if (string == " ") {  
  10.             return false 
  11.         }  
  12.  
  13.         //按下回車后取消鍵盤  
  14.         if (string == "\n") {  
  15.             textField.resignFirstResponder()  
  16.             return false 
  17.         }  
  18.  
  19.         return true 
  20.     }  

(2)UITextView代碼如下：

  1. /設(shè)置代理，可根據(jù)實際情況來設(shè)置代理，這里使用self來指定  
  2. self.textView.delegate = self  
  3.  
  4. //代理方法實現(xiàn)  
  5. func textView(textView: UITextView, shouldChangeTextInRange range: NSRange,  
  6. replacementText text: String) -> Bool  
  7.     {  
  8.         //禁止輸入空格  
  9.         if (text == " ") {  
  10.             return false 
  11.         }  
  12.  
  13.         //按下回車后取消鍵盤  
  14.         if (text == "\n") {  
  15.             textView.resignFirstResponder()  
  16.             return false 
  17.         }  
  18.  
  19.         return true 
  20.     }  

UITextField/UITextView可以通過代理方法實時檢測用戶輸入的內(nèi)容,方便對輸入約束，例如，在輸入超過10個字符時，禁止用戶輸入，不過這種體驗不好，建議不要使用

#p#

四、響應(yīng)編程處理，精確提示信息

1、如何優(yōu)化

輸入信息的約束一般是將規(guī)則直接提示給用戶，例如：社交中用戶昵稱的輸入：

請輸入1-8位的字符作為昵稱，不能包括空格、回車、標(biāo)點

用戶點擊確定按鈕之后，檢查輸入的合法性，并通過對話框（或HUD）的形式，提示給用戶信息

上面的處理方式，十分常見，能滿足基本需求。不過我們已經(jīng)不再采用上面的設(shè)計，原因有以下兩點：

1.提示信息過多，大部分用戶不會看
2.對話框及HUD提示比較突兀，容易使用戶產(chǎn)生挫敗感

在實際開發(fā)過程中，精減提示信息為

請輸入1-8個字符

用戶主動輸入空格、回車、標(biāo)點這些字符或者超出長度時，才主動提示給用戶信息，如下圖，無輸入，確定按鈕disable，只提示極少有用信息

 

輸入合法，確定按鈕enable

 

輸入不合法，高亮錯誤顯示，確定按鈕disable

 

 

2、代碼實現(xiàn)

使用第三方框架ReactiveCocoa,首先實現(xiàn)在用戶輸入時，下方提示及右側(cè)圖片的功能（不使用三方框架，可自己通過代理實現(xiàn)）

  1.   @IBOutlet weak var nickTextField: UITextField!//文本輸入框  
  2.   @IBOutlet weak var checkResultShowImageView: UIImageView!//輸入框右側(cè)圖片  
  3.   @IBOutlet weak var button: UIButton!  
  4.   @IBOutlet weak var hintLabel: UILabel!//文本框下方提示文字  
  5.  
  6. override func viewDidLoad() {  
  7.       super.viewDidLoad()  
  8.       //配置輸入  
  9.       configInput()  
  10.   }  
  11.  
  12. unc configInput() {  
  13.       self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void in 
  14.           if (text == nil || text.length == 0) {  
  15.               self.checkResultShowImageView.hidden = false 
  16.               return 
  17.           }  
  18.  
  19.           self.checkResultShowImageView.hidden = true 
  20.           var imageName = "" 
  21.           if (self.checkInputValidate()) {  
  22.               imageName = "ok.png" 
  23.               self.hintLabel.text = "" 
  24.           } else {  
  25.               imageName = "warning.png" 
  26.               self.hintLabel.text = "超出\(text.length - 8)個字符" 
  27.           }  
  28.           self.checkResultShowImageView.image = UIImage(named: imageName)  
  29.  
  30.       }  
  31.   }  
  32.  
  33.   func checkInputValidate() -> Bool {  
  34.       //輸入條件檢查，這里示例，只檢查字符長度  
  35.       let length = (self.nickTextField.text as NSString).length  
  36.       return length > 0 && length <= 8  
  37.   }  

下面實現(xiàn)功能：根據(jù)輸入的合法性，設(shè)置按鈕的enabled屬性，此步驟需要下載文件RAC語法支持文件,更詳細(xì)介紹Swift支持ReactiveCocoa

  1. func configButtonEnable() {  
  2.         RAC(self.button, "enabled") <~ RACSignal.combineLatest(  
  3.             [self.nickTextField.rac_textSignal()],  
  4.             reduce: { () -> AnyObject! in 
  5.  
  6.             return self.checkInputValidate()  
  7.  
  8.         })  
  9.     }  

#p#

五、中文處理辦法

有中文輸入時，上面的字?jǐn)?shù)檢查不準(zhǔn)確，如通過輸入法輸入“我愛中國文化”6個字符時self.nickTextField.text的字符個數(shù)為23個，提示信息不正確

 

UITextView/UITextFiled有一個markedTextRange屬性，用于標(biāo)識當(dāng)前是否有選中的文本（有選中文本時即為上圖中的未完成輸入狀態(tài)），利用此原理來解決中文等類似問題

  1. @IBOutlet weak var nickTextField: UITextField!  
  2. @IBOutlet weak var checkResultShowImageView: UIImageView!  
  3. @IBOutlet weak var button: UIButton!  
  4. @IBOutlet weak var hintLabel: UILabel!  
  5.  
  6. var chineseText: NSString!  
  7.  
  8. override func viewDidLoad() {  
  9.     super.viewDidLoad()  
  10.     self.nickTextField.delegate = self  
  11.     filterInput()  
  12.     configButtonEnable()  
  13.  
  14.  
  15. }  
  16.  
  17. func filterInput() {  
  18.     self.nickTextField.rac_textSignal().subscribeNext { (text) -> Void in 
  19.         if(self.nickTextField.markedTextRange != nil) {  
  20.             return;  
  21.         }  
  22.         //這里可以加入去除空格，標(biāo)點等操作  
  23.         self.chineseText = text as NSString  
  24.  
  25.         if (text == nil || text.length == 0) {  
  26.             self.checkResultShowImageView.hidden = false 
  27.             return 
  28.         }  
  29.  
  30.         self.checkResultShowImageView.hidden = true 
  31.         var imageName = "" 
  32.         if (self.checkInputValidate()) {  
  33.             imageName = "ok.png" 
  34.             self.hintLabel.text = "" 
  35.         } else {  
  36.             imageName = "warning.png" 
  37.             self.hintLabel.text = "超出\(text.length - 8)個字符" 
  38.         }  
  39.         self.checkResultShowImageView.image = UIImage(named: imageName)  
  40.  
  41.     }  
  42. }  
  43.  
  44. func checkInputValidate() -> Bool {  
  45.     //輸入條件檢查，這里示例，只檢查字符長度  
  46.     let length = chineseText.length  
  47.     return length > 0 && length <= 8  
  48. }  
  49.  
  50. func configButtonEnable() {  
  51.     RAC(self.button, "enabled") <~ RACSignal.combineLatest(  
  52.         [self.nickTextField.rac_textSignal()],  
  53.         reduce: { () -> AnyObject! in 
  54.  
  55.         if(self.nickTextField.markedTextRange == nil) {  
  56.             return self.checkInputValidate()  
  57.         }  
  58.         return self.button.enabled  
  59.  
  60.     })  
  61. }  
  62.  
  63.  
  64. @IBAction func buttonPressed(sender: AnyObject) {  
  65.     println("------>\(self.chineseText)")  
  66. }  

六、總結(jié)

輸入是手機App中最耗時的操作，處理不當(dāng)很容易失去用戶，這里總結(jié)以下幾點

1.不要將所有的約束信息直接展示給用戶，只展示那些對大部分用戶都有用的信息，對于其他約束
在用戶輸入錯誤的時候再提示
2.盡量少用或者不用對話框及HUD的方式提示錯誤
3.提示信息準(zhǔn)確，例如超出字符數(shù)，一種提示為：超出***140字符
另一種為：超出n個字符，顯然后者提示對用戶更有價值
4.不要擅自更改用戶輸入內(nèi)容或者粗暴禁止用戶輸入
責(zé)任編輯：林師授 來源： 一葉博客
SwiftSwift開發(fā)Swift技巧
相關(guān)推薦

2015-03-27 09:58:51

SwiftcodeSwift開發(fā)

2015-03-19 09:51:37

Swift輸入文本

2010-02-24 14:38:06

Python應(yīng)用語言

2010-02-23 17:13:39

Python版本

2010-02-05 18:25:26

Android 版本

2013-01-06 14:53:59

2010-05-04 12:26:44

聯(lián)想楊元慶

2012-12-25 11:44:10

移動社交應(yīng)用微博LBS

2021-02-06 09:21:17

MySQL索引面試

2021-01-31 23:54:23

數(shù)倉模型

2013-11-08 09:19:12

OpenStack產(chǎn)品開源云管理CloudForms

2013-01-14 11:35:59

IBMdW

2010-07-19 10:16:24

ibmdwWeb2.0

2012-10-23 13:51:21

大品牌公司只做表面工作

2011-09-19 16:14:33

Glmps社交應(yīng)用

2021-02-23 10:42:45

AI

2013-11-05 10:15:35

AdMaster大數(shù)據(jù)

2011-09-19 10:56:21

IOS應(yīng)用Frenzapp Mu音樂

2020-12-23 11:45:27

鴻蒙HarmonyOSTextField組件

2024-06-28 08:49:24

點贊
收藏

51CTO技術(shù)棧公眾號