[Cheliz] UITabBarItem의 SF Symbol 사이즈 조정 Issue

 

우선 구현한 검색 화면은 아래와 같다. 탭 바의 이미지가 상단에 붙어있는 것 같아 보이는 것을 알 수 있다.

 

 

 

  문제  

• UITabBarItem의 title을 없앴을 때, SF Symbol image가 title의 영역까지 차지하여 크게 보이도록 구현하지 못했다.

imageInsets 프로퍼티를 변경하여 영역을 지정해 주는 것은 알겠는데..

 

 

 

탭바에 등록한 뷰 컨트롤러(homeNC)의 tabBarItem.image에 이미지를 등록하고, tabBarItem.imageInsets를 변경해도,

 

 

 

 

UITabBarItem 인스턴스를 생성하고 그 인스턴스의 imageInsets를 변경한 후 homeNC의 tabBarItem으로 등록해도,

 

 

 

 

tabBar.items의 각 요소에 접근해서 imageInsets을 변경해도,
탭바 아이콘의 위치나 크기는 달라지지 않았다.

 

 

 

 

포인트 한 가지,,

UITabBarController를 상속받는 클래스 내에서 탭바를 구현한다면, 
tabBar 프로퍼티에 접근 시 tabBarController?에 접근하지 않고 바로 tabBar 프로퍼티에 접근하면 된다.
위 코드에서는 No tabBarController가 출력된다.

 

 

 

 

 

약 일주일 뒤.. 다시 이미지 키우기를 시도해 보았다.

  해결 방법 1.  

 

우선 기존의 문제가 그대로 남아 있는 모습.. 처음 문제 상황 시에서 API 통신으로 받아온 정보들을 뷰로 보여주고,
시청 여부를 체크할 수 있는 기능이 추가되었지만.. 탭 바 아이템의 이미지 아이콘 크기는 그대로다.

 

이 문제를 조금(?) 다른 방법으로 해결해 볼 수 있었다.

기존의 tabBarItem.image는 SF Symbol이지만, 이미지 에셋을 활용하는 방법이다.

 

 

let homeVC = HomeViewController()
let homeNC = UINavigationController(rootViewController: homeVC)
        
let filmListSymbolImage = UIImage(systemName: "list.and.film")
homeNC.tabBarItem.image = filmListSymbolImage
homeNC.tabBarItem.imageInsets = UIEdgeInsets(top: 8, left: 0, bottom: -8, right: 0)

기존 SF Symbol의 tabBarItem.image

 

 

 

let homeVC = HomeViewController()
let homeNC = UINavigationController(rootViewController: homeVC)
        
homeNC.tabBarItem.image = UIImage(named: "bank")
homeNC.tabBarItem.imageInsets = UIEdgeInsets(top: 8, left: 0, bottom: -8, right: 0)

이미지 에셋의 tabBarItem.image

 

 

 

 

 

bank.png 이미지 파일을 Assets에 추가하고 tabBarItem.imageInsets을 조정해 보았다.

 

 

 

엄청 크게 나온다.. 에셋에 추가한 이미지는 이미지 자체의 사이즈로 보여지며, 
tabBarItem.imageInsets 조정 또한 가능하다는 것을 알 수 있었다!
SF Symbol 또한 사이즈와 insets을 조정하는 방법을 찾는 것이 필요하다...

 

 

 

 

 

  해결 방법 2.  

SF Symbol의 tabBarItem.image 사이즈 조절에 성공하다,,,

 

SF Symbol 이미지 키우기 성공..!

 

 

 

 

아래와 같이 tabBarItem.image를 SF Symbol로 지정하면서 크기도 조절하는 데 성공했다!!

 

 

let homeVC = HomeViewController()
let homeNC = UINavigationController(rootViewController: homeVC)

homeNC.tabBarItem.image = UIImage(systemName: "list.and.film",
                                  withConfiguration: UIImage.SymbolConfiguration(font: .systemFont(ofSize: 50)))?.withBaselineOffset(fromBottom: UIFont.systemFontSize * 3)

 

탭바 컨트롤러에서 tabBarItem.image를 SF Symbol로 지정할 경우, 이미지의 크기는 UIImage.SymbolConfiguration으로 조절할 수 있었다.

또한 insets은 tabBarItem.imageInsets가 아닌 SymbolConfiguration의 withBaselineOffset 메서드로 조정이 가능했다..!

 

 

 

 

 

+ 추가
 이 글의 SymbolConfiguration도 그렇고, UICollectionLayoutListConfiguration도 그렇고,
UIButton의 Configuration도 그렇고.. 여러 Configuration을 잘 다룰 줄 알아야 원하는 형태의 개발을 원활히 할 수 있겠다..고 많이 느꼈다..