Background Blur

Author: Mithun

DesignCode.xcodeproj/project.pbxproj

@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		AB1D3B1C22D9CDEF00D0AEA6 /* HomeList.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB1D3B1B22D9CDEF00D0AEA6 /* HomeList.swift */; };
 		AB62172722D870540039BC73 /* Home.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB62172622D870540039BC73 /* Home.swift */; };
+		ABB215DC22DB353800424B38 /* BlurView.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB215DB22DB353800424B38 /* BlurView.swift */; };
 		ABE07CBF22D74F5700D209BE /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABE07CBE22D74F5700D209BE /* AppDelegate.swift */; };
 		ABE07CC122D74F5700D209BE /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABE07CC022D74F5700D209BE /* SceneDelegate.swift */; };
 		ABE07CC322D74F5700D209BE /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABE07CC222D74F5700D209BE /* ContentView.swift */; };
@@ -20,6 +21,7 @@
 /* Begin PBXFileReference section */
 		AB1D3B1B22D9CDEF00D0AEA6 /* HomeList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeList.swift; sourceTree = "<group>"; };
 		AB62172622D870540039BC73 /* Home.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Home.swift; sourceTree = "<group>"; };
+		ABB215DB22DB353800424B38 /* BlurView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BlurView.swift; sourceTree = "<group>"; };
 		ABE07CBB22D74F5700D209BE /* DesignCode.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = DesignCode.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		ABE07CBE22D74F5700D209BE /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		ABE07CC022D74F5700D209BE /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = "<group>"; };
@@ -65,6 +67,7 @@
 				ABE07CC222D74F5700D209BE /* ContentView.swift */,
 				AB62172622D870540039BC73 /* Home.swift */,
 				AB1D3B1B22D9CDEF00D0AEA6 /* HomeList.swift */,
+				ABB215DB22DB353800424B38 /* BlurView.swift */,
 				ABE07CC422D74F5900D209BE /* Assets.xcassets */,
 				ABE07CC922D74F5900D209BE /* LaunchScreen.storyboard */,
 				ABE07CCC22D74F5900D209BE /* Info.plist */,
@@ -157,6 +160,7 @@
 				ABE07CC122D74F5700D209BE /* SceneDelegate.swift in Sources */,
 				AB62172722D870540039BC73 /* Home.swift in Sources */,
 				ABE07CC322D74F5700D209BE /* ContentView.swift in Sources */,
+				ABB215DC22DB353800424B38 /* BlurView.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

DesignCode/BlurView.swift

@@ -0,0 +1,31 @@
+//
+//  BlurView.swift
+//  DesignCode
+//
+//  Created by Mithun x on 7/14/19.
+//  Copyright © 2019 Mithun. All rights reserved.
+//
+
+import SwiftUI
+
+struct BlurView: UIViewRepresentable {
+   
+   let style: UIBlurEffect.Style
+   
+   func makeUIView(context: UIViewRepresentableContext<BlurView>) -> UIView {
+      let view = UIView(frame: .zero)
+      view.backgroundColor = .clear
+      let blurEffect = UIBlurEffect(style: style)
+      let blurView = UIVisualEffectView(effect: blurEffect)
+      blurView.translatesAutoresizingMaskIntoConstraints = false
+      view.insertSubview(blurView, at: 0)
+      NSLayoutConstraint.activate([
+         blurView.heightAnchor.constraint(equalTo: view.heightAnchor),
+         blurView.widthAnchor.constraint(equalTo: view.widthAnchor),
+      ])
+      return view
+   }
+   
+   func updateUIView(_ uiView: UIView,
+                     context: UIViewRepresentableContext<BlurView>) {}
+}

DesignCode/ContentView.swift

@@ -15,6 +15,8 @@ struct ContentView: View {
 
    var body: some View {
       ZStack {
+         BlurView(style: .extraLight)
+         
          TitleView()
             .blur(radius: show ? 20 : 0)
             .animation(.default)

DesignCode/Home.swift

@@ -15,8 +15,12 @@ struct Home: View {
 
    var body: some View {
       ZStack {
+         HomeList()
+            .blur(radius: show ? 20 : 0)
+            .scaleEffect(showProfile ? 0.95 : 0)
+            .animation(.default)
+
          ContentView()
-            .background(Color.white)
             .cornerRadius(30)
             .shadow(radius: 20)
             .animation(.fluidSpring())

DesignCode/HomeList.swift

@@ -13,20 +13,37 @@ struct HomeList: View {
    var courses = coursesData
 
    var body: some View {
-      ScrollView(.horizontal, showsIndicators: false) {
-         HStack(spacing: 30.0) {
-            ForEach(courses) { item in
-               PresentationLink(destination: ContentView()) {
-                  CourseView(title: item.title,
-                             image: item.image,
-                             color: item.color,
-                             shadowColor: item.shadowColor)
+      VStack {
+         HStack {
+            VStack(alignment: .leading) {
+               Text("Courses")
+                  .font(.largeTitle)
+                  .fontWeight(.heavy)
+
+               Text("22 Courses")
+                  .color(.gray)
+            }
+            Spacer()
+         }
+         .padding(.leading, 70.0)
+         .padding(.bottom, 40)
+
+         ScrollView(.horizontal, showsIndicators: false) {
+            HStack(spacing: 30.0) {
+               ForEach(courses) { item in
+                  PresentationLink(destination: ContentView()) {
+                     CourseView(title: item.title,
+                                image: item.image,
+                                color: item.color,
+                                shadowColor: item.shadowColor)
+                  }
                }
             }
+            .padding(.leading, 40)
+            Spacer()
          }
-         .padding(.leading, 30)
-         Spacer()
       }
+      .padding(.top, 78)
    }
 }
 
@@ -48,10 +65,10 @@ struct CourseView: View {
    var body: some View {
       return VStack(alignment: .leading) {
          Text(title)
-            .font(/*@START_MENU_TOKEN@*/ .title/*@END_MENU_TOKEN@*/)
-            .fontWeight(/*@START_MENU_TOKEN@*/ .bold/*@END_MENU_TOKEN@*/)
+            .font(.title)
+            .fontWeight(.bold)
             .color(.white)
-            .padding(20)
+            .padding(30)
             .lineLimit(4)
             .padding(.trailing, 50)
 
@@ -61,7 +78,7 @@ struct CourseView: View {
             .resizable()
             .renderingMode(.original)
             .aspectRatio(contentMode: .fit)
-            .frame(width: 246, height: 200)
+            .frame(width: 246, height: 150)
             .padding(.bottom, 30)
       }
       .background(color)