【初心者】Swift UIを勉強する その⑬ ーーー Divider(区切り) と Visual Effect Blur(背景透過)

# はじめに

Cardの中身はずっと仮のデータを置いてあったので、今回はリアルのデータと入れ替える作業をやります。
また、Visual Effect BlurでiPadの背景透過を試します。

完成品↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/eec1b9a6-4956-d4b9-cb5a-0a4b7906107f.gif" width=40%> 


# 目次
<!-- タイトルとアンカー名を編集 -->
1. [Data Model追加](#Data Model追加)
2. [Visual Effect Blur](#Visual Effect Blur)
3. [まとめ](#まとめ)
4. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#Data Model追加"></a>
# Data Model追加

・まずはCardの中身を汎用できるように、`CourseDetail.swift`を新たに作成し、白い括弧中のListを持ってきます。
　
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/892a0c4a-420a-f7d5-1ac4-1582a2db9a2b.png" width=90%>　　





・`CourseDetail.swift`に`selectedItem`と`namespace`は存在してないため、`CourseView.swift`から引数をもらう必要があります。


```swift:CoursesView.swift
if selectedItem != nil {
   ZStack(alignment: .topTrailing) {
        CourseDetail(course: selectedItem!, nameSpace: namespace)
    
   CloseButton()
..........
}
```
<br>

```swift:CoursesDetail.swift
var course: Course = courses[0]
var nameSpace: Namespace.ID
    
    var body: some View {
        VStack {
            ScrollView {
                CourseItem(course: course)
                    .matchedGeometryEffect(id: course.id, in: nameSpace)
                    .frame(height: 300)
                VStack {
                    ForEach(courseSections) { item in
                        CourseRow(item: item)
                        Divider() //区切り
                    }
                }
                .padding()
            }
        }
        .background(Color("Background 1"))
        .clipShape(RoundedRectangle(cornerRadius: 22, style: .continuous))
        .matchedGeometryEffect(id: "container\(course.id)", in: nameSpace)
        .edgesIgnoringSafeArea(.all)
    }
}
```

・[9回目](https://qiita.com/anchor_/items/d7c2d07dfd13b54b653a)の時に、data model`Course.swift`を作ったので、それと同じよう別のdata modelを足します。
・実際の業務の場合では、aws/firebaseもしくはベンダーが提供したAPIからデータを読み込むのが一般的です。今みたいにデータを手打ちする場合は、何か修正があった場合に一回一回リリース必要があるので、ご注意ください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/877b3012-d4a4-d2be-6240-085d57fb367f.png" width=60%>　　

・[2回目](https://qiita.com/anchor_/items/4ad5b1705589ce0e4e4d)の時に作成した`CourseRow.swift`は今回追加したデータモジュールを使います。
・これでデータモジュールの使い回しは完了です。

```swift:CoursesView.swift
var item: CourseSection = courseSections[0]

var body: some View {
    HStack(alignment: .top) {
        Image(item.logo)
            .renderingMode(.original)
            .frame(width: 48.0, height: 48.0)
            .imageScale(.medium)
            .background(item.color)
            .clipShape(Circle())
            .foregroundColor(.white)
        VStack(alignment: .leading, spacing: 4.0) {
            Text(item.title)
                .font(.subheadline)
                .bold()
            Text(item.subtitle)
                .font(.subheadline)
                .bold()
        }
        Spacer()
    }
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/13f20f54-6879-802b-4aae-e1a87bedfe1e.gif" width=40%>　　


<a id="#Visual Effect Blur"></a>
# Visual Effect Blur

・WWDC2020のサンプルアプリ[Fruta](https://developer.apple.com/documentation/swiftui/fruta_building_a_feature-rich_app_with_swiftui)に`Visual Effect Blur`を使われて、フリーライセンスのため、そもままソースコードを持ってきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/3b3dffd0-6886-875e-53bf-3e32b9333463.png" width=60%>　　

・早速使ってみます。

```swift:CoursesView.swift
if selectedItem != nil {
    ZStack(alignment: .topTrailing) {
        CourseDetail(course: selectedItem!, nameSpace: namespace)

        CloseButton()
            .padding(.trailing, 16)
            .onTapGesture {
                withAnimation(
                    .spring()) {
                    show.toggle()
                    selectedItem = nil
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                        isDisabled = false
                    }
                }
            }
    }
    .zIndex(2)
    .frame(maxWidth: 500)
    .frame(maxWidth: .infinity)
    .background(VisualEffectBlur().edgesIgnoringSafeArea(.all))
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/d9bdfb50-c9ff-c232-95ce-2c149029cb6b.gif">　　　　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/8c2ce1aa-5a06-cb01-7569-57bfcddfb3f0.gif"> 

・[Fruta](https://developer.apple.com/documentation/swiftui/fruta_building_a_feature-rich_app_with_swiftui)からダウンロードしたソースコードを見れば、背景のスタイルはたくさんの選択肢があります。
![截屏2021-04-17 21.08.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/13b30d4b-a367-ec3d-dbc4-175683febfd0.png)

```swift:CoursesView.swift
background(VisualEffectBlur(blurStyle: .dark).edgesIgnoringSafeArea(.all))
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/eec1b9a6-4956-d4b9-cb5a-0a4b7906107f.gif" width=40%> 

<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)
- https://www.anchorblogs.com/details/6