[SwiftUI] UIViewRepresentable UITextField에 done 버튼 추가하기

SwiftUI에서는 UIKit의 UITextField 대신에 TextField라는 View를 사용합니다. TextField를 사용하다 보면 기존에 UITextFieldDelegate의 기능이 필요할 때가 (아직까지는) 많습니다. SwiftUI에서 UITextField를 사용할 수 있게

UIViewRepresentable를 정의할 수 있어요. 

 

UIViewRepresentable에 대한 자세한 설명은 아래 포스팅 참조

2023.08.20 - [SwiftUI] - [SwiftUI] UIKit 사용을 위한 UIViewRepresentable 이해하기

[SwiftUI] UIKit 사용을 위한 UIViewRepresentable 이해하기

 

세 개의 TextField가 한 화면에 있는 UI를 만들다가 키보드의 리턴을 누르면 다음 텍스트필드로 포커스를 이동하는 로직을 추가하면 좋겠다는 생각이 (갑자기) 들었습니다.

첫 번째 TextField는 숫자만 입력 받게되고, 숫자 패드는 리턴 버튼이 없기 때문에 done 버튼을 추가해 주어야 하는데요, 이때 UIKit의 Toolbar를 이용하면 됩니다

 

UIViewRepresentable를 채택하는 NumberPadTextField 구조체를 하나 선언해 줍니다

함수를 하나 추가해줘야 하는데

class Coordinator: NSObject, UITextFieldDelegate {
	var parent: NumberPadTextField
    
    init(_ textField: NumberPadTextField) {
    	self.parent = textField
	}
}

NumberPadTextField 내부에 있는 Coordinator 객체 내부에 추가해 주어도 되고 NumberPadTextField.Coordinator 익스텐션으로 빼도 됩니다.

 

extension NumberPadTextField.Coordinator {
    func addDoneButton(textField: UITextField) {
        let toolbar = UIToolbar()
        toolbar.sizeToFit()
        
        let space = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let doneButton = UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(doneButtonTapped))
        
        toolbar.items = [space, doneButton]
        textField.inputAccessoryView = toolbar
    }
    
    @objc func doneButtonTapped() { }
}

UIKit을 사용하기 위해 Coordinator에 추가해 주었습니다. UIKit과 동일하게 UIToolbar을 사용해 추가해 주면 됩니다.

 

func makeUIView(context: Context) -> UITextField {
    let textField = UITextField(frame: .zero)
    textField.delegate = context.coordinator
    textField.keyboardType = .numberPad
    context.coordinator.addDoneButton(textField: textField)
    
    return textField
}

makeUIView에서 addDoneButton을 호출해서 UITextField에 적용시켜주면 됩니다. 

이때 context는 해당 커스텀 뷰의 타입이에요 즉 NumberPadTextField가 되겠죠? 그리고 이 NumberPadTextField의 Coordinator의 addDoneButton 파라미터로 textField를 전달해 줍니다. 해당 텍스트 필드를 눌러 키보드를 활성화 시키면 toolbar와 done 버튼이 추가된 것을 볼 수 있습니다!