iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
1
自我挑戰組

Hey! UIKit, 做個朋友吧~系列 第 12

Day 12: UITextField三部曲-直搗工作室的UITextField

  • 分享至 

  • xImage
  •  

言下之意工作室94蜂窩,我們都4一群辛勤的小蜜蜂QQ嗡嗡嗡

雖然這一篇是TextField三部曲完結篇,但是因為我內容沒分配好,導致這一篇的篇幅好像有點短,內容也沒第二篇精彩,還請大家多多擔待。

Overlay

除了基本的編輯文字功能,你還可以添加overlay在textField上,來顯示附加資訊或是新增點擊功能,像是常見的重新整理、加入書籤、清除文字跟搜尋按鈕都是overlay:

通常overlay是一個image-based的按鈕,可以為他設置與編輯有關的額外動作。

clear button可以一鍵清除textField裡的所有文字,是apple原生的overlay,也是最容易實現的,只要呼叫clearButtonMode這個變數並且對他進行指定即可。

idTextField.clearButtonMode = .always


always是只要textField內不是空字串就會出現clean button,另外還有「只有編輯時會出現」跟「只有不編輯時會出現」,兩個勢不兩立。預設值為none。

另外也可以自定義左overlay和右overlay,需要注意的是:左右overlay各別只能同時存在一個button。clean button雖然非常方便,但由於是顯示在右側的overlay,所以如果你有自定義其他右overlay的話,需要額外定義rightViewMode及clearButtonMode這2個屬性來決定自定義overlay及clean button overlay各自出現的時機。

以下實作在左overlay添加加入書籤及右overlay添加搜尋的button。
首先先定義兩個UIButton,這裡我們並不實作按下按鈕後的回饋,所以就不add target了:

addBookmarkOverlayButton.setImage(UIImage(named: "addBookmark"), for: .normal)
searchOverlayButton.setImage(UIImage(named: "search"), for: .normal)

接下來把button加進textField的左右overlay裡,並設定他們的顯示時機(也別忘記修改clean button的):

newTextField.leftView = addBookmarkOverlayButton
newTextField.rightView = searchOverlayButton

newTextField.leftViewMode = .always
newTextField.rightViewMode = .unlessEditing
newTextField.clearButtonMode = .whileEditing

Internationalization

當你的keyboard type為default的時候,系統會自動幫你偵測使用者的語言和地區來彈出相對應的鍵盤。你所需要做的只是調整textField的響應動作,讓他可以handle不同語言的input。

這個部分在UIButton有提到,想要更進一步了解的話,可以參考Internationalization and Localization Guide

Accessibility

textField的輔助使用是預設的。
當鍵盤彈起的時候,應該都不難發現右下角有一個麥克風的圖案。textField支援語音輸入,不需要額外開啟什麼功能,是我不會打字的老爸老媽的貼心小幫手。
雖然系統已經為textField預設了支援語音輸入,不過如果你想要讓你的app親和力爆棚的話,也可以參考Accessibility Programming Guide for iOS

State Preservation

一開始看到狀態存取這個子項,想說只是翻譯幾行文件,佔不了多少篇幅。沒想到越查下去越發現後面是茫茫大海...所以我們這裡只簡單介紹一下restorationIdentifier就好,結果還是佔不了什麼篇幅。

restorationIdentifier是個optional String,繼承自UIView,他決定了這個view及其內容會不會被保存,並在讀取過程中提供驗證。在沒有額外設定identifier的狀態下預設值為nil,也就是視圖並不會被儲存;在讀取時也因為identifier為nil,不會讀取任何先前的狀態。

如果identifier有值的話,當這個視圖要被執行的時候,UIKit會向你的app請求重建上次app執行時所存儲的狀態。這時UIKit會提供要執行的視圖以及其所有父視圖的identifier給app,app再由他收到的identifier確認要讀取哪些存儲資料以重建視圖。
所以當你對一個視圖設定restorationIdentifier時,必須對他所有的父視圖也設定restorationIdentifier,才能確保存儲與讀取。

當你對textField設定restorationIdentifier時,他會保存你所選textField的文字內容,等下一個執行迴圈時再試圖讀取。

那我對state preservation的粗淺介紹就先到這裡告一個段落。
不過我覺得存取很有趣,等UIKit更上手了一些,應該會開始著手理解這一個部分。
希望之後還有機會跟大家聊聊preservation and restoration。

那下一回即將進入UISlider。
沒想到才幾個UIKit我也是寫了12天啊...果然是處處都有學問可以挖呢。


上一篇
Day 11: UITextField三部曲-住海邊的UITextFieldDelegate
下一篇
Day 13: 我碰了UISlider~就~咻的滑過去了
系列文
Hey! UIKit, 做個朋友吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言