【初心者】Swift UIを勉強する その⑭ ーーー TabBarとNavigation Link & sheet 

# はじめに

[5回目](https://qiita.com/anchor_/items/2cdbf6610df9e4b58459)の時に、Sidebarをやっていましたが、iPhoneの場合はSidebarではなく、TabBarを使うのが一般的です。今回はTabBarと画面遷移をやっていきます。



# 目次
<!-- タイトルとアンカー名を編集 -->
1. [TabBar](#TabBar)
2. [Navigation Link & sheet](#Navigation Link & sheet)
3. [まとめ](#まとめ)
4. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#TabBar"></a>
# TabBar
・5回目の時、osと関係なく`Siderbar()`を呼び出していました。
　今回では、macの場合は`Sidebar()`を呼び出します。iOSの場合は、iPhoneならば`TabBar()`、iPadならば`Sidebar()`というふんに切り分けます。
・iPadなのか、iPhoneなのか、とう判断するというと...
　[Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/)でDevice Sizeが**compact**の端末をiPhoneとして認識し、**regular**であればiPadとして認識されています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/f2bd77ad-0097-7ced-c8ca-c9f1e600dda7.png" width=80%>　　

```swift:ContentView.swift
struct ContentView: View {
    #if os(iOS)
    @Environment(\.horizontalSizeClass) var horizontalsizeClass
    #endif
    
    @ViewBuilder
    var body: some View {
        #if os(iOS)
        if horizontalsizeClass == .compact {
            TabBar()            // ↑ iPadならばregular
        } else {
            Sidebar()
        }
        #else
        Sidebar()
            .frame(minWidth: 1000, minHeight: 600)
        #endif
    }
}
```
<br>
・`TabBar.swift`は`NavigationView`に遷移先を入れて、`tabItem`にImageやTextを入れれば完成です。ピンや縦横幅などの設定は入りません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/dd33336c-4d2c-c85d-1144-2d4267e1fc85.png" width=80%>　　


```swift:TabBar.swift
struct TabBar: View {
    var body: some View {
        TabView {
            NavigationView {
                CoursesView()
            }
            .tabItem {
                Image(systemName: "book.closed")
                Text("Courses")
            }
            NavigationView {
                CourseList()
            }
            .tabItem {
                Image(systemName: "list.bullet.rectangle")
                Text("Tutorials")
            }
         }
    }
}
```




<a id="#Navigation Link & sheet"></a>
# Navigation Link & sheet

・Navigation Linkの使い方もとてもシンプルで、`destination`に遷移先を決めれば、
　ただ、`CourseRow()`Listの色は全部紫色になっているので、`CourseRow()`であらためて決める必要があります。

```swift:CoursesView.swift
@Namespace var namespace

ForEach(courseSections) { item in
    NavigationLink(
       destination: CourseDetail(nameSpace: namespace)
    ) {
        CourseRow(item: item)
     }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/faf16302-5632-d723-86b8-76bc29775a23.gif" width=30%>

・画面遷移はNavigation Linkのほかに、`sheet`を使って画面遷移もできます。

```swift:CourseDetail.swift
@State var showModal = false

VStack {
  ForEach(courseSections) { item in
      CourseRow(item: item)
         .sheet(isPresented: $showModal) {
                             // ＄は双方向blinding
             CourseList()
      }
      .onTapGesture {
         showModal = true
      }
   Divider()
  }
}
```

・`sheet`を使う場合は、閉じるボタンを自分で用意する必要があって、嬉しいなのは`dismiss`で易しくできます。
![截屏2021-04-24 20.44.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/16d3f258-65c2-e1e3-8bcc-7248ab5be2a6.png)

```swift:CourseSectionDetail.swift
@Environment(\.presentationMode) var presentationMode

CloseButton()
   .onTapGesture {
       presentationMode.wrappedValue.dismiss()
   }
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/25fa451a-f0db-c464-97df-0182d3886856.gif" width=30%>  　　　　　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/4a451e7f-d18e-212d-eab7-b211dff7456a.gif" width=30%> 


<a id="#まとめ"></a>
# まとめ

**ソースコード[Github](https://github.com/wsimple1028/swiftUI_ios14)**

<a id="#reference"></a>
# 参考文献
- [Design Code --- SwiftUI for iOS 14](https://designcode.io/swiftui-ios14)