[IOS] 이미지와 라벨을 같이 사용한 NavigationBarButtonItem

대부분의 앱들이 네비게이션바에 설정 버튼을 위치해두면서

자신의 프로필이나 앱의 환경설정으로 접근할 수 있게 해놓는다.

 

필자 또한 프로젝트중에 BarButton을 생성하여 작업하는 과정이 있었고

버튼의 이미지 옆에 text를 붙이는 과정을

포스팅으로 남기려한다.

 

보통은 간단하게 SystemItem으로 진행하거나,

navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .search, target: self, action: #selector(didTapRightBarButton))

systemImage 로 진행 할수 있다.

navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIImage(systemName: "xmark"), style: .plain, target: self, action: #selector(didTapRightBarButton))

 

그러면 요런식으로 버튼이 간단하게 생성이 된다.

하지만 여기서 버튼의 이미지 옆에 text를 붙여야만 했다.

물론 지금 설명하려는 방법이 아닌 BarButton을 두개 추가하여

하나는 이미지, 하나는 title을 가지고 있는 상태로 진행해도 되지만

button 하나의 image와 title을 사용하여 진행할 수도 있다.

 

일단 BarButton에 들어갈 button을 하나 생성하고 

원하는 image를 설정한다.

그리고 button의 frame을 잡아준다.

여기서 frame을 잡을때 text의 길이를 고려하여 width를 잡아 주어

text가 짤리는 일이 없게 하는게 포인트다.

그리고 title과 원하는 설정을 맞춰준다.

또한가지 유심히 봐야하는게 있는데

titleEdgeInsets을 설정 하는 부분이다. 

button의 titleLabel inset을 설정 할 수 있는 속성이다.

let button = UIButton()
button.setImage(UIImage(named: "cogwheel"), for: .normal)
button.frame = CGRect(x: 0, y: 0, width: 70, height: 30)
button.setTitle("설정", for: .normal)
button.setTitleColor(.black, for: .normal)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)

 

만약 inset을 설정하지 않았다면 아래와 같이 좌측 이미지에 찰싹 달라붙어있는 라벨을 볼 수 있다.

 

반대로 inset을 원하는 만큼 설정해준다면 이런식으로 보기 좋게 보일 수 있다.

 

마지막으로 UIBarButtonItem의 init을 할껀데

customView를 인자로 받는 init을 선택한다.

그리고 지금까지 설정한 버튼을 인자로 전달 한 후

최종적으로 navi의 BarButotn에 할당을 하면 

방금 만든 버튼이BarButtonItem으로 들어가 있는걸 볼 수 있다.

let barButton = UIBarButtonItem(customView: button)
navigationController?.navigationItem.rightBarButtonItem = barButton