GaNaDa - TabView

기존의 가나다의 경우 좌측으로 슬라이드를 하거나 터치를 통해 사이드바가 출력가 출력 되게끔 하였다. 그런데 페이지 수가 많지도 않았으며 커스텀사이드바를 사용하면서 앱의 코드를 무겁게 하기도 했고, 해당앱에서는 불필요하다는 느낌이 들었다. 그래서 다른 방식으로 뷰를 전환하는 방법을 고려해보기로 했다. 그래서 정하게 된 전환 방식은 TabView를 이용하여 페이지를 전환하는 방법으로 간단하게 하단의 버튼을 터치하면서 앱을 복잡하지 않아 보이게 만들었다. 오늘은 그 변환 과정에서 학습하였던 TabView에 대해서 간단하게 정리해 보자. 

 

---

1.  TabView 구성 

TabView의 구성은 기존의 사이드바에서 볼 수있었던 메인 페이지와 메모 페이지가 된다. 구성하는 방법은 생각보다 간단하다. 아래 코드를 통해 한번 알아보자. 

 

TabView(selection: $selection) {

            MainView() //메인 
                .tag(0)
                .tabItem {
                    Text("Home")
                    Image(systemName: "house.fill")
                }
              
            MemoMain() //메모
                .tag(1)
                .tabItem {
                    Text("Vocabulary")
                    Image(systemName: "square.and.pencil")
                }

TabView 내부에 넣고 싶은 페이지들을 해당 코드와 같이 넣어주면 된다. 나의 경우 메인과 메모 페이지만 있기 때문에 두 페이지를 다음과 같이 작업해 보았다. 하지만 그냥 넣고 싶은 페이지만 넣는다고 해서 출력이 바로 되지는 않는다. 바로 여기서 필요한 것이. tabItem으로 탭뷰는 존재하지만 아직 탭뷰를 나타내는 아이템을 설정해주지 않았기 때문에 다음과 같이 text, Image를 적절하게 설정해 주었다. 

 

다시 위의 코드를 보면 TabView 옆에 있는 selection이 있는것을 볼 수 있다. 여기서 selection이 하는 역할은 무엇일까? 탭뷰의 특정 아이템을 눌렀을 때 확인할 수 있는 생성자이다. 

 

 

나의 경우 다음과 같이 초기값을 주며 선언해주었다. 

 @State private var selection = 0

selection과 같이 많이 나오는 개념은 .tag로 각 뷰에 달아놓으면 해당 태그와 selection을 이용하여 어떤 tab이 눌렸는지를 알 수 있게 된다.  

 

---

2.  결론

 

이전에 각각의 뷰들은 미리 다 완성이 되어있는 상태에서 그 뷰를 이용하여 전환 방식을 변경하는 것이다 보니 그리 오래 걸리지 않았고, 결과물은 다음과 같다. 

 

---

3. 이전 SideBar와 비교 

 

이전 SideBar

 

현재 TabView

이전 사이드에 있던것을 그대로 아래쪽 하단 바에 집어넣은 것을 볼 수 있다. 크게 달라진 점이 없어 보일 수 있지만, 개인적으로는 훨씬 깔끔해진 느낌과 앱을 사용하다 실수로 사이드바가 나오는 작은 실수 또한 없어진 것을 체감할 수 있었다.