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

이렇게 titleView를 넣으면 

 

	class ViewController: UIViewController {
	override func viewDidLoad() {
	super.viewDidLoad()
	let label = UILabel()
	label.backgroundColor = .lightGray
	label.text = "안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라"
	self.navigationItem.titleView = label
	}
	}

view raw titleView1.swift hosted with ❤ by GitHub

 

 

 

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를 써도 괜찮은 방법인지는 잘모르겠어요 😭)

 

 

	class NavigationTitleView: UIView {
	let titleLabel = UILabel()
	private var constraintsDidSetup = false
	init(frame: CGRect, title: String) {
	super.init(frame: frame)
	setup(with: title)
	}
	required init?(coder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	private func setup(with title: String) {
	titleLabel.text = title
	titleLabel.backgroundColor = .lightGray
	titleLabel.translatesAutoresizingMaskIntoConstraints = false
	self.addSubview(titleLabel)
	}
	override func layoutSubviews() {
	super.layoutSubviews()
	guard constraintsDidSetup else {
	NSLayoutConstraint.activate([
	titleLabel.widthAnchor.constraint(equalTo: self.window!.widthAnchor, constant: -100 * 2),
	titleLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor),
	titleLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor)
	])
	constraintsDidSetup = true
	return
	}
	}
	}
	class ViewController: UIViewController {
	override func viewDidLoad() {
	super.viewDidLoad()
	navigationItem.titleView = NavigationTitleView(frame: .zero, title: "안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라")
	}
	}

view raw titleview2.swift hosted with ❤ by GitHub

 

 

 

그럼 원하는 대로 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을 넣어보겠습니다.

 

 

	class NavigationTitleButtonView: UIView {
	let titleButton = UIButton()
	private var constraintsDidSetup = false
	init(frame: CGRect, title: String) {
	super.init(frame: frame)
	setup(with: title)
	}
	private func setup(with title: String) {
	titleButton.setTitle(title, for: .normal)
	titleButton.setTitleColor(.black, for: .normal)
	titleButton.titleLabel?.lineBreakMode = .byTruncatingTail
	titleButton.backgroundColor = .lightGray
	titleButton.translatesAutoresizingMaskIntoConstraints = false
	self.addSubview(titleButton)
	titleButton.addTarget(self, action: #selector(buttonDidTap), for: .touchUpInside)
	}
	override func layoutSubviews() {
	super.layoutSubviews()
	guard constraintsDidSetup else {
	NSLayoutConstraint.activate([
	titleButton.widthAnchor.constraint(equalTo: self.window!.widthAnchor, constant: -100 * 2),
	titleButton.centerYAnchor.constraint(equalTo: self.centerYAnchor),
	titleButton.centerXAnchor.constraint(equalTo: self.centerXAnchor)
	])
	constraintsDidSetup = true
	return
	}
	}
	required init?(coder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	@objc
	func buttonDidTap() {
	print("버튼이 눌렸다")
	}
	}
	class ViewController: UIViewController {
	override func viewDidLoad() {
	super.viewDidLoad()
	navigationItem.titleView = NavigationTitleButtonView(frame: .zero, title: "안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라안녕하세요 반갑습니다 룰루랄라 룰루랄라랄라라라랄라")
	}
	}

view raw titleview3.swift hosted with ❤ by GitHub

 

 

 

 

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

버튼을 눌러봐도 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
    }
}

 

 

 

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

 

 

	class NavigationTitleButtonView: UIView {
	let titleButton = UIButton()
	private var allConstraintsDidSetup = false
	init(frame: CGRect, title: String) {
	super.init(frame: frame)
	setup(with: title)
	}
	private func setup(with title: String) {
	titleButton.setTitle(title, for: .normal)
	titleButton.setTitleColor(.black, for: .normal)
	titleButton.titleLabel?.lineBreakMode = .byTruncatingTail
	titleButton.backgroundColor = .lightGray
	titleButton.translatesAutoresizingMaskIntoConstraints = false
	self.addSubview(titleButton)
	titleButton.addTarget(self, action: #selector(buttonDidTap), for: .touchUpInside)
	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)
	])
	}
	override func layoutSubviews() {
	super.layoutSubviews()
	guard allConstraintsDidSetup else {
	NSLayoutConstraint.activate([
	titleButton.widthAnchor.constraint(equalTo: self.window!.widthAnchor, constant: -100 * 2)
	])
	allConstraintsDidSetup = true
	return
	}
	}
	required init?(coder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	@objc
	func buttonDidTap() {
	print("버튼이 눌렸다")
	}
	}

view raw titleview4.swift hosted with ❤ by GitHub

 

 

 

 

 

 

https://github.com/eunjin3786/NavigationTitleViewExample

eunjin3786/NavigationTitleViewExample