[iOS] 내비게이션 바 커스터마이징 하기

안녕하세요, HoonIOS입니다. :)

 

정말 오랜만에 글을 쓰는 거 같습니다.... ㅠㅠ

취준생이라 면접 준비도 좀 하고 그러느냐 포스팅을 못했네요

 

이번에는 내비게이션 바를 커스텀하는 법에 대해 배워보려고 합니다.

 

 내비게이션 커스텀하기

 

내비게이션 컨트롤러는 내비게이션 바 버튼 아이템, 내비게이션 타이틀 부분만 커스텀할 수 있습니다.

 

아래 내비게이션 사진을 봐보겠습니다.

customNC앞에 파란색으로 칠해져있는 부분이 내비게이션 바입니다.

해당 부분은 모든 뷰컨트롤러에서 같이 사용을 하고 있어 커스텀을 따로 할 수 없습니다.

 

반면에 내비게이션 바 버튼 아이템, 내비게이션 타이틀 부분은 화면마다 설정을 할 수 있으므로 커스텀하여 화면마다 다르게 설정을 해줄 수 있습니다.

 

그럼 내비게이션 타이틀 영역부터 커스텀을 해보겠습니다.

 

 내비게이션 타이틀 커스터마이징

내비게이션 타이틀을 커스터마이징 하기 위해서는 iOS에서 titleView속성을 지원합니다.

 

titleVIew속성은 UIView타입으로 문자열 기반의 타이틀을 뷰기반으로 바꿀 수 있습니다.

아마 이 부분에서 많은 분들이 아!!! 이러실겁니다. 왜냐하면 UIView타입으로 되어있기 때문에 레이블, 버튼, 이미지 뷰 등 다양한 것을 제약 없이 타이틀에 표현할 수 있기 때문이죠,

단, 내비게이션 바 사이즈를 고려해야 하기 때문에 크기를 그냥 무작정 잡으시면 안됩니다.

 

그럼 titleView에 접근을 하기 위해서는 self.navigationItem.titleView로 접근을 하면 됩니다.

즉 뷰에다가 원하는 것을 만들고 그 뷰를 titleView에 넣어주면 됩니다.

 

어떠신가요 뭔가 엄청 간단하죠! 그럼 한번 구현을 해보겠습니다.

 

 구현하기

 

※ 구현하기

 

타이틀 뷰 영역을 확인하기 위해서 내비게이션 아이템의 타이틀 뷰에 브라운 색과 레이어를 굵게 표현한 뷰를 넣어주도록 해 타이틀 뷰 구간을 한번 살펴보겠습니다.

 

1. 스토리보드에서 내비게이션 뷰 컨트롤러를 설정해줍니다.

 

 

2.. swift파일로 가서 내비게이션 타이틀을 설정을 해줍니다.

 

우선 저는 따로 타이틀 뷰를 꾸며주는 영역을 따로 함수 처리를 해주었습니다.

 

왜냐하면 viewDidLoad에 한 번에 많은 코드를 넣으면 가독성이 떨어지기 때문이죠.

 

3. 이제 꾸며준 코드를 한번 살펴보겠습니다.

 

위 코드를 보면 UIView를 생성해 frame으로 위치를 잡아주고 해당 뷰의. backgroundColor, layer.borderWidth를 설정해주었습니다.

 

마지막 코드인 self.navigationItem.titleView는 뒤에서 설명을 하겠습니다.

 

4. 이 해당 뷰를 내비게이션 타이틀 뷰에 넣어주겠습니다.

 

이 부분이 내비게이션 타이틀 커스터마이징 한 부분의 핵심입니다. :)

 

앞에서 말씀을 드린 것처럼 내비게이션 바의 titleView는 UIView로 되어있다고 말씀을 드렸는데요,

따라서. navigationItem.titleView = UIView() 형태로 값을 넣어줬습니다.

 

5. 결과를 한번 보겠습니다.

 

가운데 내비게이션 타이틀에 해당 뷰가 들어간 것을 확인할 수 있습니다.

 

아 가운데 라벨은 제가 서브 뷰로 해서 구분할 수 있게 추가해줬습니다. 히히히

 

이제 그다음으로 내비게이션 바에는 양 옆에 바 버튼 아이템이 존재하는데요 해당 부분을 한번 살펴보겠습니다.

 

 내비게이션 바 버튼 아이템 커스터 마이징

 

내비게이션 바 버튼 아이템 영역은 액션 메서드를 지정해야 하므로 UIBarButtonItem(barButtonSystemItem:target:action:)으로 설정을 해야 합니다.

 

내비게이션 바 버튼 아이템은 하나만 있는 게 양쪽에. leftButtonItem, 과. rightButtonItem으로 나눠져 있습니다.

 

액션 메서드를 설정해주는 UIBarButtonITem(barButtonSystemItem:,target:,action:)의 매개변수를 한번 살펴보겠습니다.

 

1. barButtonSystemItem - 바 버튼의 타입을 지정합니다. 일부 특정 타입에 미리 준비된 아이콘을 제공하므로 제공하는 바버튼 타입을 지정해주면 됩니다.
2. target - 호출할 메서드가 있는 인스턴스입니다.
3. Action - 버튼을 클릭했을 때 호출하는 메서드입니다.

바 버튼 아이템은 UIBarButtonItem(customView: UIView)같이 초기화 메서드도 제공을 합니다. 이 초기화 메서드를 통해 뷰 객체에 바 버튼을 생성할 수 있습니다.

 

한번 예를 들어보면

let v = UIView(frame:CGRect(~))

 

let rbtn = UIBarButtonItem(customVIew: v)

self.navigationItem.rightBarButtonItem = rItems

 

let label = UILabel(frame:CGRect(~))

 

v.addSubView(label)

 

이런 식으로 코드를 보면은 UIView(frame:)을 통해서 UIView를 생성해주고 해당 뷰안에 UILabel을 넣어 위치를 잡아준 뷰를 생성해주었습니다. 

또 해당 뷰를 UIBarButtonItem(customView:)를 통해서 뷰 객체를 넣은 바 버튼을 생성할 수 있고. rightBarButtonItem을 통해 오른쪽에 있는 barButtonItem에 넣어줬습니다.

 

 

그럼 한번 구현해보겠습니다.

 

 구현하기

 

※ 구현하기

 

이번에는 가운데 타이틀 뷰를 그냥 내버려두고 양쪽에 leftBarButtonItem과 rightBarButtonItem에 view를 넣어서 영역을 확인해보겠습니다.

 

1. 이번에는 앞에서 했던 setNC 말고 setNCBI함수를 따로 지정해 주겠습니다.

 

 

2. 왼쪽 영역인 leftBarButtonItem에 해당하는 영역에 빨간색 뷰를 넣어주겠습니다.

 

제일 먼저 뷰의 위치랑 뷰의 backgroundColor색깔을 빨간색으로 잡아주었습니다.

 

3.  UIView를 UIBarButtonItem으로 만들어주겠습니다.

 

UIBarButtonItem(customView:)를 통하여 초기화 메서드를 뷰 객체에 바 버튼을 생성할 수 있다고 했는데요,

따라서 위에서 만들어준 UIView객체인 view를 UIBarButtonItem으로 만들어주었습니다.

 

4. 이젠 이 바 버튼 아이템을 넣어주겠습니다.

 

navigationItem.leftBarButtonItem의 속성을 통해 내비게이션 아이템의 왼쪽 barButtonItem에 해당 바 버튼 아이템 객체를 넣어줬습니다.

 

5. 이제 결과를 한번 보겠습니다.

 

아 이게 밖에 layer을 안 잡아줘서 구분이 안 되가지고 저는 따로 잡아주었습니다. :)

 

이제 오른쪽 버튼을 잡아주겠습니다.

 

6. 앞에랑 같이 frame과 backgroundColor를 잡아주고 borderWidth를 잡아줬습니다.

 

여기서는 앞에랑 다른 거는 색깔, 변수명 정도? 빼고는 다 같습니다. ㅎㅎ

 

7. 이제 이것을 UIBarButtonItem객체로 만들어줘야겠네요.

 

 

8. 이 바 버튼 아이템 객체를. rightBarButtonItem으로 넣어주면 됩니다.

 

 

9. 이제 결과를 한번 봐보겠습니다.

 

 

어떤가요?

 

결과적으로 보면 가운데 타이틀 뷰는 양쪽 바 버튼 아이템을 적용하고 나머지 값을 적용하게 됩니다.

위 결과처럼 titleView가 작아지는 것을 확인할 수 있죠 :)

 

 

내비게이션 바에 있는 titleView, rightBarButtonItem, leftBarButtinItem은 셋다 UIView가 넣을 수 있는 형태로 되어 있기 때문에 커스텀하기에 가장 적절하고 방법을 쉽게 찾을 수 있습니다.

 

해당 코드:  https://github.com/LEEbyeonghoon2/navigation_custom_practice