네비게이션 바 커스터마이징

네비게이션 바의 구성 

[ 좌측 아이템 - 센터 - 우측 아이템 ] 으로 구성된다.

 

타이틀 부분에서 두줄로 표현하기 위해서는

 

let nTitle = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))

nTitle.numberOfLines = 2

nTitle.textAlignment = .center

nTitle.font = UIFont.systemFont(ofSize: 15)

nTitle.text = "58개 숙소 \n 1박(1월 10일 ~ 1월 11일)" 

self.navigationItem.titleView = nTitle

 

이런식으로 코드작성하면 된다.

 

그런데 이런 경우가 있다. 

네비게이션 바가 [ 좌측 아이템 - 센터 - 우측 아이템 ] 이렇게 3개의 구성요소만 담을 수 있으면 그 이상은 어떻게 할까??

-> 뷰를 만들어서 나누면 된다.

 

무슨 말이냐면

// 오른쪽은 레이블과 아이템 2개가 들어가야해서 컨테이너 방식으로 사용해야함.

        let rv = UIView()

        rv.frame = CGRect(x: 0, y: 0, width: 70, height: 37) // 뷰공간 확보

        

        let rItem = UIBarButtonItem(customView: rv) // 오른쪽에 컨테이너 뷰 넣을건데

        self.navigationItem.rightBarButtonItem = rItem

        

        // 카운트 값을 표시할 레이블

        let cnt = UILabel()

        cnt.frame = CGRect(x: 10, y: 8, width: 20, height: 20)

        cnt.font = UIFont.boldSystemFont(ofSize: 10)

        cnt.textColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1.0)

        cnt.text = "12"

        cnt.textAlignment = .center

        

        // 외곽선

        cnt.layer.cornerRadius = 3 // 모서리 둥글게 처리

        cnt.layer.borderWidth = 2

        cnt.layer.borderColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1.0).cgColor

        

        rv.addSubview(cnt) // 레이블을 서브뷰로 추가

        

        // more 버튼 구현

        let more = UIButton(type: .system)

        more.frame = CGRect(x: 50, y: 10, width: 16, height: 16)

        more.setImage(UIImage(named: "more"), for: .normal)

        

        rv.addSubview(more)

 

 

코드를 보면 쉽게 이해할 수 있는데 컨테이너를 만들어서 거기에 담고

그 컨테이너를 붙여준다고 생각하자.