[iOS / Swift] UINavigationBar를 구현해보자.

UINavigationBar란

UINavigationBar란, 화면 상단에 위치하는 네비게이션 바를 나타내는 UI 요소.

UINavigationController 없이도 독립적으로 사용할 수 있지만, 일반적으로 네비게이션 흐름을 관리할 때,

UINavigationController와 함께 사용된다.

이 문서에는 UINavigationBar를 직접 생성하고 뷰에 추가하여 사용자 정의한 네비게이션 바를 구성한다.

 

 

UINavigationBar를 구현해보자.

UINavigationController를 사용중이지 않은 경우

 

1. Navigation Bar를 생성

2. Navigation Item을 생성

3. Navigation Bar에 Item 추가

 

위의 세가지 과정을 거치게 된다.

 

1. NavigationBar 생성

//Navigation Bar 생성
let navigationBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 44))
view.addSubview(navigationBar)

위 코드에서 CGRect는 iOS에서 사각형을 나타내는 구조체이다.

총 4개의 파라미터가 있는데, 각 파라미터의 의미는 다음과 같다.

 

• x : 사각형의 왼쪽 경계선이 화면의 가로 방향에서 시작하는 위치 
• y : 사각형의 위쪽 경계선이 화면의 세로 방향에서 시작하는 위치 
• width : 사각형의 가로 길이
• height : 사각형의 높이

그럼 위의 코드의 의미는,

 

x: 0

사각형이 부모 뷰의 왼쪽 끝에 맞춰져 있음

 

y: 0

사각형이 부모 뷰의 위쪽 끝에 맞춰져 있음

 

width: view.fram.width

부모뷰의 전체 너비와 같음. 즉 화면의 양쪽 끝에 가득 차도록 설정되어있음. 따라서 화면의 사이즈가 바뀌어도 

항상 양쪽 끝을 가득 채운 상태일 것임.

 

height: 44

높이를 44로 설정함.

44는 iOS에서 표준 네비게이션의 높이.

애플의 디자인 가이드 라인에 따라 대부분의 네비게이션 바는 이 높이를 사용함.

 

 

2. Navigation Item을 생성

// Navigation Item 생성

// Navigation Bar 가운데의 title
let navigationItem = UINavigationItem(title: "홈")

// Navigation Bar 왼쪽의 버튼
let leftButton = UIBarButtonItem(title: "이전", style: .plain, target: self, action: #selector(previousButtonTapped))
navigationItem.leftBarButtonItem = leftButton

// Navigation Bar 오른쪽의 버튼
let rightButton = UIBarButtonItem(title: "다음", style: .plain, target: self, action: #selector(nextButtonTapped))
navigationItem.rightBarButtonItem = rightButton


//버튼이 눌렸을 때 실행될 코드.
@objc
func previousButtonTapped() {
     여기에 버튼이 눌렸을 때 실행될 코드 구현
}
@objc
func nextButtonTapped() {
     여기에 버튼이 눌렸을 때 실행될 코드 구현
}

 

각 파라미터의 의미를 보자면,

• title: 표시될 텍스트
• style: 버튼의 스타일 설정
• target: self는 버튼이 눌렸을 때, 호출될 액션이 현재 클래스(self)에 정의되어 있음을 나타냄
• action: #selector(함수이름)은 버튼을 눌렀을때 호출될 메서드를 지정

 

3. Navigation Bar에 Item 추가

// Navigation Bar에 Item 추가
navigationBar.setItems([navigationItem], animated: false)

 

 

결과물

 

 

 

전체 코드 흐름

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Navigation Bar 생성
        let navigationBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 44))
        view.addSubview(navigationBar)

        // Navigation Item 생성
	let navigationItem = UINavigationItem(title: "홈")
	let leftButton = UIBarButtonItem(title: "이전", style: .plain, target: self, action: #selector(previousButtonTapped))
	navigationItem.leftBarButtonItem = leftButton
	let rightButton = UIBarButtonItem(title: "다음", style: .plain, target: self, action: #selector(nextButtonTapped))
	navigationItem.rightBarButtonItem = rightButton

        // Navigation Bar에 Item 추가
        navigationBar.setItems([navigationItem], animated: false)
    }

    //버튼이 눌렸을 때 실행될 코드.
	@objc
	func previousButtonTapped() {
     	여기에 버튼이 눌렸을 때 실행될 코드 구현
	}
	@objc
	func nextButtonTapped() {
    	여기에 버튼이 눌렸을 때 실행될 코드 구현
	}
}

 

 

 

UINavigationController를 사용중인 경우

UINavigationController를 사용중인지 아닌지는 SceneDelegate에서 확인해보면 된다.

 

주의사항

UINavigationController를 사용중이라면, 구현은 더더욱 쉬워진다.

위에서 UINavigationController를 사용중이지 않을 때의 2번, Item 생성만 해주면 되기 때문이다.

 

왜냐하면, UINavigationController는 이미 UINavigationBar를 제공하기 때문이다.

 

따라서, UINavigationBar를 생성할 필요가 없다.

우리가 또 생성하게 되면 중복된 네비게이션 바가 생성되거나, 시스템의 네비게이션 관리 흐름과 충돌할 수 있기 때문이다.

또한 view.addSubview 또한 필요없다.

오히려 작성시 불필요한 추가로 간주되어 레이아웃이나 런타임 충돌이 발생할 수 있다.

 

또한, 위에서 나왔던 3번 navigationBar.setItems도 필요없다.

 

다만 UiNavigationController를 사용했을 때는, 가운데 타이틀을 설정할 때,

let navigationItem = UINavigationItem(title: "홈")
이렇게 코드를 작성하는 것이 아닌,

self.title = "Home"
이렇게 작성해야 한다.

 

 

즉, 모든것은 UINavigation Controller가 관리한다. 따라서 우리는 그저 아래의 코드와 같이 item들만 추가해주면 된다.

//가운데 title
self.title = "Home"

//왼쪽 버튼
let leftButton = UIBarButtonItem(title: "이전", style: .plain, target: self, action: #selector(previousButtonTapped))
navigationItem.leftBarButtonItem = leftButton

//오른쪽 버튼
let rightButton = UIBarButtonItem(title: "다음", style: .plain, target: self, action: #selector(nextButtonTapped))
navigationItem.rightBarButtonItem = rightButton

 

 

결과물

 

 

 

타이틀의 폰트 및 크기 색상 설정

//편집버튼 설정
let editBtn = UIBarButtonItem(title: "편집", style: .plain, target: self, action: #selector(editBtnTapped))
// 타이틀 폰트 크기 및 색상 설정
let leftAttributes: [NSAttributedString.Key: Any] = [
     .font: UIFont.systemFont(ofSize: 20), // 폰트 크기 설정
     .foregroundColor: UIColor.green       // 텍스트 색상 설정
]
editBtn.setTitleTextAttributes(leftAttributes, for: .normal)
navigationItem.leftBarButtonItem = editBtn

 

해당 코드들을 사용하여 타이틀들의 크기와 색상을 변경할 수 있다.