[Swift] Swift navigation bar custom 하는 방법

iOS 개발에는 두 가지 방법이 있는데,

 

1. 스토리보드로 구현

2. 스토리보드 없이 코드로 구현 (programmatically)

모두 정리해 보도록 하겠다.

 

---

1. 스토리보드로 navigation bar custom 하기

 

자 우선 Xcode에서 새 프로젝트를 만들고 navigation bar를 만들 view controller를 선택한다.

 

그리고 오른쪽 아래에 보면

 

 

이렇게 네모 모양으로 화살표 아이콘이 있는데(이게 embed in임) 여기서 Navigation Controller를 눌러준다.

그럼 왼쪽에 컨트롤러가 생기는데 이건 Container View Controller라고 해서 이거 자체가 뭘 display 해주고 하는 건 아니다.

말 그대로 navigation을 도와주는 친구고 우리가 일단 얘를 건드릴 건 없다.

 

 

그럼 이렇게 된 상태에서 원래 vc의 저 윗 부분을 눌러주면 Navigation Item이 선택된다.

여기에 원하는 컴포넌트들을 넣음으로써 네비게이션 바를 커스텀 하게 된다.

 

나는 오른쪽에 Filled 버튼 하나랑 왼쪽에 label 하나를 놓아보도록 하겠다.

 

 

참고로 Xcode 라이브러리 단축키는 Command + Shift + L 이다.

라이브러리를 열고 Filled Button을 드래그해서 네비게이션 바의 오른쪽 부분에 가져다대면 파란색 네모 표시가 뜨면서 올라갈 자리가 표시되는데, 그때 드랍 하면 위 사진처럼 버튼이 제자리에 올라간 걸 볼 수 있다.

 

같은 방법으로 왼쪽에도 label을 올려둔다. 라고 하려고 했는데... 스토리보드에서는 안 올라가지는 걸 깨달았다.

(이렇게 스토리보드에서는 안 되는 게 몇 개 있어서 스토리보드에 어느정도 적응한 다음에는 스토리보드 없이 코드로만 UI 구성하는 방법을 공부하는 게 좋다)

 

그럼 일단 이건 코드로 짤 때 하는 걸로 하고 네비게이션 바의 타이틀을 설정해 보겠다.

 

 

타이틀은 네비게이션 바 부분의 정가운데를 더블클릭하면 설정할 수 있게 이렇게 나온다.

여기에 원하는 타이틀을 적으면 된다.

 

Button은 텍스트를 Next로 바꾸고 배경색을 Yellow로 바꿔보겠다.

 

 

가로로 좀 긴 것 같아서 Size inspector 영역으로 가서 width를 조절해 주겠다.

 

기본적인 UI 구성은 끝!

 

여기에 내가 하고 싶은 것은

next 버튼을 눌렀을 때 새로운 창으로 넘어갔으면 좋겠다.

 

이를 설정하기 위해 View Controller.swift 파일에 이 컴포넌트들을 연결해 주도록 하겠다.

 

인터페이스 빌더의 뷰 컨트롤러를 선택한 상태에서

 

 

요 오른쪽 위의 줄 찍찍 그어져 있는 걸 누르면 Assistant라는 게 나오는데 선택한 뷰 컨트롤러와 연결된 파일을 보여준다.

 

자 그럼 이 상태에서 왼쪽에서 버튼을 선택하고 Control을 누른 채로 오른쪽의 코드 위로 드래그 앤 드랍 해준다.

 

 

우리는 버튼을 눌렀을 때 다른 창으로 이동하는 'Action'을 설정할 거니까 Connection은 액션으로,

Name은 버튼이 눌렸을 때의 동작을 정의하는 거니까 tappedNextButton으로,

Type은 UIButton으로 설정한다.

그리고 Event는 버튼을 딸깍하고 클릭한 후의 상황을 정의하는 Touch Up Inside로 설정한다.

 

사진처럼 설정하고 Connect를 누르면

 

 

이렇게 추가된 것을 볼 수 있다. 코드에서 저 동그란 부분에 마우스를 가져다대면 이 함수와 연결된 컴포넌트가 왼쪽처럼 표시된다.

 

@IBAction func tappedNextButton() {
    // next 버튼을 누르면 나올 화면. 새 뷰 컨트롤러를 생성.
    let nextVC = UIViewController()
    // 기본 view 배경 색 설정.
    nextVC.view.backgroundColor = .systemBackground
        
    // 네비게이션 스택에 nextVC가 push 됨.
    self.navigationController?.pushViewController(nextVC, animated: true)
}

Next 버튼을 누르면 실행될 이벤트를 위와 같이 작성한다.

 

그럼 이렇게 왼쪽 화면에서 next 버튼을 눌렀을 때 오른쪽 화면이 나타날 것이다.

---

2. 스토리보드 없이 코드로 구현 (programmatically)

 

일단 스토리보드 없이 코드로만 구현하려면 No storyboard setting을 해줘야 한다.

 

<No storyboard setting>

 

1. main.storyboard 파일 삭제

2. plist 파일에서 main 써있는 줄 삭제

3. Project TARGETS > General > Deployment Info > Main Interface 부분 삭제해서 빈칸으로 두기

