UINavigationBar left title & right bar buttons

모든 디자인에서 navigationbar 타이틀 로고가 iOS 기본 형태처럼 center면 참 좋을텐데, 좌측으로 보내고 싶어하시는 클라이언트들도 물론 계신다.

이건 그거에 대한 기록.

 

 

우선 이미지를 navigationbar 타이틀로 쓰려면 view controller에서 아래처럼 써주면 된다

self.navigationItem.titleView = logoView

 

결과 (맑은 하늘색 부분이 로고 이미지가 들어가는 자리) :

 

자 이제 이걸 왼쪽으로 땡겨줄건데, 구글링해보니 titleview 영역에 스택뷰를 넣고 좌측을 빈 공간으로 채우는 형태로 구현하더라.

참고링크: https://stackoverflow.com/a/60870939

let logoView = UIImageView(image: ImageFile.naviBarLogo)

let spacer = UIView()
let constraint = spacer.widthAnchor.constraint(greaterThanOrEqualToConstant: CGFloat.greatestFiniteMagnitude)
constraint.isActive = true
constraint.priority = .defaultLow

let stack = UIStackView(arrangedSubviews: [logoView, spacer])
self.navigationItem.titleView = stack

결과:

 

원하는대로 되었다.

그래서 뿌듯해하며 네비바를 마무리 하기 위해 우측 상단의 설정과 알림 버튼을 추가했는데...

또잉

 

hierarchy 확인해보니 right bar button 영역만큼 left 영역도 잡혀서 titleview가 center 차지하도록 되는 것 같더라

레이아웃 잡을 때 유용한 hierarchy!

 

 

하지만 나는 left bar 영역을 무시하고 title을 거기에 붙여야만 했고.. 그래서 그냥 left bar button 영역을 차지해버리자고 생각하게됨

let logoView = UIImageView(image: ImageFile.naviBarLogo)
logoView.backgroundColor = ColorFile.primary
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: logoView)

결과:

 

 

-끗-