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

はじめに

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

完成品↓

目次

1. Data Model追加
2. Visual Effect Blur
3. まとめ
4. 参考文献

Data Model追加

・まずはCardの中身を汎用できるように、CourseDetail.swiftを新たに作成し、白い括弧中のListを持ってきます。
　
　　

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

CoursesView.swift

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

   CloseButton()
..........
}

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回目の時に、data modelCourse.swiftを作ったので、それと同じよう別のdata modelを足します。
・実際の業務の場合では、aws/firebaseもしくはベンダーが提供したAPIからデータを読み込むのが一般的です。今みたいにデータを手打ちする場合は、何か修正があった場合に一回一回リリース必要があるので、ご注意ください。
　　

・2回目の時に作成したCourseRow.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()
    }
}

　　

Visual Effect Blur

・WWDC2020のサンプルアプリFrutaにVisual Effect Blurを使われて、フリーライセンスのため、そもままソースコードを持ってきます。
　　

・早速使ってみます。

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))

　　　　　

・Frutaからダウンロードしたソースコードを見れば、背景のスタイルはたくさんの選択肢があります。

CoursesView.swift

background(VisualEffectBlur(blurStyle: .dark).edgesIgnoringSafeArea(.all))

まとめ

ソースコードGithub

参考文献

• Design Code --- SwiftUI for iOS 14
• https://www.anchorblogs.com/details/6