【SwiftUI】TabView의 기본 사용법

8898 단어 XcodeiOSSwiftSwiftUI
요 전날 저에게 첫 iOS 앱이 출시되었으므로 개발에 사용한 기술을 세분화하고 출력해 나갈까라고 생각합니다. 좋으면 설치해보십시오.

이해 - 공부 지원 앱 -

TabView란?



여러 하위 뷰를 전환할 수 있는 뷰입니다.

공식 참조

실제 동작



코드



의 동영상 소스 코드가 됩니다.




ContentView.swift

struct ContentView: View {
    var body: some View {
        TabView{
            FirstPage() //1枚目の子ビュー
                .tabItem {
                    Image(systemName: "1.circle.fill") //タブバーの①
                }
            SecondPage() //2枚目の子ビュー
                .tabItem {
                    Image(systemName: "2.circle.fill") //タブバーの②
                }
        }
    }
}



아래는 각각 하위 뷰의 내용입니다.




FirstPage.swift

struct FirstPage: View {
    var body: some View {
        Text("1枚目")
            .font(.title)
            .foregroundColor(.green)
    }
}




SecondPage.swift

struct SecondPage: View {
    var body: some View {
        Text("2枚目")
            .font(.title)
            .foregroundColor(.red)
    }
}



이런 식으로 TabView { } 안에 자식 보기를 작성하면 이를 전환하여 하나씩 볼 수 있습니다.

위의 예에서는 뷰를 2개로 했습니다만, 3개 이상에도 대응하고 있어, iPhone이면 5개까지라면 그대로 탭 바에 표시됩니다.

(iPad라면 8개까지 그대로 탭바에 표시할 수 있습니다.)





6개 이상이 되면 탭 바의 오른쪽에 "More"라고 쓰여진 버튼이 자동으로 만들어지고 5번째 이후의 탭 바가 모두 내포됩니다.





tabItem 수정자



탭 막대에 표시할 뷰를 지정할 수 있습니다. tabItem이 없어도 탭바는 만들어집니다만, 아무것도 쓰여지지 않은 탭이 되어 어디를 누르면 좋은지 알기 어려워지기 때문에, 기본은 tabItem을 붙여야 할까라고 생각합니다.



공식 참조



tabItem의 {} 안에는 Image와 Text를 지정하여 조합할 수 있으며, VStack을 사용하지 않아도 자동으로 세로 정렬됩니다.





탭바의 색은 디폴트가 청색으로 되어 있습니다만, TabView의 acentColor를 지정하는 것으로, 색의 변경이 가능합니다.




ContentView.swift

struct ContentView: View {
    var body: some View {
        TabView{
            Text("1")
                .tabItem {
                    Image(systemName: "message.fill")
                    Text("メッセージ")
                }
            Text("2")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("さがす")
                }
            Text("3")
                .tabItem {
                    Image(systemName: "face.smiling.fill")
                    Text("スタンプ")
                }
        }
        .accentColor(.green) //ここで色の指定
    }
}





요약



TabView는 Twitter나 LINE 등 많은 앱에서 볼 수 있는 화면 전환을 가능하게 하는 뷰입니다. 꼭 사용하고 멋진 앱을 만드세요.



참고문헌




iOS 애플리케이션에 키보드 단축키 지원 추가(UIKit 및 SwiftUI 모두)
SwiftUI에서 List 내에서 ForEach를 사용할 때의주의

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage