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

Swift社交應(yīng)用文本輸入優(yōu)化匯總

移動(dòng)開(kāi)發(fā) iOS
在大部分應(yīng)用中，都有輸入的需求，面對(duì)眾多用戶，他們的想法各異，輸入的文本內(nèi)容也是千奇百怪，面對(duì)不同的輸入，我們?cè)撊绾蝺?yōu)化輸入體驗(yàn)？本文將匯總一下Swift社交應(yīng)用文本輸入優(yōu)化技巧。

[[130567]]

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

在大部分應(yīng)用中，都有輸入的需求，面對(duì)眾多用戶，他們的想法各異，輸入的文本內(nèi)容也是千奇百怪，面對(duì)不同的輸入，我們?cè)撊绾蝺?yōu)化輸入體驗(yàn)？本文將匯總一下Swift社交應(yīng)用文本輸入優(yōu)化技巧。

這里集中匯總輸入相關(guān)問(wèn)題，主要如下：

輸入控件UITextField跟隨鍵盤移動(dòng)

過(guò)濾輸入內(nèi)容

響應(yīng)編程的處理，去除體驗(yàn)不好的對(duì)話框、HUD提示

中文輸入

二、輸入框隨鍵盤移動(dòng)

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

 

1、代碼處理方法

 

rootView使用**TPKeyboardAvoiding**框架中的TPKeyboardAvoidingScrollView來(lái)初使化。例如，登錄界面，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)建界面，實(shí)現(xiàn)輸入框隨鍵盤移動(dòng)，需要將類**TPKeyboardAvoidingScrollView**做為根視圖來(lái)處理。

 

2、storyboard/xib處理辦法

 

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

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

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

 

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

 

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

 

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

  1. //打開(kāi)鍵盤 
  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、通過(guò)代理過(guò)濾輸入

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

(1)UITextField代碼如下：

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

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

 

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

 

1、如何優(yōu)化

 

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

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

用戶點(diǎn)擊**確定**按鈕之后，檢查輸入的合法性，并通過(guò)對(duì)話框（或HUD）的形式，提示給用戶信息

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

提示信息過(guò)多，大部分用戶不會(huì)看

對(duì)話框及HUD提示比較突兀，容易使用戶產(chǎn)生挫敗感

在實(shí)際開(kāi)發(fā)過(guò)程中，精減提示信息為

  1. 請(qǐng)輸入1-8個(gè)字符 

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

輸入合法，確定按鈕enable

 

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

2、代碼實(shí)現(xiàn)

使用第三方框架ReactiveCocoa,首先實(shí)現(xiàn)在用戶輸入時(shí)，下方提示及右側(cè)圖片的功能（不使用三方框架，可自己通過(guò)代理實(shí)現(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. func 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)個(gè)字符" 
  27.            } 
  28.            self.checkResultShowImageView.image = UIImage(named: imageName) 
  29.  
  30.        } 
  31.    } 
  32.  
  33.    func checkInputValidate() -> Bool { 
  34.        //輸入條件檢查，這里示例，只檢查字符長(zhǎng)度 
  35.        let length = (self.nickTextField.text as NSString).length 
  36.        return length > 0 && length <= 8 
  37.    } 

下面實(shí)現(xiàn)功能：根據(jù)輸入的合法性，設(shè)置按鈕的enabled屬性，此步驟需要下載文件RAC語(yǔ)法支持文件,更詳細(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.     } 

五、中文處理辦法

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

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

  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)點(diǎn)等操作 
  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)個(gè)字符" 
  38.             } 
  39.             self.checkResultShowImageView.image = UIImage(named: imageName) 
  40.   
  41.         } 
  42.     } 
  43.   
  44.     func checkInputValidate() -> Bool { 
  45.         //輸入條件檢查，這里示例，只檢查字符長(zhǎng)度 
  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é)

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

不要將所有的約束信息直接展示給用戶，只展示那些對(duì)大部分用戶都有用的信息，對(duì)于其他約束在用戶輸入錯(cuò)誤的時(shí)候再提示

盡量少用或者不用對(duì)話框及HUD的方式提示錯(cuò)誤

提示信息準(zhǔn)確，例如超出字符數(shù)，一種提示為：超出***140字符;另一種為：超出n個(gè)字符，顯然后者提示對(duì)用戶更有價(jià)值

不要擅自更改用戶輸入內(nèi)容或者粗暴禁止用戶輸入

責(zé)任編輯：chenqingxiang 來(lái)源： cocoachina
SwiftcodeSwift開(kāi)發(fā)
相關(guān)推薦

2015-03-19 09:51:37

Swift輸入文本

2015-03-24 20:21:32

SwiftSwift開(kāi)發(fā)Swift技巧

2015-01-12 13:04:39

Swift開(kāi)源項(xiàng)目匯總

2015-06-08 10:02:40

swiftOC兼容

2012-12-25 11:44:10

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

2014-03-10 10:24:01

MySQLMySQL優(yōu)化

2013-09-17 10:17:39

Android布局

2010-07-19 10:16:24

ibmdwWeb2.0

2013-01-14 11:35:59

IBMdW

2018-09-11 08:40:00

前端JavaScriptt性能優(yōu)化

2012-10-23 13:51:21

大品牌公司只做表面工作

2017-09-08 08:48:18

Swift語(yǔ)言數(shù)據(jù)分段機(jī)器學(xué)習(xí)

2020-12-23 11:45:27

鴻蒙HarmonyOSTextField組件

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音樂(lè)

2024-06-28 08:49:24

2022-06-23 09:57:01

code-revie前端代碼

2021-04-25 11:16:06

安全音頻社交媒體應(yīng)用程序
點(diǎn)贊
收藏

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