iOS ) NavigationController BackButton 색상, 텍스트 바꾸기

안녕하세요 :) Zedd입니다.

오늘은 네비게이션 뒤로가기 버튼의 색깔과 텍스트를 바꿀 수 있는 방법을 알려드리겠습니다!

뒤로가기 버튼은

이거죠?

이 버튼의 색깔과 텍스트를 바꾸어보겠습니다.

backbutton이 생기는 ViewController를 SecondViewController.

SecondViewController를 호출하는 ViewController를 FirstViewController라고 하겠습니다.

그럼 순서는 FirstViewController -> SecondViewController push 

=> SecondViewController에 backbutton생김

BackButton 색상바꾸는 법

SecondViewController의 viewDidLoad()에

self.navigationController?.navigationBar.tintColor = .green

위 코드를 넣어주세요.

UIColor다음의 색상은 자신이 원하는 색을 넣어주세요. 

저는 초록색으로 바꾸어보겠습니다.

그리고 실행하면!!!

이렇게 색상이 바뀌게 됩니다.

BackButton Text바꾸는 법

이제 텍스트를 바꾸어볼까요?

이 Back이라는 텍스트는 '기본값'으로 생각하시면 될 것 같아요.

첫번째 뷰의 네비게이션 아이템의 타이틀을 주지않으면 

기본값으로 Back이 들어가게 되는거죠.

현재는 첫번째뷰 네비게이션 아이템 타이틀부분에 아무것도 안적혀있죠?

저기에

라고 타이틀을 준 뒤 실행시키면, 

이렇게 된답니다. ㅎㅎ

아 나는 저 타이틀이랑 상관없이 텍스트 주고싶어; 

또는 저 텍스트를 없애고 싶어!

하시는 분들은,

역시나 SecondViewController의 ViewDidLoad()부분에

self.navigationController?.navigationBar.topItem?.title = ""

저는 그냥 없애봤습니다. 원하시는 텍스트를 넣고싶으시면 ""안에 

원하시는 텍스트를 넣어주세요.

그리고 실행하게 되면!!

짠 ㅎㅎ 이렇게 텍스트가 없어졌습니다. 

backBarButtonItem 사용하기

이렇게 backButton이 "실제로 나오는" SecondViewController에서 

self.navigationController?.navigationBar.topItem?.title = ""

이런 코드를 호출해줘도 동작하긴 하지만...별로 아름답지는 않습니다.

self.navigationController?.navigationItem.backBarButtonItem

이렇게 backBarButonItem이라는 직관적인 프로퍼티가 있거든요.

let backBarButtonItem = UIBarButtonItem(title: "Zedd", style: .plain, target: self, action: nil)

self.navigationItem.backBarButtonItem = backBarButtonItem

이런식으로 사용하면 됩니다.

그럼 이런식으로 나오게 됩니다.

backBarButtonItem을 사용하실 때 주의하실 점은 

let backBarButtonItem = UIBarButtonItem(title: "Zedd", style: .plain, target: self, action: nil)

self.navigationItem.backBarButtonItem = backBarButtonItem

이 코드를 BackButton이 나오는 SecondViewController에서 호출하면 안됩니다. 

FirstViewController에서 지정해줘야한다는 사실을 잊지마세요!!!

let backBarButtonItem = UIBarButtonItem(title: "Zedd", style: .plain, target: self, action: nil)

backBarButtonItem.tintColor = .gray

self.navigationItem.backBarButtonItem = backBarButtonItem

이렇게 tintColor까지 지정 할 수 있습니다.

결과 :