iOS開發之定製輸入框

weixin_34037977發表於2016-03-26

在iOS中能夠用於文字輸入的就兩種控制元件,分別是:UITextField,UITextView
那麼我們在定製輸入框的時候,我們到底是選擇UITextField,還是UITextView呢??
分析:
一般來說,輸入框是要輸入多行文字的,並且還應該有佔位文字提示使用者可以輸入什麼樣的內容,
瞭解了需求之後我就要做出選擇了,在做出選擇之前,我們有必要去研究一下UITextField,UITextView二者之間的差異,以做出最優選擇

1.UITextField:
優點:能顯示佔位文字
缺點:只能顯示一行文字

2.UITextView:
有點:能顯示多行文字
缺點:不能顯示佔位文字

問題來了,我們的需求是既要顯示佔位文字,又要顯示多行文字,這個恰好是二者的結合體,因此我們只能通過自定義的方式去實現輸入框
解決方案:
1.自定義控制元件 LXBMutilRowTextField : UITextField
在能顯示佔位文字的基礎上,新增能夠顯示多行文字的功能

2.自定義控制元件 LXBPlaceholderTextView : UITextView
在能顯示多行內容的基礎上,新增佔位文字的功能

選擇:
由於第一種方案要LXBMutilRowTextField能夠顯示多行內容,難點在於控制游標的移動,不好做
那麼第二種方案就非常簡單,我們只需要在LXBPlaceholderTextView中新增一個佔位文字的功能,我們只需要通過繪圖的技術把佔位文字繪製到LXBPlaceholderTextView中就可以了

關於介面的設計:
我們給別人提供一個輸入框,我們要允許別人設定佔位文字和佔位文字的顏色,雖然說設定佔位文字為灰色可以滿足絕大多數需求,但是從擴充套件性上來講,我們仍然有必要提供placeholderColor這個介面,給別人更多的選擇

要注意的點:
1.控制好游標與佔位文字的起始位置要對其(3,7)或者(4,8)都行

2.因為游標的高度將跟隨輸入文字的高度,因此為了保證佔位文字的高度跟游標一樣,我們就要保證佔位文字的字型跟輸入文字的字型一樣

3.我們開放的屬性,方法這些介面給別人,就是要讓別人隨時隨刻都可以呼叫的,雖然說方便,強大,但由此帶來的副作用也需要我們要去處理的,比如在非常核心的

  • (void)drawRect:(CGRect)rect
    方法中,他只是在第一次顯示的時候被呼叫一次,但是呢別人又可以隨時隨地的修改佔位文子的內容,顏色,輸入文字的字型等等,為了解決這個問題,我們就必須要對佔位文字進行重繪:
1432650-ba53426d2ebe0bb8.png
Paste_Image.png

注意點:每次呼叫 - (void)drawRect:(CGRect)rect 方法時,系統都會把以前繪製的東西全部都擦除,再重新繪製.利用這個特點,我們就可以很好地控制佔位文字的顯示與隱藏

1432650-dbf790eb46d7f374.png
Paste_Image.png
1432650-7bdd852b84b2793d.png
Paste_Image.png
1432650-2ad5153b27a6a454.png
Paste_Image.png
1432650-fc04b2e782a17447.png
Paste_Image.png

具體使用:


1432650-712a7d2bb8974798.png
Paste_Image.png

不足之處:
由於UITextView : UIScrollView,所以我們可以讓我們自定義的輸入框有滾動的效果:

但是由於我們先前用繪製的方式將佔位文字給畫死了,佔位文字不是LXBPlaceholderTextView的子控制元件,所以游標可以滾動,但是佔位文字卻不能滾動,怎麼才能讓佔位文字滾動呢??
在LXBPlaceholderTextView上搞一個UILabel,再把佔位文字顯示到UILabel上就可以了,UILabel作為UIScrollView的子控制元件個,將隨UIScrollView的滾動一起滾動

1432650-cce3339f443031bf.png
Paste_Image.png

1432650-c7052395b10daf05.png
Paste_Image.png
1432650-fe03af9ebeea36c8.png
Paste_Image.png

1432650-8c9ce14a9b7087ba.png
Paste_Image.png

1432650-0b1196ceef9da9e8.png
Paste_Image.png


基本使用:


1432650-9d88eb96763c1b95.png
Paste_Image.png

相關文章