[UINavigationItem] autolayout을 이용하여 navigation titleView 만들기

이렇게 titleView를 넣으면 

 

 

 

 

left, right 간격이 알아서 적당히 잡힙니다

 

.

 

하지만, 이렇게 left, right spacing을 내가 원하는 만큼 지정해주고 싶으면 어떻게 해야할까요...?!?

저는 100씩 지정해주고 싶습니다..!

 

 

titleView의 width를 "화면의 width값 - 100 *2" 로 지정해줄 수 있겠습니다.

하지만 멀티태스킹 모드에서 뷰사이즈가 계속 변하는 것을 고려해볼때,

위와 값이 고정된 width값을 넣어주면 left, right spacing은 고정이고 flexible하게 네비게이션 타이틀뷰 사이즈가 변하는 효과를 기대할 수 없습니다.


그럴땐 아래와 같이 해줄 수 있습니다. 

window가 생기는 시점인 layoutSubview 함수에서

titleview의 width는 window의 width 값에서 left, right spacing을 각각 빼준 것과 같다!! 이렇게 constraint를 설정해줍니다.

(사실 이렇게 view.window를 써도 괜찮은 방법인지는 잘모르겠어요 😭)

 

 

 

 

 

그럼 원하는 대로 100씩 spacing이 생겼고, 

 

 

 

멀티태스킹에서 화면사이즈를 줄이고 늘려봐도 left, right spacing인 고정이고 

titleview width가 가변적으로 바뀌게 됩니다.

 

 

 

 

아니면 width constraint 대신 left, right constraint를 잡아줄 수도 있겠네요...!! 

  NSLayoutConstraint.activate([
      titleLabel.leftAnchor.constraint(equalTo: self.window!.leftAnchor, constant: 100),
      titleLabel.rightAnchor.constraint(equalTo: self.window!.rightAnchor, constant: -100),
      titleLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
      titleLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor)
  ])

 

 

 

 

그럼 이번엔, titleView에 UILabel대신 UIButton을 넣어보겠습니다.

 

 

 

 

 

 

뷰는 잘나오지만 버튼이 클릭이벤트를 못받는 현상이 발생합니다. 

버튼을 눌러봐도 buttonDidTap 함수가 안불립니다...!! 

 

그 이유는 디버깅해보면 이렇게 titeButton과 titleButton을 담고 있는 navigation titleview의 frame이 다르기 때문입니다...!!! 

 

캡쳐한 링크가 기억이 안나서 출처를 적지 못했습니다ㅠ.ㅠ

 

 

저는 이렇게 해줘도 NavigationTitleButtonView 의 사이즈가 업데이트가 안되어서 

titleButton.sizeToFit()
self.sizeThatFits(titleButton.frame.size)

 

 

setup함수에서 아래 코드를 추가했습니다. 

  NSLayoutConstraint.activate([
      self.topAnchor.constraint(equalTo: titleButton.topAnchor),
      self.bottomAnchor.constraint(equalTo: titleButton.bottomAnchor),
      self.leftAnchor.constraint(equalTo: titleButton.leftAnchor),
      self.rightAnchor.constraint(equalTo: titleButton.rightAnchor)
  ])

 

자식 뷰인 titleButton에 맞춰서 titleButton을 담고있는 컨테이너뷰도 strech될꺼다!! 라고 constraint를 잡아주었습니다.

 

 

setup 후, 여기서 titleButton의 size가 늘어나면 컨테이너뷰도 같이 늘어나게 되겠죠?!?! 

override func layoutSubviews() {
    super.layoutSubviews()
    guard allConstraintsDidSetup else {
        NSLayoutConstraint.activate([
            titleButton.widthAnchor.constraint(equalTo: self.window!.widthAnchor, constant: -100 * 2)
        ])
        allConstraintsDidSetup = true
        return
    }
}

 

 

 

최종 코드는 이렇게 되겠습니다...!! 

 

 

 

 

 

 

 

 

https://github.com/eunjin3786/NavigationTitleViewExample

eunjin3786/NavigationTitleViewExample