Swift社交應用文字輸入優化彙總
一、輸入相關的優化問題
在大部分應用中，都有輸入的需求，面對眾多使用者，他們的想法各異，輸入的文字內容也是千奇百怪，面對不同的輸入，我們該如何優化輸入體驗？這裡集中彙總輸入相關問題，主要如下：
1、輸入控制元件UITextField跟隨鍵盤移動
2、過濾輸入內容
3、響應程式設計的處理，去除體驗不好的對話方塊、HUD提示
4、中文輸入
二、輸入框隨鍵盤移動
介面構建有兩種方法，程式碼或者storyboard/xib，這兩種方法在處理鍵盤移動上方法相同，這裡推薦使用已經封裝好的第三方框架：TPKeyboardAvoiding
1、程式碼處理方法
rootView使用TPKeyboardAvoiding框架中的TPKeyboardAvoidingScrollView來初使化。例如，登入介面，LoginViewController(繼承自UIViewController),處理方法如下：
letrootView=TPKeyboardAvoidingScrollView(frame:self.view.bounds);
//...
//addallsubviewstorootView
//...
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.Go2、通過代理過濾輸入
通過UITextField/UITextView的代理，可以更精確的控制輸入，例如：過濾指定字元、超過字元數禁止輸入等
(1)UITextField程式碼如下：
//設定代理，可根據實際情況來設定代理，這裡使用self來指定
self.textField.delegate=self
//代理方法實現
functextField(textField:UITextField,shouldChangeCharactersInRange
range:NSRange,replacementStringstring:String)->Bool
{
//禁止輸入空格
if(string==""){
returnfalse
}
//按下回車後取消鍵盤
if(string=="\n"){
textField.resignFirstResponder()
returnfalse
}
returntrue
}(2)UITextView程式碼如下：
/設定代理，可根據實際情況來設定代理，這裡使用self來指定
self.textView.delegate=self
//代理方法實現
functextView(textView:UITextView,shouldChangeTextInRangerange:NSRange,
replacementTexttext:String)->Bool
{
//禁止輸入空格
if(text==""){
returnfalse
}
//按下回車後取消鍵盤
if(text=="\n"){
textView.resignFirstResponder()
returnfalse
}
returntrue
}UITextField/UITextView可以通過代理方法實時檢測使用者輸入的內容,方便對輸入約束，例如，在輸入超過10個字元時，禁止使用者輸入，不過這種體驗不好，建議不要使用
四、響應程式設計處理，精確提示資訊
1、如何優化
輸入資訊的約束一般是將規則直接提示給使用者，例如：社交中使用者暱稱的輸入：
請輸入1-8位的字元作為暱稱，不能包括空格、回車、標點
使用者點選確定按鈕之後，檢查輸入的合法性，並通過對話方塊（或HUD）的形式，提示給使用者資訊
上面的處理方式，十分常見，能滿足基本需求。不過我們已經不再採用上面的設計，原因有以下兩點：
1.提示資訊過多，大部分使用者不會看
2.對話方塊及HUD提示比較突兀，容易使使用者產生挫敗感
在實際開發過程中，精減提示資訊為
請輸入1-8個字元
使用者主動輸入空格、回車、標點這些字元或者超出長度時，才主動提示給使用者資訊，如下圖，無輸入，確定按鈕disable，只提示極少有用資訊
輸入合法，確定按鈕enable
輸入不合法，高亮錯誤顯示，確定按鈕disable
2、程式碼實現
使用第三方框架ReactiveCocoa,首先實現在使用者輸入時，下方提示及右側圖片的功能（不使用三方框架，可自己通過代理實現）
@IBOutletweakvarnickTextField:UITextField!//文字輸入框
@IBOutletweakvarcheckResultShowImageView:UIImageView!//輸入框右側圖片
@IBOutletweakvarbutton:UIButton!
@IBOutletweakvarhintLabel:UILabel!//文字框下方提示文字
overridefuncviewDidLoad(){
super.viewDidLoad()
//配置輸入
configInput()
}
funcconfigInput(){
self.nickTextField.rac_textSignal().subscribeNext{(text)->Voidin
if(text==nil||text.length==0){
self.checkResultShowImageView.hidden=false
return
}
self.checkResultShowImageView.hidden=true
varimageName=""
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)
}
}
funccheckInputValidate()->Bool{
//輸入條件檢查，這裡示例，只檢查字元長度
letlength=(self.nickTextField.textasNSString).length
returnlength>0&&length<=8
}下面實現功能：根據輸入的合法性，設定按鈕的enabled屬性，此步驟需要下載檔案RAC語法支援檔案,更詳細介紹Swift支援ReactiveCocoa
funcconfigButtonEnable(){
RAC(self.button,"enabled")<~RACSignal.combineLatest(
[self.nickTextField.rac_textSignal()],
reduce:{()->AnyObject!in
returnself.checkInputValidate()
})
}五、中文處理辦法
有中文輸入時，上面的字數檢查不準確，如通過輸入法輸入**"我愛中國文化"**6個字元時self.nickTextField.text的字元個數為23個，提示資訊不正確
UITextView/UITextFiled有一個markedTextRange屬性，用於標識當前是否有選中的文字（有選中文字時即為上圖中的未完成輸入狀態），利用此原理來解決中文等類似問題
@IBOutletweakvarnickTextField:UITextField!
@IBOutletweakvarcheckResultShowImageView:UIImageView!
@IBOutletweakvarbutton:UIButton!
@IBOutletweakvarhintLabel:UILabel!
varchineseText:NSString!
overridefuncviewDidLoad(){
super.viewDidLoad()
self.nickTextField.delegate=self
filterInput()
configButtonEnable()
}
funcfilterInput(){
self.nickTextField.rac_textSignal().subscribeNext{(text)->Voidin
if(self.nickTextField.markedTextRange!=nil){
return;
}
//這裡可以加入去除空格，標點等操作
self.chineseText=textasNSString
if(text==nil||text.length==0){
self.checkResultShowImageView.hidden=false
return
}
self.checkResultShowImageView.hidden=true
varimageName=""
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)
}
}
funccheckInputValidate()->Bool{
//輸入條件檢查，這裡示例，只檢查字元長度
letlength=chineseText.length
returnlength>0&&length<=8
}
funcconfigButtonEnable(){
RAC(self.button,"enabled")<~RACSignal.combineLatest(
[self.nickTextField.rac_textSignal()],
reduce:{()->AnyObject!in
if(self.nickTextField.markedTextRange==nil){
returnself.checkInputValidate()
}
returnself.button.enabled
})
}
@IBActionfuncbuttonPressed(sender:AnyObject){
println("------>\(self.chineseText)")
}六、總結
輸入是手機App中最耗時的操作，處理不當很容易失去使用者，這裡總結以下幾點
來源：婁底網站建設
1.不要將所有的約束資訊直接展示給使用者，只展示那些對大部分使用者都有用的資訊，對於其他約束
在使用者輸入錯誤的時候再提示
2.儘量少用或者不用對話方塊及HUD的方式提示錯誤
3.提示資訊準確，例如超出字元數，一種提示為：超出最大140字元
另一種為：超出n個字元，顯然後者提示對使用者更有價值
4.不要擅自更改使用者輸入內容或者粗暴禁止使用者輸入