SwiftUI) TextField 여러 기능 살펴보기

프로젝트를 진행하면서 많이 사용하는 TextField의 여러 기능에 대해 정리해보았습니다.

TextField

TextField의 기본 형태입니다.

struct ContentView: View {
    @State var text: String = ""
    
    var body: some View {
        VStack {
            TextField("텍스트를 입력해주세요", text: $text)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )
        }
        .padding()
    }
}

TextField 글자 정렬

TextField안에 입력 될 글자의 정렬 위치는 .multilineTextAlignment()을 이용해 설정할 수 있습니다.

struct Alignment: View {
    @State var leadingAlignment: String = ""
    @State var centerAlignment: String = ""
    @State var trailingAlignment: String = ""
    
    var body: some View {
        VStack(spacing: 24) {
            TextField("왼쪽 정렬", text: $leadingAlignment)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )
                .multilineTextAlignment(.leading)
            
            TextField("중앙 정렬", text: $centerAlignment)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )
                .multilineTextAlignment(.center)
        
            
            TextField("우측 정렬", text: $trailingAlignment)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )
                .multilineTextAlignment(.trailing)
        }
        .padding()
    }
}

최대 글자 수 제한하기

TextField에 비밀번호나 전화번호 등을 입력할 때 최대 글자 수를 제한하는 방법입니다.

struct maxLength: View {
    @State var text: String = ""
    
    let maxLength = 15
    
    var body: some View {
        VStack {
            TextField("텍스트를 입력해주세요", text: $text)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )

                .onChange(of: text) { oldValue, newValue in
                    if newValue.count > maxLength {
                        text = oldValue
                    }
                }
            
            Text("현재 글자 수: \(text.count) / \(maxLength)")
        }
        .padding()
    }
}

키보드 타입 설정하기

TextField에 숫자만 입력해야 하거나 이메일을 등을 입력해야 하는 경우 .keyboardType()을 사용해 키보드의 타입을 설정해주어 사용자에게 더 편의성을 제공할 수 있습니다.

struct KeyboardType: View {
    @State var defaultText: String = ""
    @State var numberText: String = ""
    @State var emailText: String = ""
    
    var body: some View {
        VStack(spacing: 24) {
            TextField("글자를 입력해주세요", text: $defaultText)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )
                .keyboardType(.default) // 없어도 .default 상태
            
            TextField("숫자를 입력해주세요", text: $numberText)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )
                .keyboardType(.numberPad)
            
            TextField("이메일를 입력해주세요", text: $emailText)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color.primary, lineWidth: 1)
                )
                .keyboardType(.emailAddress)
        }
        .padding()
    }
}

• .default - 기본적인 키보드 형태
• .numberPad - 숫자만 입력할 수 있는 키보드 형태
• .decimalPad - 위의 .numberPad 형태에서 소수점(.)만 포함된 키보드 형태
• .emailAddress - @ 와 . 키가 추가되어 이메일 입력에 편의 함
• .url - .과 / 키가 추가되어 URL 입력에 편의 함

더 많은 키보드 타입

키보드 숨기기, 닫기

키보드로 글자를 입력한 후 다른 뷰로 넘어가거나 다른 액션을 위해 키보드를 코드로 닫게 해주는 방법입니다.

struct DismissKeyboard: View {
    @State var text: String = ""
    
    var body: some View {
        TextField("텍스트를 입력해주세요", text: $text)
            .padding()
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.primary, lineWidth: 1)
            )
        
        Button("키보드 닫기") {
            dismissKeyboard()
        }
    }
    
    func dismissKeyboard() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

전체 코드 Github