TabView

👋 들어가기 전

본격적으로 사이드 프로젝트에서 사용할 다양한 뷰들을 정리해보자.

 

첫번 째 포스팅은 TabView이다.

---

✊TabView란

✨ 목적

다양한 자식 뷰들을 전환해주는 뷰

🚧 구성

생성

먼저 생성자를 살펴보자.

Tab 구조체를 통해 간단히 생성할 수 있다.

 

Tab에 대한 내용은 아래에서 살펴보자.

    TabView {
        Tab("Received", systemImage: "tray.and.arrow.down.fill") {
          Text("Hello")
        }

        Tab("Sent", systemImage: "tray.and.arrow.up.fill") {
          Text("Hello")
        }


        Tab("Account", systemImage: "person.crop.circle.fill") {
          Text("Hello")
        }
    }

선택 색상 변경

.tint를 이용한다.

    TabView {
		...
    }
    .tint(.red)

tabViewStyle

tabview의 style을 지정한다.

• .page: 온보딩 등에 쓰이는 전형적인 page 형식의 tab 스타일
• .sidebarAdaptable:  iOS는 하단 탭바, iPad / Mac OS는 사이드 바로 표시
• .tabBarOnly: OS 상관 없이 무조건 하단 TabBar로 표시 

---

☝️Tab

⭐️ 정의

공식 설명에서도 그냥 탭, 또는 탭바와 연관된 탭 아이템이라고 한다.

중요한 특징으로는 Tab은 TabContent라는 프로토콜을 채택하고 있다.

 

TabContent에서 제공해주는 간편한 기능들을 알아보자 .

🚧 구성

badge

사진과 같이 이미지와 별개로 정보를 제공해주는 기능이다.

숫자와 문자열 모두 가능하다.

 Tab("Received", systemImage: "tray.and.arrow.down.fill") {
           Text("1234")
        }
        .badge(2)

---

출처

TabView | Apple Developer Documentation

 

Tab | Apple Developer Documentation