[iOS - swiftUI] TextField ViewModifier, SecureField 사용 방법

목차) SwiftUI의 기본 - 목차 링크

 

* TextField 기본 개념 (@FocusState, 키보드 숨기기 사용 방법)은 이전 포스팅 글 참고

ViewModifier

• ViewModifier는 Text ViewModifier에서 알아본 내용처럼, SwiftUI에서는 상속이 불가능한 Struct를 사용하고 있고 이 때 컴포넌트화해서 쓰고 싶은 경우 Modifer를 이용하여 사용

ex) Text에서 Modifier를 사용한 경우

(정의하는 쪽)

//  MyTextModifier.swift

import SwiftUI

struct MyTextModifier: ViewModifier {
  func body(content: Content) -> some View {
    content
      .font(.system(size: 24, weight: .bold, design: .default))
      .foregroundColor(.blue)
  }
}

(사용하는쪽)

struct ContentView: View {
  var body: some View {
    Text("my_text")
      .modifier(MyTextModifier())
  }
}

TextField ViewModifier

커스텀 TextField 만들기

• TextField도 마찬가지로 ViewModifier 프로토콜을 구현하는 Struct를 만들어서 구현

struct PrimaryRoundTextField: ViewModifier {
  func body(content: Content) -> some View {
  
  }
}

 

• 텍스트 필드를 사용할 때 일반적으로 불필요한 옵션들 (자동 완성, 첫번째 글자가 대문자로 변환)을 disable 하는 부분도 선언

struct PrimaryRoundTextField: ViewModifier {
  func body(content: Content) -> some View {
    content
      .font(.system(size: 16))
      .textFieldStyle(.roundedBorder)
      .foregroundColor(.black)
      .textInputAutocapitalization(.never)
      .disableAutocorrection(true)
  }
}

• 사용하는쪽
  • 이전 포스팅 글 에서 알아본대로, TextField를 사용할 땐 placeholder부분과 입력되는 상태를 저장할 @State 프로퍼티가 필요
  • TextField 선언

struct ContentView: View {
  @State private var username = ""
  
  var body: some View {
    TextField(
      "입력하세요",
      text: $username
    )
    .padding()
  }
}

• .modifier()를 통해 위에서 정의한 인스턴스를 주입하여 완성

struct ContentView: View {
  @State private var username = ""
  
  var body: some View {
    TextField(
      "입력하세요",
      text: $username
    )
      .modifier(PrimaryRoundTextField()) // <-
      .padding()
  }
}

SecureField

SecureField 사용 방법

• SecureField는 TextField와 동일한 방법으로 사용

@State private var password = ""

SecureField(
  "Password",
  text: $password
)

* 전체 코드: https://github.com/JK0369/ExSecureTextField-swiftUI

 

* 참고

https://developer.apple.com/documentation/swiftui/securefield