Tabbar 정렬 및 여백조정이 안되는 이슈

 

문제 상황

분명 아무런 패딩값도 주지않고 탭바와 리스트뷰를 Column으로 수직배치했는데 리스트뷰는 위와같이 정상적으로 나왔지만 탭바부분이 이상하게 왼쪽 간격이 들어가있었다. 

 

 

 

문제 해결

isScrollable 속성 때문이었다.

 

isScrollable가 true로 설정되면, 각 탭은 자신의 내용에 맞춰 크기를 갖는다. 예를 들어, "Home"이라는 텍스트가 있는 탭은 "Settings"라는 텍스트가 있는 탭보다 더 좁을 수 있다. 이렇게 정해진 화면 너비 대비 계산이 아닌 주어진 텍스트 기반으로 너비를 정함으로써 탭의 개수가 많아서 화면에 모두 표시될 수 없을 때, 사용자는 수평 스크롤을 통해 나머지 탭으로 이동할 수 있다. 각 탭이 자신의 내용에 맞게 배치되기 때문에 스크롤이 가능해지는 것이다.

 

isScrollable가 false로 설정되면, TabBar는 화면의 전체 너비를 가득 채우고 각 탭은 동일한 너비를 가지게 된다. 탭의 개수와 상관없이, 모든 탭은 균일하게 분배된다. 따라서 탭을 스크롤할 필요없이, 지금 나의 상황처럼 탭이 두개만 있고 왼쪽에 배치해야한다면 isScrollable이 false로 되어있어야한다. (디폴트값)

 

이 개념을 이용해서 탭바의 너비를 화면너비 / 2 를 하고 주어진 반절의 너비에서 두 탭바의 너비를 균등하게 줌으로써 문제를 해결했다.