[iOS] Google Place Autocompletion ( 검색 자동완성 )

안녕하세요 이번에는 Google Autocompletion을 사용하고 적용한 방법을 소개해 보려고 합니다.

이 서비스를 사용하게 된것은 날씨 어플을 만들면서 도시검색을 하는데 이걸 어떻게 해야하나 생각을 했습니다. 당시에는 애플에서 제공하는 MKLocalSearch 라는 것을 모르고 적용을 했는데 이때문에 앱이 좀 무거워진것 같기는 합니다. 혹시 방법을 몰라서 찾다가 Google Place Autocompletion 찾으신분은 MKLocalSearch 를 추천드립니다.

공식문서의 적용방법이 적힌 링크입니다.

Get Started | Places SDK for iOS | Google Developers

그럼 한번 적용해 보겠습니다.

• 적용하는 방법에는 3가지 방법이 있습니다
  • Add a full-screen control
  • Add a results controller
  • Use a table data source
• 제가 사용한 방법은 커스텀 Search Bar를 사용했기 때문에 3번째 방법을 사용했습니다.
• 3번째 방법은 커스텀 Search Bar와 테이블 뷰를 사용해서 데이터를 출력하는 방법입니다. 연결만 잘해주면 특별히 문제될 부분이 없기때문에 간편하다는 장점이 있습니다

적용 순서

1. 먼저 구글 서비스 이기때문에 API키를 받아야합니다 받는 방법과 초기세팅은 아래의 링크에 있습니다
2. 이 세팅은 API키 받고 키 입력하고 코코아팟을 세팅하면 끝나기 때문에 건너 뛰도록 하겠습니다

Get Started | Places SDK for iOS | Google Developers

• 위의 API와 코코아팟 세팅을 끝내시면 아래의 링크에서 Use a table data Source를 선택하고 진행 하시면 됩니다.

  Place Autocomplete | Places SDK for iOS | Google Developers

3. 뷰컨트롤러에 구글의 데이터소스를 입히는 방법입니다. 먼저 뷰컨트롤러에 데이터 소스와 델리게잇을 설정해 줍니다.

extension SearchViewController: GMSAutocompleteTableDataSourceDelegate, UISearchBarDelegate  { }

4. 작성해야 하는 메서드가 자동으로 호출되기 때문에 호출하고 작성해줍니다.

• 아래의 코드는 제가 날씨어플을 구성하며 적용한 예시 코드입니다.

    func didUpdateAutocompletePredictions(for tableDataSource: GMSAutocompleteTableDataSource) {
            // Turn the network activity indicator off.
            UIApplication.shared.isNetworkActivityIndicatorVisible = false
            // Reload table data.
            tableView.reloadData()
  
        }
  
          func didRequestAutocompletePredictions(for tableDataSource: GMSAutocompleteTableDataSource) {
            // Turn the network activity indicator on.
            UIApplication.shared.isNetworkActivityIndicatorVisible = true
            // Reload table data.
            tableView.reloadData()
          }
  
    // 여기서 사용자가 검색을 마치고 원하는 셀을 클릭했을때 호출됩니다. 
          func tableDataSource(_ tableDataSource: GMSAutocompleteTableDataSource, didAutocompleteWith place: GMSPlace) {
                self.delegate?.userSelected(newLocation: Location(name: place.name, latitude: place.coordinate.latitude, longitude: place.coordinate.longitude))
                self.dismiss(animated: true, completion: nil)
          }
  
          func tableDataSource(_ tableDataSource: GMSAutocompleteTableDataSource, didFailAutocompleteWithError error: Error) {
            print("Error: \(error.localizedDescription)")
          }
  
          func tableDataSource(_ tableDataSource: GMSAutocompleteTableDataSource, didSelect prediction: GMSAutocompletePrediction) -> Bool {
            return true
          }
  
        func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
            tableDataSource.sourceTextHasChanged(searchText)
          }

5. 그리고 데이터 소스를 테이블뷰에 연결해 주어야 합니다.

• 다음과같이 델리게잇과 데이터 소스를 서로 연결해 주었습니다.

    customSearchBar.delegate = self
    tableDataSource = GMSAutocompleteTableDataSource()
            tableDataSource.delegate = self
            tableView = UITableView(frame: CGRect(x: 0, y: 105, width: self.view.frame.size.width, height: self.view.frame.size.height - 44))
                tableView.delegate = tableDataSource
                tableView.dataSource = tableDataSource

6. 서치바에서 검색어를 필터 하는 방법은 GMSAutocompleteFilter 를 이용합니다.

let filter = GMSAutocompleteFilter()
        filter.type = .city
        tableDataSource.autocompleteFilter = filter
// 이렇게 필터를 지정해두면 도시이름만 자동완성으로 나오게 됩니다. 

7. 상세 설정이 필요한경우 공식문서에 보면 상세설정 키워드를 확인하실수 있습니다.

// tableView 속성 편집
        tableView.backgroundColor = .clear
        tableView.separatorStyle = .none
        tableDataSource.tableCellBackgroundColor = .clear
        tableDataSource.tableCellSeparatorColor = .clear
        tableDataSource.primaryTextHighlightColor = .white

        // searchBar 속성 편집
        customSearchBar.barTintColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
//저는 이런식으로 설정했습니다.