[Swift] Custom Navigation Bar 만들기

 

오늘의 목표 : 상단 Navigation Bar 만들기

 

실제로 앱을 만들다 보면 swift에서 기본으로 제공하는 Navigation Bar 보다는 커스텀한 네비 바를 쓸 일이 많다

자주 쓰는 기능인만큼 또 헤매지 않기 위해 커스텀 네비게이션 바 만들기 정리!

초기 세팅

스토리보드에 간단하게 Navigation Controller와 커스텀 네비 바를 달을 view controller 를 연결시켜준 상태에서 시작한다

예제에서 Navigation Bar에 달고자 하는 컴포넌트는 서치 바 + 오른 쪽 버튼 두개이다.

해당 컴포넌트를 추가한 view를 만들고 해당 view를 navigation bar에 추가해 줄 것이다.

커스텀 네비게이션 뷰 추가 함수

import UIKit

extension UIViewController {
    // MARK: - Custom Navigation Bar
    
    func addSearchNavigationBar(searchBarText: String = "", firstButtonImageName: String, secondButtonImageName: String) {
        // 커스텀 네비 바의 배경이 될 UIView
        let customView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width - 20, height: 44))
		
        // 서치 바
        let searchBar = UISearchBar(frame: CGRect(x: 0, y: 0, width: customView.frame.width - 80, height: 44))
        searchBar.placeholder = searchBarText
        customView.addSubview(searchBar)
		
        // 첫번째 버튼
        let firstButton = UIButton(type: .system)
        firstButton.setImage(UIImage(systemName: firstButtonImageName), for: .normal)
        firstButton.tintColor = .black
        firstButton.frame = CGRect(x: customView.frame.width - 80, y: 0, width: 40, height: 44)
        customView.addSubview(firstButton)
		
        // 두번째 버튼
        let secondButton = UIButton(type: .system)
        secondButton.setImage(UIImage(systemName: secondButtonImageName), for: .normal)
        secondButton.tintColor = .black
        secondButton.frame = CGRect(x: customView.frame.width - 40, y: 0, width: 40, height: 44)
        customView.addSubview(secondButton)

        self.navigationItem.titleView = customView
        self.navigationController?.navigationBar.backgroundColor = .white
      }
    
}

비슷한 형태의 navigation bar를 반복해서 사용하기 위해 UIViewController 의 extension 파일을 별도로 만들어 그 안에 함수를 만들었다.

(height가 44인 이유는 iPhone의 status bar 기본 높이가 44 이기 때문)

 

이제 실제 viewcontroller 파일에서는 간단하게 viewDidLoad() 안에 함수를 호출해주기만 하면 된다.

함수가 인자로 search bar 의 플레이스 홀더에 들어갈 스트링과 버튼들의 시스템 네임을 받고 있기 때문에 해당 값들을 넣어준다.

ViewController 파일

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        addSearchNavigationBar(searchBarText: "검색어를 입력하세요", firstButtonImageName: "star", secondButtonImageName: "cart")
    }
}

결과물

비교적 간단하다!

오른쪽은 좀 더 확실히 어떻게 구현되는지 확인하기 위해 서치바와 버튼마다 배경색을 설정한 버전이다.

어디까지가 네비 바인지 보기 위해 배경 뷰에도 색을 넣어서 구분했다.

 

height 나 width 값을 조정해서 다른 컴포넌트들을 넣는 것도 가능하다.