[SwiftUI] Bottom TabView

🧭 Bottom TabView

Github Link

다수의 앱에 TabView가 존재한다.
상단에 위치할 수도있고, 하단에 위치할 수도 있다.
Flutter에서는 이를 NavigationBar라고 하고, swift에서는 TabView로 구현이 가능하다.

앞서 포스팅에서 다뤘던 ZStack, HStack, VStack과 overlay를 이용하여 만든 BottomTabView이다.

ZStack {
    TabView(selection: $selectedIndex) {
        FirstView().tag(0)
        SecondView().tag(1)
        ThirdView().tag(2)
        FourthView().tag(3)
    }.overlay(
        Color.clear
        .edgesIgnoringSafeArea(.horizontal)
        .frame(height: 64)
        .overlay(
            alignment: .leading, content: {
                HStack (spacing:0) {
                    ForEach(menuList, id: \.self) { menu in
                        MenuButton(selectedIndex: $selectedIndex, menu: menu)
                            .padding(
                                EdgeInsets(
                                    top: 0,
                                    leading: (menu.rawValue == 0) ? 22 : 0,
                                    bottom: 0,
                                    trailing: (menu.rawValue != 3) ? 22 : 0
                                )
                            )
                    }
                }
            }
        ).padding(EdgeInsets(
            top: 0,
            leading: 12,
            bottom: 0,
            trailing: 12
            )), alignment: .bottom)
}

실행 영상은 다음과 같다.