Custom TabBar

안녕하세요. iOS 개발자 에이든입니다!👦🏻



스유를 써봐유! 두 번째 시간!
iOS App을 보면 흔히 보이는 TabBar!
바로 TabBar를 구현하는 방법들을 알아보겠습니다!



이번 시간은 따로 TabBar에 대한 설명하고, 구현하는 방법만 짧게 알아보겠습니다!
애플 개발자 문서(TabView)에 예제와 함께 잘 나와있으니
이 부분을 참조하시면 좋을 것 같아요!
https://developer.apple.com/documentation/swiftui/tabview/



그럼 스타뜨!!

🎶🎵

---

TabBar를 구현하는 방법은 여러 가지가 있어요!
다른 요소들도 마찬가지이겠지만 Apple에서 제공하는 TabView를 써도 되고
다른 요소들을 활용해서 Custom해도 돼요!

그럼 기본적인 방법과 제가 주로 사용하는 방법을 보여드릴게요!

---

1. TabView 사용

가장 간단한 방법이에요! 코드도 무척 짧아지긴 하지만 저의 개인적인 의견으로는 커스텀이 힘들다는 단점이 있었습니다. 기본적인 UI를 만드신다면 이 방법이 가장 좋을 것 같아요!

import SwiftUI 

struct ContentView: View { 
    TabView { 
    	InternalView() 
        	.tabItem { 
            	Image(systemName: "list.dash") 
                Text("Menu") 
            } 
        InternalView() 
        	.tabItem { 
            	Image(systemName: "square.and.pencil") 
                Text("Order") 
            } 
        } 
    } 
} 

struct ContentView_Previews: PreviewProvider { 
    static var previews: some View { 
    	ContentView()
    } 
}

 

---

2. Custom 방법

제가 주로 사용하는 방법이에요. ZStack을 활용해서 안에 있는 View 보다 앞으로 나오게 해서 TabBar의 느낌을 냈습니다. TabView를 사용하는 것보다 훨씬 복잡하지만 높이, 배경, 아이콘 크기 등 Custom 하기가 좋아요.

import SwiftUI 

struct ContentView: View { 
    @State private var selectedIndex = 0 
    let tabBarImangeNames = ["list.dash", "square.and.pencil"] 
    let tabBarNames = ["Menu", "Order"] 
    
    var body: some View { 
    	VStack { 
            ZStack { 
            	switch selectedIndex { 
                case 0: 
                	InternalView() 
                default: 
                	SecondInternalView() 
                } 
            } 
            Spacer() 
            HStack{ 
            Spacer() 
            ForEach(0..<tabBarImangeNames.count) { num in 
                VStack { 
                    Image(systemName: tabBarImangeNames[num]) 
                        .font(.system(size: 18, weight: .light)) 
                        .foregroundColor(selectedIndex == num ? Color(.blue) : Color(.tertiaryLabel)) 
                    Text(tabBarNames[num]) 
                        .font(.system(size: 9, weight: .light)) 
                        .foregroundColor(selectedIndex == num ? Color(.blue) : Color(.tertiaryLabel)) 
                } 
                .gesture( 
                    TapGesture() 
                        .onEnded { _ in 
                            selectedIndex = num 
                        } 
                ) 
                Spacer() 
                } 
            } 
        } 
    } 
} 
        
struct ContentView_Previews: PreviewProvider { 
    static var previews: some View { 
    	ContentView() 
    } 
}

 

자 이번 시간에는 아주 간단하게 TabBar를 구현하는 방법에 대해 알아보았습니다.
제가 쓴 글 중 역대급으로 짧은 것 같네요ㅎㅎ
물론 이 방법 외에도 더 좋은 방법들이 많겠죠?
이 코드가 조금이라도 도움이 되었길 바랍니당ㅋㅋㅋㅋ
혹시라도 부족하거나 잘못된 부분 그리고 질문 있으시면 언제든 댓글 부탁드려요! 감사합니다!👦🏻👋🏻