[SwiftUI fundamental Tutorial] TabView

위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로

자세한 내용은 유튜브를 통해 확인하시길 권장합니다. 

 

 

 

 

import SwiftUI

struct MyTabView: View{
    
    var body: some View{
        
        TabView{
            Text("1") //보여질 화면
                .fontWeight(.bold)
                .font(.largeTitle)
                .tabItem {
                    Image(systemName: "airplane")
                    Text("1번")
                }
                .tag(0) //0번부터
            
            
            Text("2")
                .fontWeight(.bold)
                .font(.largeTitle)
                .tabItem {
                    Image(systemName: "flame.fill")
                    Text("2번")
                }
                .tag(1) 
            
           
            Text("3")
                .fontWeight(.bold)
                .font(.largeTitle)
                .tabItem {
                    Image(systemName: "doc.fill")
                    Text("3번")
                }
                .tag(2) 
        }
    }
}

 

TabView안에 내용물을 넣으면 뷰를 TabView 형식으로 그림

TabItem은 하단의 TabItem을 그림

tag는 0번부터 매길 수 있음

 

 

 

 

 

 

 

TabView 응용하기

import SwiftUI

struct MyView: View{
    
    var title: String
    
    var bgColor: Color
    
    var body: some View{
        
        ZStack{
            
            bgColor
                .edgesIgnoringSafeArea(.all)
            
            Text(title)
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(Color.white)
        }
    }
}

MyTabView 부분의 Text를 꾸며주는 내용을 따로 뽑아서 MyView로 만들어줬다

 

 

 

import SwiftUI

struct MyTabView: View{
    
    var body: some View{
        
        TabView{
// 직접 입력한 작업        
//            //보여질 화면
//            Text("1")
//            //
//                .fontWeight(.bold)
//                .font(.largeTitle)
//                .tabItem {
//                    Image(systemName: "airplane")
//                    Text("1번")
//                }
//                .tag(0) //0번부터
            
            
//MyView를 이용한 작업            
            MyView(title: "1", bgColor: Color.orange)
                .tabItem {
                    Image(systemName: "airplane")
                    Text("1번")
                }
                .tag(0)
            
            
            MyView(title: "2", bgColor: Color.red)
                .tabItem {
                    Image(systemName: "flame.fill")
                    Text("2번")
                }
                .tag(1) 
            
           
            MyView(title: "3", bgColor: Color.blue)
                .tabItem {
                    Image(systemName: "doc.fill")
                    Text("3번")
                }
                .tag(2) 
        }
    }
}