4. 그 다음에 SceneDelegate 파일의 첫 번째 메서드를

 

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    if let windowScene = scene as? UIWindowScene {

        let window = UIWindow(windowScene: windowScene)
        
        // 네비게이션 컨트롤러 생성!
        let navController = UINavigationController()
        let viewController = ViewController()   // <- ViewController.swift 파일의 그 ViewController 클래스를 뜻하는 것.

        // 현재 네비게이션 스택에 있는 VC 배열 값을 설정한 것. (viewController 하나 들어있는 배열로!)
        navController.viewControllers = [viewController]
        // 루트 VC를 네비게이션 컨트롤러로 설정.
        window.rootViewController = navController
            
        self.window = window
        window.makeKeyAndVisible()
    }
}

 

이렇게 변경해 준다. (주석은 이해를 위해 내가 직접단 것.)

** 여기에서 네비게이션 컨트롤러도 생성하는 것!!

 

그리고 스토리보드를 지우면 기본 view의 backgroundColor를 수동으로 직접 설정해 줘야 하기 때문에 viewDidLoad() 안에

 

view.backgroundColor = .systemBackground

 

해당 코드를 추가해 놓고 시작하자. 안 그러면 계속 검정 화면의 시뮬레이터만 보일 것...

 

위의 세팅을 다하고 나면 ViewController.swift 파일에서 

 

1. 커스텀 버튼을 생성

2. 커스텀 네비게이션 바 설정

3. 버튼의 액션 설정

 

만 해주면 완성이다.

 

1번) 커스텀 버튼 생성은 이 글에서 했던 방식처럼 하면 되고,

 

2번) 커스텀 네비게이션 바 설정은 따로 함수로 묶어서 해주면 되는데 여기서 중요한 부분은

 

// 커스텀 버튼을 navigationitem의 right bar button으로 설정!
self.navigationItem.setRightBarButton(UIBarButtonItem(customView: nextButton), animated: true)
        
// 네비게이션 바 타이틀 설정.
self.navigationItem.title = "title"

 

이 부분이다.

 

UIBarButtonItem의 생성자 중에 customView 파라미터가 있는 생성자를 사용하여 customView로 nextButton을 넣어주면 네비게이션 바의 오른쪽 버튼이 이 nextButton으로 설정된다. (참고 : UIButton도 UIView의 일종)

 

++ 추가적으로 네비게이션 바의 색깔(navigation bar color)을 바꾸고 싶다면

또는 네비게이션 바의 타이틀의 속성(navigation bar title size, color)을 바꿔주고 싶다면

 

// navigation bar 색깔, title 색깔 변경.
let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.backgroundColor = UIColor.black
navigationBarAppearance.titleTextAttributes = [
    .foregroundColor: UIColor.white, // 타이틀 색깔 하얀색으로.
    .font: UIFont(name: "Arial", size: 15)! // 타이틀 size 15로.
] // 타이틀 관련해서 설정하고 싶은 속성을 이 [] 배열 안에 다 넣으면 적용되는 형식.
self.navigationController?.navigationBar.standardAppearance = navigationBarAppearance
self.navigationController?.navigationBar.scrollEdgeAppearance = navigationBarAppearance

 

이렇게 UINavigationBarAppearance()를 사용해서 속성을 설정해준다!!

이거 필요할 때 꼭 기억 안 나니까 유심히 봐 두는 게 좋다.

 

3번) 마지막으로 버튼의 액션을 설정해 줘야 하는데,

 

일단 액션을 정의하자.

 

// nextButton을 눌렀을 때 실행되는 메서드.
@objc func tappedNextButton() {
    // next 버튼을 누르면 나올 화면. 새 뷰 컨트롤러를 생성.
    let nextVC = UIViewController()
    // 기본 view 배경 색 설정.
    nextVC.view.backgroundColor = .systemBackground
        
    // 네비게이션 스택에 nextVC가 push 됨.
    self.navigationController?.pushViewController(nextVC, animated: true)
}

 

새 뷰컨트롤러를 만들고, 배경색을 설정하고, pushViewController를 통해 nextVC로 화면 전환을 해 준다.

이렇게 코드적으로 컴포넌트랑 연결할 액션 메서드를 정의할 땐 꼭 앞에 @objc를 적어줘야 한다!! (Object-C의 문법이라서 그렇다나 뭐라나)

 

이 함수와 버튼을 연결하기 위해서는 addTarget이라는 메서드를 사용한다.

viewDidLoad() 안에 해당 코드를 추가해 준다.

 

// 버튼의 액션을 설정.
nextButton.addTarget(self, action: #selector(tappedNextButton), for: .touchUpInside)

 

#selector 하고 괄호 안에 있는 게 바로 위에서 정의한 액션의 이름이다. 이 코드로 tappedNextButton 액션과 nextButton을 연결해 준 것! nextButton을 클릭하면 tappedNextButton 메서드 안의 코드가 실행된다.

 

1번과 2번 방식 모두 같은 화면을 보여줄 것이다.

 

2번 전체 코드 : https://github.com/EunsuSeo01/Swift-Study/tree/main/CustomNavigationBar

GitHub - EunsuSeo01/Swift-Study: 자기주도적으로 Swift 공부하는 레포지토리

 

---

참고 사이트 :

https://localcoder.org/creating-a-navigationcontroller-programmatically-swift 의 Solution 4 (SceneDelegate 부분의 코드)

https://velog.io/@yc1303/ios-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EB%B0%94-%EC%83%89%EC%83%81-%EB%B3%80%EA%B2%BD

https://stackoverflow.com/questions/43706103/how-to-change-navigationitem-title-color

https://stackoverflow.com/questions/9621455/navigation-bar-title-font-size