SwiftUI를 이용한 텍스트 입력하기 (TextField)

 

UI를 그리다보면 사용자가 입력해야하는 부분이 생긴다. 그럴때 사용하는 뷰가 TextField란 뷰를 이용해 사용자가 값을 입력하게 한다.

 

기본코드

import SwiftUI

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        VStack {
            TextField("이름", text: $name)
                .padding()
            Text("당신의 이름은 \\(name) 입니다.")
        }
    }
}

 

실행화면

 

 

속성

• NumberFormatter : 숫자를 표시하기 위해 사용하는 포맷
• KeyboardType : 키보드의 종류를 설정
  • .default
  • .decimalPad : 숫자 키패트 설정
  • .asciiCapable : ASCII 코드 문자를 입력하는 키패드 설정
  • .URL : URL 입력에 최적화된 키패드를 설정
  • .numberPad : 숫자 입력
  • .phonePad
  • .namePhonePad
  • .emailAddress : 이메일 주소 입력에 맞게 키패드 설정
  • .twitter
  • .webSearch
  • asciiCapableNumberPad
  • .alphabet
• .disableAutocorrection() : 자동수정 활성화
• .textCase : 글자의 대소문자 설정
  • .textCase(.lowercase) : 소문자로 설정
  • .textCase(.uppercase) : 대문자로 설정
  • . textCase(.none) : 사용자 지정

 

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) 입니다.")
		}
	}
}

 

키보드 비활성화

• UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
• 위 코드가 복잡하기 때문에 extension 으로 래핑하는 것을 고려해야 한다.

 

---

개발자 Document

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

Apple Developer Documentation