在 UITextField 的開頭建立一個空格


要在 Swift 中在 UITextField 的開頭建立空格,可以將文字欄位的 leftView 屬性設定為具有所需寬度的 UIView。預設情況下,UITextField 在左側或右側沒有提供邊距,這是擁有空間以獲得更好使用者介面的最常見需求。在本文中,您將看到一個關於如何在文字欄位中新增左邊距的示例。

在此示例中,我們首先建立一個檢視控制器,然後建立一個電子郵件地址文字欄位。首先,我們將看到預設文字欄位的行為。

基本設定

示例

import UIKit
class TestController: UIViewController {
    
   private let emailTextField: UITextField = {
      let textField = UITextField()
      textField.placeholder = "Email Address"
      textField.translatesAutoresizingMaskIntoConstraints = false
      textField.layer.borderWidth = 1.0
      textField.layer.cornerRadius = 8.0
      textField.layer.borderColor = UIColor.gray.cgColor
      textField.layer.masksToBounds = true
      textField.keyboardType = .emailAddress
      textField.autocorrectionType = .no
      return textField
   }()
    
   override func viewDidLoad() {
      super.viewDidLoad()
      initialSetup()
   }
    
   private func initialSetup() {
        
      view.backgroundColor = .white
      navigationItem.title = "UITextField"
        
      view.addSubview(emailTextField)
        
      emailTextField.widthAnchor.constraint(equalToConstant: 250).isActive = true
      emailTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
      emailTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
      emailTextField.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
   }
}

輸出

新增空格

示例

private func addPadding() {
   // Create a UIView to use as padding: You can create a new UIView to use as padding at the beginning of the text field. The width of this view will determine the amount of space you want to create.
   let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 50))
    
   // Set the leftView property of the text field: You can set the leftView property of the text field to the padding view you created in step 2. This will ensure that the padding view is displayed at the beginning of the text field.
   emailTextField.leftView = paddingView
    
   // Set the leftViewMode property of the text field: You also need to set the leftViewMode property of the text field to .always. This will ensure that the padding view is always visible, even when there is no text in the text field.
   emailTextField.leftViewMode = .always
}

輸出

在上面的函式中,您正在將 leftView 新增到 emailTextField。此外,您需要將 leftViewMode 屬性設定為“始終”值。在 paddingView 中,您為檢視提供初始框架以及等於 emailTextField(即 50)的高度。

請注意,您必須在 initialSetup() 之後立即呼叫 addPadding() 方法。

以下是在 UITextField 的開頭建立空格時需要記住的一些其他要點

  • 填充檢視的顏色 - 在我提供的示例程式碼中,填充檢視的背景顏色設定為“透明”。如果需要,您可以為填充檢視的可視背景選擇任何顏色。

  • 填充檢視將決定要在文字欄位頂部新增多少空間。為了根據需要建立更多或更少的空間,您可以調整寬度。

  • 從右到左的語言 - 在為從右到左檢視的語言(如阿拉伯語或希伯來語)建立應用程式時,您可能需要修改填充檢視和文字方向。

  • 自動佈局 - 若要確保在使用自動佈局時 UI 元件的位置正確,您可能需要修改文字欄位和填充檢視的約束。

  • 輔助功能 - 請注意,向文字框新增填充可能會使某些有特定限制(例如視力障礙)的人更難使用。考慮找到實現相同目標的不同方法或提供一個切換按鈕來停用邊距。

結論

總之,在 iOS 中在 UITextField 的開頭建立空格是一項簡單的任務,可以透過將文字欄位的 leftView 屬性設定為具有所需寬度的 UIView 並將 leftViewMode 屬性設定為 .always 來實現。務必牢記填充檢視的寬度和顏色,以及從右到左的語言、自動佈局和輔助功能方面的考慮因素。透過遵循這些指南,您可以建立一個功能齊全、易於訪問且視覺上吸引人的文字欄位。

更新於: 2023年5月4日

2K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告