[iOS] 상단 탭바 구성하기

안녕하세요! 미니입니다.

오늘은 UI와 관련되서 글을 작성해보려고 합니다. 프로젝트를 진행하면서 상단에 탭바와 같은 UI를 구성하면서 고민한 점들과 구성 방법에 대해서 공유해보려고 합니다.

오늘 구성할 화면이며, 상단에는 하단 탭바처럼 버튼을 누를때마다 화면이 전환되도록 구성됩니다.

1. 탭 구성하기

우선, 처음으로 상단에 표시할 텍스트와 화면에 대해서 정의할 수 있는 타입을 구성할 겁니다. 또한, 화면의 구성을 일반화하기 위해서 protocol을 선언해서 구성하였습니다.

2. 상단 탭바 구성하기

그 후, 상단 커스텀한 상단 탭바를 구성합니다.

 

상단 탭바는 StackView를 상속하고 있으며, TabItem 을 채택하고 있는 타입들의 배열을 받을 수 있도록 구성합니다. 그리고, 상단 탭바의 화면을 구성해야 합니다. 상단 탭바는 사용자 터치에 반응을 해야 하기 때문에 UIButton으로 구성하여서 액션을 지정할 수 있도록 했으며, index 변경을 프로퍼티 관찰자를 통해서 상위 컨트롤러로 Delegate 패턴을 활용하여서 index를 전달할 수 있도록 하였습니다.

3. 상단 탭바 컨트롤러 구성하기

상단 탭바 컨트롤러는 상단 탭바를 가지고 있는 컨트롤러가 되며, 제네릭하게 TabItem의 타입을 받을 수 있도록 구성합니다. 이는 TopTabBar 타입을 구성하기 위해서 필요하게 됩니다. 또한, UITabBarController를 상속한 이유는 선택된 index에 따라서 화면을 변환할 수 있도록 하기 위해서 입니다. setViewControllers 메서드를 통해서 자식 ViewController들을 설정해줍니다. 그러면 selectedIndex의 값의 변화에 따라서 화면을 변경할 수 있게 됩니다.

4. Delegate 메서드 사용하기

TopTabBar에서 index가 변경될 때마다 Delegate 패턴으로 상단 TopTabBarController에 전달합니다. 이 index를 UITabBarController 프로퍼티 selectedIndex에 전달합니다.

 

오늘은 상단 탭바를 구성하는 방법을 알아보았습니다. TabMan 과 같은 라이브러리를 활용하는 방법도 존재합니다. 저는 직접 구현해서 필요한 기능만 가질 수 있도록 했습니다. 라이브러리를 활용하면, 스크롤, paging과 같은 추가적인 기능들을 구현할 수 있습니다. 전체 코드는 아래 github에서 확인해주세요.

github: https://github.com/leegyoungmin/Note_Project/tree/main/TopTabBarController