SecureField & TextField

[Roy-wonji]

TextField란

• 레이블과 값에 대한 바인딩이 있는 TextField 를 작성할 수 있습니다. 값이 문자열인 경우, TextField
  는 사용자가 입력하거나 편집할 때 값을 계속 업데이트합니다.String타입이 아닌 경우, return
  값을 누르는 등 사용자가 편집을 커밋할 때 값을 업데이트합니다.

TextField 에 텍스트가 커밋되면 내부에 메서드가 호출되게 할 수 있습니다.

import SwiftUI

struct ContentView: View {
    @State private var name = ""  //State
    
    var body: some View {
         
        Form {         
          TextField("아이디", text : $name) //$표시 필수
          Text("Your name is \(name)")
            
        }
    }
}

KeyboardType

만약 사용자가 TextField를 탭 했을 때 사용 가능한 키보드종류를 바꿔주는 방법도 있습니다.

struct ContentView: View {
    @State private var checkAmount = ""
    
    var body: some View {
        Form {
            Section {
                TextField("Amount", text: $checkAmount)
                 .keyboardType(.decimalPad)  //키패드 종류(숫자)
            }
            Section {
                Text("$ \(checkAmount)")
            }
        }
    }
}

Styling Text Fields

SwiftUI는 플랫폼에 적합한 모양과 동작을 반영하는 기본 TextField Style을 제공합니다.

기본 TextField Style은 TextField가 특수 스타일을 가진 TextField를 제공하는 컨테이너에 있는지 여부와 같이 현재 콘텍스트를 고려합니다.

이 외에도 텍스트 FieldStyle(_:) 수정자를 사용하여 TextField의 모양과 상호 작용을 사용자 정의할 수 있으며,

TextFieldStyle의 인스턴스를 통과할 수 있습니다.

@State private var givenName: String = ""
@State private var familyName: String = ""

var body: some View {
    VStack {
        TextField(
            "Given Name",
             text: $givenName)
            .disableAutocorrection(true)
        TextField(
            "Family Name",
            text: $familyName)
            .disableAutocorrection(true)
    }
    .textFieldStyle(RoundedBorderTextFieldStyle()) //텍스트필드 스타일
}

자동 수정 DisableAutocorrection

SwiftUI  TextField는 기본적으로 자동 수정이 활성화되어있습니다.

그러나 비활성화하려면 다음disableAutocorrection() 과 같이 수정자를 사용하면 됩니다.

TextField("Enter your name", text: $name)
    .disableAutocorrection(true)

정수(Int) 또는 소수(Double)

TextField 에 숫자 를 표시하려면 NumberFormatter  를 사용해야 합니다. 코드는 아래와 같이 작성할 수 있습니다.

struct ContentView: View {
    @State private var score = 0

    let formatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .decimal
        return formatter
    }()

    var body: some View {
        VStack {
            TextField("점수", value: $score, formatter: formatter)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("당신의 점수는 '\(score)'점 입니다.")
        }
    }
}

대문자 또는 소문자

TextField View 는 일반적으로 사용자가 원하는 대소문자로 텍스트를 작성할 수 있습니다. 이것을 사용하기 위해서는 textCase() 수정자를 써야 합니다.

• .textCase(.lowercase) - 소문자
• .textCase(.uppercase) - 대문자
• .textCase(.none) - 사용자 지정

struct ContentView: View {
    @State private var name = "Hello, My name is Seogun"

    var body: some View {
        VStack {
        TextField("텍스트를 입력해주세요", text: $name)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .textCase(.lowercase)
            .padding(.horizontal)
            
            TextField("텍스트를 입력해주세요", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .textCase(.uppercase)
                .padding(.horizontal)
            
            TextField("텍스트를 입력해주세요", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .textCase(.none)
                .padding(.horizontal)
        
        }
    }
}

텍스트 작성 후 키보드 닫기

SwiftUI의 TextField는 활성화되면 자동으로 키보드를 표시하지만 작성 후 키보드를 숨기는 것이 까다롭습니다.

특히 .numberPad, .decimalPad또는 .phonePad와 함께 keyboardType() 수정자를 사용하는 경우 더욱 그렇죠.

SwiftUI 에는 키보드를 숨기는 방법에 대한 간단한 수정자가 없기 때문에 UIKit에서 사용했던 것을 가져와야 합니다.

UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)

이라고 말하는 거처럼 아주 좋은 코드입니다. 이제 TextField가 활성화되면 키보드가 해제됩니다.

하지만 위 코드 읽기가 복잡하기 때문에 다음과 같은 extension으로 래핑하는 것을 고려해야 합니다.

#if canImport(UIKit)
extension View {
    func hideKeyboard() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}
#endif

이제 hideKeyboard() 를 SwiftUI 내에서 쓸 수 있습니다.

struct ContentView: View {
    @State private var tipAmount = ""
    @State private var password = ""

    var body: some View {
        VStack {
            TextField("아이디", text: $tipAmount)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.emailAddress)
                .disableAutocorrection(true)

            SecureField("비밀번호", text:$password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.decimalPad)

            Button("확인") {
                print("Tip: \(tipAmount)")
                hideKeyboard()
            }
        }
        .padding()
    }
}
#if canImport(UIKit)
extension View {
    func hideKeyboard() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}
#endif

TextField 에 텍스트를 입력 후 저장할 수 있도록 함수를 만들어주겠습니다.

struct ContentView: View {
    @State var showTextField = ""
    @State var itemArray: [String] = []
    
    var body: some View {

   }
   
       func saveItem() {
            itemArray.append(showTextField)
            showTextField = ""
       }
}

SecureField란

• 사용자가 비공개 텍스트를 안전하게 입력하는 컨트롤입니다.

VStack{
            SecureField("비밀번호", text:$password) {
                
            }
            //텍스트필드 스타일
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
        }

TextField와 비슷한 동작을 수행 하지만 사용자가 텍스트를 표시하고 싶지 않고 (***) 식으로 표시하고 싶을때 SecureField를 사용합니다.

일반적으로 비밀번호 또는 중요한 정보를 입력할 때 사용합니다. 필드는 모든 키 입력 또는 기타 편집에서 바인딩된 문자열을 업데이트하므로, 완료 단추와 같은 다른 컨트롤에서 언제든지 값을 읽을 수 있습니다.

struct ContentView: View {
    
    @State private var password = ""
    
    var body: some View {
        VStack {
            SecureField("비밀번호", text: $password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        .padding()
    }

비밀번호가 맞게 작성되고 있는지 확인하려면 Text에 [문자열보간](https://seons-dev.tistory.com/89)을 사용하여 확인할 수 있습니다.

      VStack {
            SecureField("비밀번호", text: $password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                
            Text("당신의 비밀번호는 [ \(password) ] 입니다.")
        }