[swift] QuickLayout을 사용하여 자동 완성 기능 구현하기

17 Nov 2023

swift

자동 완성 기능은 사용자가 입력한 정보를 기반으로 가능한 선택지를 제시하는 기능입니다. 이번에는 Swift 언어를 사용하여, QuickLayout 라이브러리를 이용하여 자동 완성 기능을 구현하는 방법에 대해 알아보겠습니다.

QuickLayout이란?

QuickLayout은 iOS 개발을 위한 간편한 Auto Layout 라이브러리입니다. Auto Layout을 코드로 작성하는 과정을 단순화하고, 더 쉽고 빠르게 레이아웃을 구성할 수 있도록 도와줍니다. QuickLayout을 사용할 때는 Swift Package Manager를 통해 종속성을 가져오는 것으로 시작합니다.

자동 완성 기능 구현하기

QuickLayout을 설치합니다.
```
import QuickLayout
```
필요한 UI 요소들을 추가합니다. 여기서는 UITextField와 UITableView를 사용하여 자동 완성 기능을 구현해 보겠습니다.
```
let textField = UITextField()
let tableView = UITableView()
```

UITextFieldDelegate를 채택하여 UITextField의 입력 이벤트를 처리합니다.

class ViewController: UIViewController, UITextFieldDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        textField.delegate = self
    }
       
    // 입력 시작 시 호출되는 메소드
    func textFieldDidBeginEditing(_ textField: UITextField) {
        // 여기서는 실제 데이터를 사용하지 않고, 임의의 선택지를 생성하겠습니다.
        let suggestions = ["Apple", "Banana", "Cherry", "Durian", "Elephant"]
           
        // 실제로는 입력어에 맞는 데이터를 검색하고, 검색 결과를 이용하여 선택지를 생성해야 합니다.
           
        // UITableView를 이용하여 선택지를 표시합니다.
        tableView.reloadData()
        // 선택지 표시 창을 화면에 보여줍니다.
        tableView.isHidden = false
    }
       
    // UITextField 입력이 변경될 때마다 호출되는 메소드
    func textFieldDidChangeSelection(_ textField: UITextField) {
        // 여기서는 필터링 로직을 제공하지 않고, 모든 선택지를 보여줍니다.
        tableView.reloadData()
    }
}

UITableViewDataSource를 구현하여 선택지 목록을 표시합니다.

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return suggestions.count
    }
       
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "suggestionCell")
        cell.textLabel?.text = suggestions[indexPath.row]
        return cell
    }
}

UITableViewDelegate를 구현하여 선택한 선택지를 텍스트 필드에 적용합니다.

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let selectedOption = suggestions[indexPath.row]
        textField.text = selectedOption
           
        // 선택지 표시 창을 화면에서 감춥니다.
        tableView.isHidden = true
    }
}

NSLayoutConstraint를 사용하여 자동 완성 텍스트 필드와 표시 창을 레이아웃합니다.

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
       
    textField.translatesAutoresizingMaskIntoConstraints = false
    tableView.translatesAutoresizingMaskIntoConstraints = false
       
    view.addSubview(textField)
    view.addSubview(tableView)
       
    NSLayoutConstraint.activate([
        textField.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),
        textField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
        textField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
        textField.heightAnchor.constraint(equalToConstant: 50),
          
        tableView.topAnchor.constraint(equalTo: textField.bottomAnchor, constant: 10),
        tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
        tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
        tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20)
    ])
}

이제 QuickLayout 라이브러리를 사용하여 자동 완성 기능을 구현할 수 있습니다. 사용자가 입력을 시작하고 변경할 때마다 텍스트 필드의 입력에 맞는 선택지를 UITableView에서 보여주고, 선택한 선택지를 텍스트 필드에 적용하는 기능을 구현할 수 있습니다.

참고 자료

QuickLayout: https://github.com/huri000/QuickLayout
Apple Developer Documentation: https://developer.apple.com/documentation/
UITableView: https://developer.apple.com/documentation/uikit/uitableview
UITextField: https://developer.apple.com/documentation/uikit/uitextfield