[ios] 커스텀 탭바(TabBar)로 뷰 전환 구현하기
[ios] 커스텀 탭바(TabBar)로 뷰 전환 구현하기
안녕하세요. 오늘은 지난 시간에 만든 커스텀 탭바에 뷰 전환 기능을 추가해보도록 하겠습니다. 지난 시간에는 단순히 커스텀 탭바를 만들기만 하였고 직접적인 뷰의 전환 액션은 구현해주지 않았습니다. 오늘의 포스팅을 통해서 다음과 같은 기능을 완성해볼 수 있습니다.
커스텀 탭바 메뉴를 클릭하거나 페이지를 스크롤하여 하여 화면을 넘길 수 있는 기능입니다. 많은 곳에서 사용할 수 있는 그런 기능입니다. 오늘 포스팅은 이전 포스팅 코드와 기본적인 UICollectionView를 기반으로 작성하였습니다. 또한 전체 코드는 글에서 다루지 않고 따로 깃헙 링크로 대체하고 중요한 코드들만 살펴보도록 하겠습니다.
그렇기 때문에 반드시 제가 이전에 소개해드린 [ios] 커스텀 탭바(TabBar) 만들기 포스팅을 먼저 참고해주시고 깃헙 소스도 같이 참고하여주시기 바랍니다.
Implementataion
저는 전환될 화면 역시 UICollectionView를 사용하여 구현할 것입니다. 그렇게 되면 커스텀 탭바와 함께 두 개의 UIColletionView가 올라가게 됩니다. 그래서 delegate와 datasource를 따로 지정해주기위해 커스텀 탭바를 따로 UIView 파일로 빼냈습니다.
저는 커스탭 탭바 위의 모든 것을 코드로 구현하였기 때문에 따로 xib 파일을 만들어 연결해주지 않았고 이를 UIViewController에서 사용하기 위해 생성자를 다음과 같이 만들었습니다.
또한 저는 커스텀 탭바를 사용할 UIViewController와 Delegation 관계를 맺을 것이기 때문에 같은 파일에 다음과 같이 프로토콜과 delegate 변수를 만들어주었습니다.
그리고 pageCollectionView에 사용될 Cell도 간단하게 다음과 같이 작성하였습니다.
그러면 이제 본격적으로 MainVC에 코드를 작성해보도록 하겠습니다. 위에서 따로 빼준 CustomMenuBar 를 프로퍼티로 가져야하며 CustomMenuBarDelegate 프로토콜을 체택해주어야 합니다. 그리고 pageCollectionView의 기본적인 세팅도 다음과 같이 해줍니다.
사실 MainVC에서는 크게 중요한 부분은 없습니다. UICollectionView의 Delegate나 DataSource를 설정하므로 다른 UICollectionView를 설정하는 것과 크게 다르지 않기 때문입니다. 여기서 주목해야할 점은 CustomMenuBarDelegate의 메소드와 pageCollectionView의 스크롤 관련 메소드들입니다.
customMenuBar(scrollTo:)
이 메소드는 CustomMenuBar 클래스 내 어디서 작동할까요? CustomMenuBar 클래스를 살펴보도록 하겠습니다.
바로 CustomMenuBar의 셀이 선택되었을 때 호출이 됩니다. CustomMenuBar 역시 UICollectionView로 만들었기 때문에 didSelected 메소드를 활용합니다. 즉 CustomMenuBar의 메뉴 탭이 선택되었을 때 선택된 셀의 인덱스와 같은 페이지를 pageCollectionView 를 통해 보여주는 것입니다.
예를 들어 CustomMenuBar의 첫번째 탭을 선택하면 pageCollectionView의 첫번째 뷰를 현재 페이지로 보여주어야 합니다.
scrollViewDidScroll, scrollViewWillEndDragging
- 먼저
pageCollectionView내에 스크롤 액션이 일어나면CustomMenuBar내indicatorView의leadingConstraint값의 변화가 있어야 합니다. 즉pageCollectionView가 움직이면 같이 움직여야 합니다. - 그리고 스크롤이 멈추면 멈춘 곳에 해당하는 인덱스를 받아와 해당 인덱스에 해당하는
CustomMenuBar의 셀(탭)을 선택해주는 것입니다. 위의 delegate 메소드는 선택한 탭바에 해당하는pageCollectionView의 셀을 선택해주었다면, 이 메소드를 통해서는pageCollectionView의 스크롤을 통해 인덱스가 결정되면 해당 인덱스에 해당하는 탭바의 셀을 선택해주는 것입니다.
동작에 관한 코드는 모두 완성하였습니다. 한 가지 남은 것은 탭이 탭 자체의 선택으로 인해 선택이 되었든, pageCollectionView의 스크롤로 인해 선택이 되었든 선택되었다는 것을 표시해주어야 합니다. 이전의 포스팅에서는 이를 CustomMenuBar의 didSelected 메소드를 통해 구현해주었는데 이번 포스팅에선 셀 자체에서 작성해주도록 하겠습니다.
- 만일 셀이 즉, 메뉴 탭이 선택되면 해당 탭의 글자 색을 변경시켜주는 코드입니다.
CustomMenuBar는 복수의 셀을 선택하는 것을 허용하지 않았기 때문에 다른 셀을 선택할 때는 해당 셀은 자동으로 선택이 해제되고isSelected가false가 되므로 글자 색 역시 원래 색으로 돌아가게 됩니다.
마무리
오늘은 이렇게 많은 어플리케이션에서 사용되는 커스텀 탭바를 활용한 페이지의 전환을 구현해보았습니다. UICollectionView에 더 익숙해지는 계기가 되었고 개인적으로는 재미있게 공부한 기능입니다. 많은 분들도 직접 만들어보면서 얻어가시는 것이 있었으면 좋겠습니다. 틀린 부분이나 더 좋은 방법이 있다면 많은 피드백 부탁드리겠습니다. 감사합니다.
Source : github