[UIKit] - NavigationBar에 Item 넣기

 

Navigation Bar에 leftItem과 rightItem을 넣는 걸 예제를 통해 이해해보자.

📢 StoryBoard를 사용하지 않고 코드로 구현!!

 

1️⃣ VC 만들기

 

먼저 ViewController 파일을 만들어준다.

 

class RecordVC: UIViewController{

    override func viewDidLoad() {
        super.viewDidLoad()       
        initView()
    }
    
    func initView(){
        view.backgroundColor = .white  
    }
}

 

 

2️⃣ leftItem 설정

 

Label을 넣어주고 "기록"이라는 text 값을 줬다.

그 다음 UIBarButtonItem에 item을 넣어주면 되는데 이게 뭘까?

 

: navigation bar,  shortcuts bar, toolbar에 배치하기 위한 버튼이라고 한다.

 

정의를 찾아보면 사용자가 정의한 뷰를 포함하는 initializer라고 한다.

custonView를 사용하여 임의의 view를 navigation bar에 추가할 수 있다.

 

func setupNavigationBar() {
    let leftLabel = UILabel()
    leftLabel.text = "기록"
    leftLabel.font = .boldSystemFont(ofSize: 18)
    leftLabel.textColor = .black

    let leftItem = UIBarButtonItem(customView: leftLabel)
    navigationItem.leftBarButtonItem = leftItem
}

 

"기록" item이 잘 나오는 걸 확인할 수 있다.

 

 

3️⃣ rightItem 설정

 

rightItem은 버튼으로 넣어주기 위해 다음과 같은 매개변수를 택했다.

 

 

 

rightItem으로 두 개의 버튼을 넣으려고 하면 rightBarButtonItems를 사용하고 하나의 버튼만 넣으려면 rightBarButtonItem를 사용하면 된다.

 

난 두개의 버튼을 넣으려고 하니 rightBarButtonItems를 사용하였다.

 

func setupNavigationBar() {
    let leftLabel = UILabel()
    leftLabel.text = "기록"
    leftLabel.font = .boldSystemFont(ofSize: 18)
    leftLabel.textColor = .black

    let leftItem = UIBarButtonItem(customView: leftLabel)
    navigationItem.leftBarButtonItem = leftItem

    let folderButton = UIBarButtonItem(image: UIImage(named: "folder_add"), style: .plain, target: self, action: #selector(didTapfolederAddButton))
    let recordButton = UIBarButtonItem(image: UIImage(named: "record_add"), style: .plain, target: self, action: #selector(didTapRecordAddButton))
    folderButton.tintColor = .black
    recordButton.tintColor = .black
    navigationItem.rightBarButtonItems = [folderButton, recordButton]
}
@objc func didTapfolederAddButton(){

}

@objc func didTapRecordAddButton(){

}

 

• imge: 버튼에 표시할 이미지
• style: 버튼의 스타일 지정 (.plain은 평범한 스타일)
• target: 해당 버튼 눌렸을 때 이벤트 받을 대상
• action: 해당 버튼이 눌렸을 때 호출할 메서드

 

두 버튼 item이 잘 나오는 걸 확인할 수 있다.

 

 

 

Navigation Bar에 Item 넣기 참 간단하다~~~~