[iOS/Swift] Navigation Bar에 Search Bar 예쁘게 넣는 법

UINavigationController에 SearchBar 넣는 방법

안녕하세요!

오늘은 UINavigationController의 Navigation Bar에 Search Bar를 예쁘게 넣는 방법에 대해서 알아보겠습니다! 

왜 굳이 예쁘게 라고 하냐구요? 다 이유가 있습니다. 

 

제가 만들고 싶은 상단의 네비게이션 바 디자인은 아래과 같은 스타일이었어요. 

백버튼과 같은 레벨의 높이에 위치하는 것 인데요. 

 

대충 이런 모양으로 만들고 싶었음

 

그런데 일반적으로 많이 쓰이는 방법인 Navigation Controller에 UISearchController를 넣어주는 방식으로 만들어보니 모양이 조금 다르더라구요. 

 

Navigation Controller에 UISearchController 넣기 (많이 사용)

//ViewController 내에서

let searchCon = UISearchController()
self.navigationItem.searchController = searchCon

이렇게 백버튼과 완벽히 정렬되지 않고 아래에 달리게 된다

포커스 시에는 이렇게 백버튼이 가려지게 된다(실제로는 커서가 잡혀있음) 

 

 

 

 

 

NavigationItem 에 UISearchBar 넣어서 만들어보기

 

어떻게 할까 하다가 NavigationBar의 아이템으로 넣어줘 보았어요. 

let searchBar = UISearchBar(frame: CGRect(x: 0, y: 0, width: width 200, height: 0))
searchBar.placeholder = "띄어쓰기로 복수 입력이 가능해요"
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: searchBar)

 

모양은 마음에 들어요! 백 버튼과 정확하게 얼라인이 되네요! 그런데...

인스턴스를 만들어 줄 때, 가로길이를 200으로 줬는데요. 이런식으로 가로 길이를 정해버렸더니 웬걸!!! 

백버튼과 알 수 없는 미묘한 거리감..

이게 우측 바 아이템으로 넣는거다 보니까 옆으로 치우쳐져 있더라구요. 아,, 안돼!!! 그리고 고정 넓이를 해 버리면 여러 디바이스 넓이에 대해 반응을 하지 못할테니 걱정도 되었어요. 

 

그래서 화면의 넓이를 구하고 거기에서 버튼 크기만큼 빼주기로 했어요.

        var bounds = UIScreen.main.bounds
        var width = bounds.size.width //화면 너비
        let searchBar = UISearchBar(frame: CGRect(x: 0, y: 0, width: width - 28, height: 0))
        searchBar.placeholder = "띄어쓰기로 복수 입력이 가능해요"
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: searchBar)

 

이렇게 해서 원하는 만큼 디자인이 나와 주었어요! 기분이 좋은데요?? 

야호~ 예뻐졌다!

주의할 점 ⚠️

UISearchBar와 UISearchController를 사용하다보면 Delegate 와 DataSource를 쓰게 되는데

당연한 얘기겠지만 UISearchBar와 UISearchController의 Delegate 내의 내장된 함수들이 약간씩 다르다.

그래도 다 비슷비슷 하긴 하지만...

혹시 모르니 UISearchBarDelegate 공식문서 주소를 남겨두겠다!

Apple Developer Documentation

 

 

---

 

도움이 되셨길 바랍니다! 혹시 궁금한 점이나 내용에 수정해야 할 부분이 있다면 언제든 댓글 주세요.

더 좋은 방법을 알려주셔도 너무 감사하겠습니다!