Swift社交應(yīng)用文本輸入優(yōu)化匯總
一、輸入相關(guān)的優(yōu)化問(wèn)題
在大部分應(yīng)用中，都有輸入的需求，面對(duì)眾多用戶(hù)，他們的想法各異，輸入的文本內(nèi)容也是千奇百怪，面對(duì)不同的輸入，我們?cè)撊绾蝺?yōu)化輸入體驗(yàn)？本文將匯總一下Swift社交應(yīng)用文本輸入優(yōu)化技巧。
這里集中匯總輸入相關(guān)問(wèn)題，主要如下：
輸入控件UITextField跟隨鍵盤(pán)移動(dòng)
過(guò)濾輸入內(nèi)容
響應(yīng)編程的處理，去除體驗(yàn)不好的對(duì)話框、HUD提示
中文輸入
二、輸入框隨鍵盤(pán)移動(dòng)
界面構(gòu)建有兩種方法，代碼或者storyboard/xib，這兩種方法在處理鍵盤(pán)移動(dòng)上方法相同，這里推薦使用已經(jīng)封裝好的第三方框架：TPKeyboardAvoiding
1、代碼處理方法
rootView使用**TPKeyboardAvoiding**框架中的TPKeyboardAvoidingScrollView來(lái)初使化。例如，登錄界面，LoginViewController(繼承自UIViewController),處理方法如下：
- let rootView = TPKeyboardAvoidingScrollView(frame: self.view.bounds);
- //...
- //add all subviews to rootView
- //...
- self.view.addSubview(rootView)
代碼構(gòu)建界面，實(shí)現(xiàn)輸入框隨鍵盤(pán)移動(dòng)，需要將類(lèi)**TPKeyboardAvoidingScrollView**做為根視圖來(lái)處理。
2、storyboard/xib處理辦法
storyboard/xib處理起來(lái)更簡(jiǎn)單，將視圖控制器的rootView設(shè)置為T(mén)PKeyboardAvoidingScrollView即可
(1)選擇控制器的根視圖
(2)設(shè)置默認(rèn)實(shí)例化類(lèi)
三、常用基本設(shè)置
1、常用基本設(shè)置
包括打開(kāi)鍵盤(pán)、關(guān)閉鍵盤(pán)、指定鍵盤(pán)的輸入類(lèi)型、指定return按鈕的類(lèi)型，如以下代碼
- //打開(kāi)鍵盤(pán)
- self.inputText.becomeFirstResponder()
- //關(guān)閉鍵盤(pán)
- self.inputText.resignFirstResponder()
- //指定鍵盤(pán)的輸入類(lèi)型
- self.inputText.keyboardType = UIKeyboardType.NumberPad
- //指定return按鍵的類(lèi)型
- self.inputText.returnKeyType = UIReturnKeyType.Go
2、通過(guò)代理過(guò)濾輸入
通過(guò)UITextField/UITextView的代理，可以更精確的控制輸入，例如：過(guò)濾指定字符、超過(guò)字符數(shù)禁止輸入等
(1)UITextField代碼如下：
- //設(shè)置代理，可根據(jù)實(shí)際情況來(lái)設(shè)置代理，這里使用self來(lái)指定
- self.textField.delegate = self
- //代理方法實(shí)現(xiàn)
- func textField(textField: UITextField, shouldChangeCharactersInRange
- range: NSRange, replacementString string: String) -> Bool
- {
- //禁止輸入空格
- if (string == " ") {
- return false
- }
- //按下回車(chē)后取消鍵盤(pán)
- if (string == "\n") {
- textField.resignFirstResponder()
- return false
- }
- return true
- }
(2)UITextView代碼如下：
- self.textView.delegate = self
- //代理方法實(shí)現(xiàn)
- func textView(textView: UITextView, shouldChangeTextInRange range: NSRange,
- replacementText text: String) -> Bool
- {
- //禁止輸入空格
- if (text == " ") {
- return false
- }
- //按下回車(chē)后取消鍵盤(pán)
- if (text == "\n") {
- textView.resignFirstResponder()
- return false
- }
- return true
- }
UITextField/UITextView可以通過(guò)代理方法實(shí)時(shí)檢測(cè)用戶(hù)輸入的內(nèi)容,方便對(duì)輸入約束，例如，在輸入超過(guò)10個(gè)字符時(shí)，禁止用戶(hù)輸入，不過(guò)這種體驗(yàn)不好，建議不要使用
四、響應(yīng)編程處理，精確提示信息
1、如何優(yōu)化
輸入信息的約束一般是將規(guī)則直接提示給用戶(hù)，例如：社交中用戶(hù)昵稱(chēng)的輸入：
請(qǐng)輸入1-8位的字符作為昵稱(chēng)，不能包括空格、回車(chē)、標(biāo)點(diǎn)
用戶(hù)點(diǎn)擊**確定**按鈕之后，檢查輸入的合法性，并通過(guò)對(duì)話框（或HUD）的形式，提示給用戶(hù)信息
上面的處理方式，十分常見(jiàn)，能滿(mǎn)足基本需求。不過(guò)我們已經(jīng)不再采用上面的設(shè)計(jì)，原因有以下兩點(diǎn)：
提示信息過(guò)多，大部分用戶(hù)不會(huì)看
對(duì)話框及HUD提示比較突兀，容易使用戶(hù)產(chǎn)生挫敗感
在實(shí)際開(kāi)發(fā)過(guò)程中，精減提示信息為
- 請(qǐng)輸入1-8個(gè)字符
用戶(hù)主動(dòng)輸入空格、回車(chē)、標(biāo)點(diǎn)這些字符或者超出長(zhǎng)度時(shí)，才主動(dòng)提示給用戶(hù)信息，如下圖，無(wú)輸入，確定按鈕disable，只提示極少有用信息
輸入合法，確定按鈕enable
輸入不合法，高亮錯(cuò)誤顯示，確定按鈕disable
2、代碼實(shí)現(xiàn)
使用第三方框架ReactiveCocoa,首先實(shí)現(xiàn)在用戶(hù)輸入時(shí)，下方提示及右側(cè)圖片的功能（不使用三方框架，可自己通過(guò)代理實(shí)現(xiàn)）
- @IBOutlet weak var nickTextField: UITextField!//文本輸入框
- @IBOutlet weak var checkResultShowImageView: UIImageView!//輸入框右側(cè)圖片
- @IBOutlet weak var button: UIButton!
- @IBOutlet weak var hintLabel: UILabel!//文本框下方提示文字
- override func viewDidLoad() {
- super.viewDidLoad()
- //配置輸入
- 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 = "超出\(text.length - 8)個(gè)字符"
- }
- self.checkResultShowImageView.image = UIImage(named: imageName)
- }
- }
- func checkInputValidate() -> Bool {
- //輸入條件檢查，這里示例，只檢查字符長(zhǎng)度
- let length = (self.nickTextField.text as NSString).length
- return length > 0 && length <= 8
- }
下面實(shí)現(xiàn)功能：根據(jù)輸入的合法性，設(shè)置按鈕的enabled屬性，此步驟需要下載文件RAC語(yǔ)法支持文件,更詳細(xì)介紹Swift支持ReactiveCocoa
- func configButtonEnable() {
- RAC(self.button, "enabled") < ~ RACSignal.combineLatest(
- [self.nickTextField.rac_textSignal()],
- reduce: { () -> AnyObject! in
- return self.checkInputValidate()
- })
- }
五、中文處理辦法
有中文輸入時(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)解決中文等類(lèi)似問(wèn)題
- @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;
- }
- //這里可以加入去除空格，標(biāo)點(diǎn)等操作
- 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 = "超出\(text.length - 8)個(gè)字符"
- }
- self.checkResultShowImageView.image = UIImage(named: imageName)
- }
- }
- func checkInputValidate() -> Bool {
- //輸入條件檢查，這里示例，只檢查字符長(zhǎng)度
- 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)")
- }
六、總結(jié)
輸入是手機(jī)App中最耗時(shí)的操作，處理不當(dāng)很容易失去用戶(hù)，這里總結(jié)以下幾點(diǎn)
不要將所有的約束信息直接展示給用戶(hù)，只展示那些對(duì)大部分用戶(hù)都有用的信息，對(duì)于其他約束在用戶(hù)輸入錯(cuò)誤的時(shí)候再提示
盡量少用或者不用對(duì)話框及HUD的方式提示錯(cuò)誤
提示信息準(zhǔn)確，例如超出字符數(shù)，一種提示為：超出***140字符;另一種為：超出n個(gè)字符，顯然后者提示對(duì)用戶(hù)更有價(jià)值
不要擅自更改用戶(hù)輸入內(nèi)容或者粗暴禁止用戶(hù)輸入
