iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
自我挑戰組

iOS 新手開發的大小事系列 第 19

Day 19: [UIKit] UITextField 介紹

  • 分享至 

  • xImage
  •  

概觀

可以使用文字欄位 (text field) 從用戶使用屏幕鍵盤收集文字的輸入。鍵盤可配置為許多不同類型的輸入,例如純文字、電子郵件、數字等。文字欄位使用目標-動作 (target-action) 機制和委任物件 (delegate object) 來回報在編輯過程中所做的更改。

除了其基本的文字編輯行為之外,還可以將疊加視圖添加到文字欄位以顯示其他訊息並提供其他可點擊的控制。可以為元素添加自定義疊加視圖,例如書籤按鈕或搜索圖示。文字欄位提供了一個內置的疊加視圖用來清除當前文字。自定義覆蓋視圖的使用是可選的。

將文字欄位加到界面後,可以配置它在應用中使用。設定包括執行以下一些或全部任務:

  • 為文本欄位設定一個或多個目標和操作
  • 設定文本欄位的鍵盤相關屬性
  • 分配一個委任物件來處理重要任務,例如:
    • 判斷是否應允許用戶編輯文字欄位的內容
    • 驗證用戶輸入的文字
    • 響應鍵盤的返回按鈕的點擊
    • 將用戶輸入的文本轉發到應用程序的其他部分
  • 將對文本欄位的引用儲存在一個控制器物件中

顯示和隱藏鍵盤 (Showing and Hiding the Keyboard)

當文字欄位成為第一響應者時,系統會自動顯示鍵盤並將其輸入綁定到文字欄位。文字欄位在用戶點擊時自動成為第一響應者。還可以通過調用文字欄位的 beginFirstResponder() 方法來強制其成為第一響應者。當要求用戶輸入某些訊息時,可以強制文字欄位成為第一響應者。

可以通過調用文字欄位的 resignFirstResponder() 方法來要求系統關閉鍵盤。通常,會響應特定的相互作用而關閉鍵盤。例如,當用戶點擊鍵盤的 Return 鍵時,會關閉鍵盤。系統還可以響應於用戶操作而關閉鍵盤。具體來說,當用戶點擊不支持鍵盤輸入的新元件時,系統將關閉鍵盤。鍵盤的外觀和關閉會影響文字欄位的編輯狀態。出現鍵盤時,文字欄位進入編輯狀態,並將適當的通知發送給它的委託人。同樣,當文字欄位退出第一響應者狀態時,它將離開編輯狀態並通知其委任。

界面生成器屬性 (Interface Builder Attributes)

文字欄位屬性

  • Text: 文本字段顯示的初始文本。可以將文字指定為純字串或屬性字串。如果指定屬性字串,則界面生成器將提供不同的選項來編輯字串的字體,顏色和格式。
  • Color: 文字欄位的文字顏色。要以編程方式設置此屬性,請使用屬性 textColor
  • Font: 文字欄位的文字字體。要以編程方式設置此屬性,請使用屬性 font
  • Alignment: 文字欄位的文字在編輯區域內的對齊方式。僅當格式化純字串時,此選項才可用。要以編程方式設置此屬性,請使用屬性 textAlignment
  • Placeholder: 文字欄位顯示的佔位符文字。如果文本字段的字串為空,則文字欄位顯示該字串,並設置其格式,以表明它不是實際的文字。在文字欄位中輸入任何文字都會隱藏此字串。要以編程方式設置此屬性,請使用佔位符屬性。
  • Background: 當啟用文字欄位時顯示的背景圖像。此圖像顯示在文字欄位內容的後面。要以編程方式設置此屬性,請使用屬性 background
  • Disabled: 當禁用文字欄位時顯示的背景圖像。此圖像顯示在文字欄位內容的後面。要以編程方式設置此屬性,請使用屬性 disabledBackground
  • Border Style: 文字欄位邊框的視覺樣式。此屬性定義圍繞可編輯文本區域繪製的可視邊框(如果有)。要以編程方式設置此屬性,請使用屬性 borderStyle
  • Clear Button: 清除按鈕的行為。清除按鈕是一個內置的覆蓋視圖,用戶可以點擊該視圖來刪除文字欄位中的所有文字。使用此屬性定義清除按鈕的顯示時間。要以編程方式設置此屬性,請使用屬性 clearButtonMode
  • Min Font Size: 文字欄位文字的最小字型大小。啟用「調整為適合」選項後,文本字段會自動更改字體大小以確保文本的最大可讀性。可以使用此屬性來指定適合於文字的最小字體大小。要以編程方式設置此屬性,請使用屬性 minimumFontSize

鍵盤屬性

  • Capitalization: 自動大寫樣式應用於輸入的文字。此屬性決定於何時按 Shift 鍵。可以使用文字欄位的屬性 autocapitalizationType 以編程方式存取此屬性的值。
  • Correction: 文字欄位的自動更正行為。此屬性確定輸入期間是啟用還是禁用自動更正。可以使用文字欄位的文字欄位 autocorrectionType 以編程方式存取此屬性的值。
  • Spell Checking: 文字欄位的拼寫檢查行為。此屬性確定在鍵入期間是啟用還是禁用拼寫檢查。可以使用文字欄位的屬性 spellCheckingType 以編程方式存取此屬性的值。
  • Keyboard Type: 文字欄位的鍵盤樣式。此屬性指定文字欄位處於活動狀態時顯示的鍵盤類型。可以使用文字欄位的屬性 keyboardType 以編程方式存取此屬性的值。
  • Appearance: 視覺樣式應用於文字欄位的鍵盤。使用此屬性可以指定深色或淺色鍵盤。可以使用文字欄位的屬性 keyboardAppearance 以編程方式存取此屬性的值。
  • Return Key: 要在鍵盤上顯示的返回鍵的類型。使用此屬性可配置應用於鍵盤的回車鍵的文本和視覺樣式。可以使用文字欄位的屬性 returnKeyType 以編程方式存取此屬性的值。預設情況下,Return 鍵是禁用的,僅當用戶在文字欄位中鍵入一些文字時,返回鍵才啟用。要響應 Return 鍵中的輕擊,請在分配給文字欄位的委任中實現 textFieldShouldReturn(_:) 方法。


圖:UITextField 界面生成器屬性

實際範例

在 ViewController 加入 TextField 委任:

class ViewController: UIViewController, UITextFieldDelegate {
// 省略

}

在 viewDidLoad 中加入委任設定,及 TextField 屬性設定

override func viewDidLoad() {
        super.viewDidLoad()
        
        // 設定委任
        textField.delegate = self
        
        // 程式碼設定 TextField 屬性
        textField.textColor = UIColor.systemGreen
        textField.font = .systemFont(ofSize: 20)
        textField.placeholder = "請輸入內容"
}
    
    // 用此函數讓虛擬鍵盤按下 Return 鍵後消失
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true
}

執行顯示如下:


上一篇
Day 18: 使用 UIKit 開發 App
下一篇
Day 20: [UIKit] UIPickerView 介紹
系列文
iOS 新手開發的大小事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言