iOS 輸入限制之 InputKit

InputKit-logo2-dynamic.gif

前言

最近接手了兩個 O2O 的老項目,其中的 Bug 也不言而喻,單看項目中的布局就有 n 種不同的方式,有用純代碼的,有用 Masonry 的,有用 VFL 的,也有用 Xib 的,更有用代碼約束等等等,??。不扯遠了,回歸正題。

由于這兩個項目是 O2O 項目,因此針對輸入組件的限制相比其他類型的項目要多一些,比如商品價格輸入(如:保留3位整數,2位小數等)、買家留言字數限制、不能輸入中文、不能輸入英文、只能輸入數字等等限制。

于是輸入限制 InputKit 誕生了!本文主要簡單介紹 InputKit 的使用及相關注意事項。(微博地址

InputKit

InputKit 是一個輕量級的,專門用于做輸入限制的第三方庫,靈感源自 BlocksKit,在項目中,主要為了解決三個問題:

  • 解耦
  • 需求
  • Bug

解耦

所謂解耦,即在開發項目中工程師不需要僅僅只為做個輸入限制,就在項目中到處寫 UITextFieldDelegate 協議中的方法,如:


- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    // Coding
}

只需繼承 InputKit 中的類即可,然后設置相關的限制屬性即可,無需設置 delegate。以 TXLimitedTextFieldTypePrice 類型為例,如:

Objective-C


// 創建 TXLimitedTextField 實例
TXLimitedTextField *textField = [[TXLimitedTextField alloc] initWithFrame:CGRectMake(20, 200, 100, 30)];
// 如 limitedType 不設置,默認 TXLimitedTextFieldTypeDefault
textField.limitedType = TXLimitedTextFieldTypePrice;
// 限制 10 的輸入長度
textField.limitedNumber = 10;
// 保留 5 位整數位
textField.limitedPrefix = 5;
// 保留 2 位小數位
textField.limitedSuffix = 2;
[self.view addSubview:textField];

Swift


let textField = LimitedTextField(frame: CGRect(x: 20, y: 200, width: 100, height: 30))
textField.limitedType = .price
textField.limitedNumber = 10
textField.limitedPrefix = 5
textField.limitedSuffix = 2
view.addSubview(textField)

如果想設置 textField 的 delegate 也可以(即 textField.delegate = self),不會影響其限制功能,就像使用普通的 UITextField 一樣,毫無差異,非常方便。

Demo 截圖:

inputKit-demo-price.gif

需求

文章開頭提到過,需求即針對商品價格輸入(如:保留3位整數,2位小數等)、買家留言字數限制、不能輸入中文、不能輸入英文、只能輸入數字等等做限制。

如果針對上述的部分需求做定制鍵盤,是完全沒必要的,因為工作量增多且并不能從源頭解決問題,比如:用戶使用粘貼功能、使用鍵盤提示文本等等,導致定制的鍵盤也是白搭。因此 InputKit 從源頭解決該問題,針對用戶的輸入進行篩選并限制。比如我們只能讓用戶輸入中文:

Objective-C


TXLimitedTextField *textField = [[TXLimitedTextField alloc] initWithFrame:CGRectMake(20, 200, 100, 30)];

// 自定義輸入限制類型
textField.limitedType = TXLimitedTextFieldTypeCustom;

// 限制最大輸入長度
textField.limitedNumber = 10;

// limitedRegExs 是一個數組類型的參數,數組元素類型即正則表達式,如:kTXLimitedTextFieldChineseOnlyRegex 是一個常量,其值為:“^[\u4e00-\u9fa5]{0,}$”,即代表匹配中文的正則
textField.limitedRegExs = @[kTXLimitedTextFieldChineseOnlyRegex];

[self.view addSubview:textField];

Swift 代碼略

關于上述的正則表達式,在 InputKit 中的 TXMatchConst.h 頭文件中提供了一些常用的,比如:只能輸入數字、中文、字母等等,歡迎大家在 GitHub 上 PR。(注意:此處的正則表達式限制的是輸入源頭,而非結果!不然會導致用戶無法輸入。體會一下哈)。

Demo 截圖:

inputKit-demo-custom.gif

Bug

在沒使用 InputKit 之前,有時候,運行到程序的某處,點擊輸入框,程序莫名其妙的卡死,過會兒就閃退了。相信不少人遇到過,后來發現是 self.delegate = self(self 即輸入框對象) 導致的。注釋后,發現沒問題,打開后,程序又閃退,后來發現原來是 self.delegate = self 引起的死循環,因此不得不注釋該句代碼。

上述的這些問題,如:在項目中 UITextFieldDelegate 協議方法遍地都是,以及一不小心使用了 self.delegate = self 時,還會出現死循環等等,InputKit 都解決了。

使用 InputKit 后,self.delegate = self 程序不再卡死。(晚點會再發一篇軟文針對 self.delegate = self 的問題進行剖析)。

至此,需求、Bug 均已解決。??

開源

GitHub 項目及 Demo 地址:https://github.com/tingxins/InputKit

有什么問題或者更好的建議,直接提 issue 或者 PR。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,443評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,530評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,407評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,981評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,759評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,204評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,263評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,415評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,955評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,650評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,892評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,675評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2 374

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,658評論 25 708
  • iOS網絡架構討論梳理整理中。。。 其實如果沒有APIManager這一層是沒法使用delegate的,畢竟多個單...
    yhtang閱讀 5,228評論 1 23
  • *面試心聲:其實這些題本人都沒怎么背,但是在上海 兩周半 面了大約10家 收到差不多3個offer,總結起來就是把...
    Dove_iOS閱讀 27,195評論 30 471
  • “豆豆,如果讓你擔任班委你愿意嗎?” 那是一個深夜,班班的一句話在昏黑的夜晚瞬間讓我頭腦膨脹,腎上腺素極速上身。 ...
    我是牛陽陽閱讀 291評論 5 9
  • 首先聲明,我是女的,正常的女的。但是我就是更愛姑娘,欣賞的贊嘆的愛著。 我有一個好朋友,是我大學同...
    凌然閱讀 219評論 0 0