[ SwiftUI ] Custom Tab Bar 만들기

SwiftUI를 통해 Custom Tab Bar를 만들어 봤습니다.
기존의 Tabbar를 사용하기에는 원하는 디자인이 나오지 않아 Custom으로 만들어야겠다고 생각했습니다.

TabbarView

Tab의 이름들을 enum으로 정의를 해 가독성 향상과 유지보수가 용의하게 만들었습니다.

import SwiftUI

enum Tab {
    case home
    case wishList
    case camera
    case cart
    case account
}

struct TabbarView: View {
    @State var selectedTab: Tab = .home
    var body: some View {
        VStack {
            switch selectedTab {
            case .home:
                MainHomeView()
            case .wishList:
                WishListView()
            case .camera:
                CameraView()
            case .cart:
                CartView()
            case .account:
                AccountView()
            }
            CustomTabView(selectedTab: $selectedTab)
        }
    }
}

 

CustomTabbarView

Tabbar의 백그라운드 도형은 이미지로 설정하고, 가운데 버튼은 offset을 통해 버튼의 위치를 조정해줬습니다.

import SwiftUI

struct CustomTabView: View {
    @Binding var selectedTab: Tab
    
    var body: some View {
        VStack {
            Spacer()
            ZStack {
                Image("menu")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 450, height: 75)
                    .offset(y: -5)
                HStack {
                    Spacer()
                    Spacer()
                    Button {
                        selectedTab = .home
                    } label: {
                        selectedTab == .home ? ButtonView(imageName: "house.fill") : ButtonView(imageName: "house")
                    }
                    Spacer()
                    Button {
                        selectedTab = .wishList
                    } label: {
                        selectedTab == .wishList ? ButtonView(imageName: "heart.fill") : ButtonView(imageName: "heart")
                    }
                    Spacer()
                    Button {
                        selectedTab = .camera
                    } label: {
                        Image("scan")
                            .resizable()
                            .frame(width: 85, height: 85)
                            .offset(y: -20)
                    }
                    Spacer()
                    Button {
                        selectedTab = .cart
                    } label: {
                        selectedTab == .cart ? ButtonView(imageName: "cart.fill") : ButtonView(imageName: "cart")
                    }
                    Spacer()
                    Button {
                        selectedTab = .account
                    } label: {
                        selectedTab == .account ? ButtonView(imageName: "person.fill") : ButtonView(imageName: "person")
                    }
                    Spacer()
                    Spacer()
                }
            }
        }
        .edgesIgnoringSafeArea(.bottom) // 안전 영역 무시하여 가장 하단으로
    }
}

 

ButtonView

반복되는 이미지 이름과 크기 세팅은 ButtonView에 따로 구현했습니다.

import SwiftUI

struct ButtonView: View {
    var imageName: String
    
    var body: some View {
        VStack {
            Image(systemName: imageName)
                .resizable()
                .scaledToFit()
                .frame(width: 25, height: 25)
                .foregroundColor(.black)
        }
    }
}

 

 

실행 영상

---

참고 동영상