Swift社交應用文本輸入最佳化匯總，swift社交文本匯總

Swift社交應用文本輸入最佳化匯總，swift社交文本匯總
一、輸入相關的最佳化問題

在大部分應用中，都有輸入的需求，面對眾多使用者，他們的想法各異，輸入的常值內容也是千奇百怪，面對不同的輸入，我們該如何最佳化輸入體驗？這裡集中匯總輸入相關問題，主要如下：
1、輸入控制項UITextField跟隨鍵盤移動
2、過濾輸入內容
3、響應編程的處理，去除體驗不好的對話方塊、HUD提示
4、中文輸入

二、輸入框隨鍵盤移動

介面構建有兩種方法，代碼或者storyboard/xib，這兩種方法在處理鍵盤移動上方法相同，這裡推薦使用已經封裝好的第三方架構：TPKeyboardAvoiding

1、代碼處理方法

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

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

代碼構建介面，實現輸入框隨鍵盤移動，需要將類TPKeyboardAvoidingScrollView做為根視圖來處理。

2、storyboard/xib處理辦法

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

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

(2)設定預設執行個體化類

三、常用基本設定1、常用基本設定

包括開啟鍵盤、關閉鍵盤、指定鍵盤的輸入類型、指定return按鈕的類型，如以下代碼

//開啟鍵盤self.inputText.becomeFirstResponder()//關閉鍵盤self.inputText.resignFirstResponder()//指定鍵盤的輸入類型self.inputText.keyboardType = UIKeyboardType.NumberPad//指定return按鍵的類型self.inputText.returnKeyType = UIReturnKeyType.Go

2、通過代理過濾輸入

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

(1)UITextField代碼如下：

//設定代理，可根據實際情況來設定代理，這裡使用self來指定self.textField.delegate = self//代理方法實現func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool    {        //禁止輸入空格        if (string == " ") {            return false        }        //按下斷行符號後取消鍵盤        if (string == "\n") {            textField.resignFirstResponder()            return false        }        return true    }

(2)UITextView代碼如下：

/設定代理，可根據實際情況來設定代理，這裡使用self來指定self.textView.delegate = self//代理方法實現func textView(textView: UITextView, shouldChangeTextInRange range: NSRange, replacementText text: String) -> Bool    {        //禁止輸入空格        if (text == " ") {            return false        }        //按下斷行符號後取消鍵盤        if (text == "\n") {            textView.resignFirstResponder()            return false        }        return true    }

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

四、響應編程處理，精確提示資訊1、如何最佳化

輸入資訊的約束一般是將規則直接提示給使用者，例如：社交中使用者暱稱的輸入：

請輸入1-8位的字元作為暱稱，不能包括空格、斷行符號、標點

使用者點擊確定按鈕之後，檢查輸入的合法性，並通過對話方塊（或HUD）的形式，提示給使用者資訊

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

1.提示資訊過多，大部分使用者不會看2.對話方塊及HUD提示比較突兀，容易使使用者產生挫敗感

在實際開發過程中，精減提示資訊為

請輸入1-8個字元

使用者主動輸入空格、斷行符號、標點這些字元或者超出長度時，才主動提示給使用者資訊，如，無輸入，確定按鈕disable，只提示極少有用資訊

輸入合法，確定按鈕enable

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

2、代碼實現

使用第三方架構ReactiveCocoa,首先實現在使用者輸入時，下方提示及右側圖片的功能（不使用三方架構，可自己通過代理實現）

    @IBOutlet weak var nickTextField: UITextField!//文本輸入框    @IBOutlet weak var checkResultShowImageView: UIImageView!//輸入框右側圖片    @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)個字元"            }            self.checkResultShowImageView.image = UIImage(named: imageName)        }    }    func checkInputValidate() -> Bool {        //輸入條件檢查，這裡樣本，只檢查字元長度        let length = (self.nickTextField.text as NSString).length        return length > 0 && length <= 8    }

下面實現功能：根據輸入的合法性，設定按鈕的enabled屬性，此步驟需要下載檔案RAC文法支援檔案,更詳細介紹Swift支援ReactiveCocoa

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

五、中文處理辦法

有中文輸入時，上面的字數檢查不準確，如通過IME輸入**”我愛中國文化”**6個字元時self.nickTextField.text的字元個數為23個，提示資訊不正確

UITextView/UITextFiled有一個markedTextRange屬性，用於標識當前是否有選中的文本（有選中文本時即為中的未完成輸入狀態），利用此原理來解決中文等類似問題

    @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;            }            //這裡可以加入去除空格，標點等操作            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)個字元"            }            self.checkResultShowImageView.image = UIImage(named: imageName)        }    }    func checkInputValidate() -> Bool {        //輸入條件檢查，這裡樣本，只檢查字元長度        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)")    }

六、總結

輸入是手機App中最耗時的操作，處理不當很容易失去使用者，這裡總結以下幾點

1.不要將所有的約束資訊直接展示給使用者，只展示那些對大部分使用者都有用的資訊，對於其他約束在使用者輸入錯誤的時候再提示2.盡量少用或者不用對話方塊及HUD的方式提示錯誤3.提示資訊準確，例如超出字元數，一種提示為：超出最大140字元另一種為：超出n個字元，顯然後者提示對使用者更有價值4.不要擅自更改使用者輸入內容或者粗暴禁止使用者輸入