├── .gitignore ├── Package.swift ├── LICENSE ├── README.md └── Sources └── VisualEffects ├── VisualEffectBlur-Mac.swift └── VisualEffectBlur-iOS.swift /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /.build 3 | /Packages 4 | /*.xcodeproj 5 | xcuserdata/ 6 | .swiftpm 7 | -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version:5.2 2 | // The swift-tools-version declares the minimum version of Swift required to build this package. 3 | 4 | import PackageDescription 5 | 6 | let package = Package( 7 | name: "VisualEffects", 8 | platforms: [ 9 | .macOS(.v10_15), 10 | .iOS(.v13) 11 | ], 12 | products: [ 13 | // Products define the executables and libraries a package produces, and make them visible to other packages. 14 | .library( 15 | name: "VisualEffects", 16 | targets: ["VisualEffects"]), 17 | ], 18 | dependencies: [ 19 | 20 | ], 21 | targets: [ 22 | .target( 23 | name: "VisualEffects", 24 | dependencies: []) 25 | ] 26 | ) 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright © 2020 Apple Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Visual Effects

2 | 3 |

4 | 5 | 6 | 7 | 8 | Twitter: @twostraws 9 | 10 |

11 | 12 | **If you're able to target iOS 15 and later, this repository is no longer needed because there is dedicated SwiftUI API for this now.** See here: [How to add visual effect blurs](https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-visual-effect-blurs) 13 | 14 |
15 | 16 | This repository is a wrapper for `UIVisualEffectView` and `NSVisualEffectView`, which will be useful until SwiftUI introduces an official view that does the same. 17 | 18 | SwiftUI does not have an official `UIVisualEffectView` wrapper, so a number of folks have attempted to make one with varying degrees of success. Fortunately for all of us, Apple has released their own wrapper for both iOS and macOS, licensed under the MIT license. This repository hosts that wrapper as a Swift package, so you can use it yourself. 19 | 20 | I ([Paul Hudson](https://twitter.com/twostraws)) have made only tiny changes to their code to aid readability, and to allow it to work across both platforms from a single package. 21 | 22 | 23 | ## Example code 24 | 25 | This will place a `VisualEffectBlur` over a linear gradient, with some text inside the blur getting a vibrancy effect. 26 | 27 | ```swift 28 | import SwiftUI 29 | import VisualEffects 30 | 31 | struct ContentView: View { 32 | var body: some View { 33 | ZStack { 34 | LinearGradient( 35 | gradient: Gradient(colors: [.red, .blue]), 36 | startPoint: .topLeading, 37 | endPoint: .bottomTrailing 38 | ) 39 | 40 | VisualEffectBlur(blurStyle: .systemUltraThinMaterial, vibrancyStyle: .fill) { 41 | Text("Hello World!") 42 | .font(.largeTitle) 43 | } 44 | } 45 | } 46 | } 47 | ``` 48 | 49 | 50 | 51 | ## License 52 | 53 | This package is released under the MIT license, as shown below. 54 | 55 | Copyright © 2020 Apple Inc. 56 | 57 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 58 | 59 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 60 | 61 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 62 | -------------------------------------------------------------------------------- /Sources/VisualEffects/VisualEffectBlur-Mac.swift: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright © 2020 Apple Inc. 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | */ 10 | 11 | import SwiftUI 12 | 13 | #if os(macOS) 14 | 15 | public struct VisualEffectBlur: View { 16 | private var material: NSVisualEffectView.Material 17 | private var blendingMode: NSVisualEffectView.BlendingMode 18 | private var state: NSVisualEffectView.State 19 | 20 | public init( 21 | material: NSVisualEffectView.Material = .headerView, 22 | blendingMode: NSVisualEffectView.BlendingMode = .withinWindow, 23 | state: NSVisualEffectView.State = .followsWindowActiveState 24 | ) { 25 | self.material = material 26 | self.blendingMode = blendingMode 27 | self.state = state 28 | } 29 | 30 | public var body: some View { 31 | Representable( 32 | material: material, 33 | blendingMode: blendingMode, 34 | state: state 35 | ).accessibility(hidden: true) 36 | } 37 | } 38 | 39 | // MARK: - Representable 40 | extension VisualEffectBlur { 41 | struct Representable: NSViewRepresentable { 42 | var material: NSVisualEffectView.Material 43 | var blendingMode: NSVisualEffectView.BlendingMode 44 | var state: NSVisualEffectView.State 45 | 46 | func makeNSView(context: Context) -> NSVisualEffectView { 47 | context.coordinator.visualEffectView 48 | } 49 | 50 | func updateNSView(_ view: NSVisualEffectView, context: Context) { 51 | context.coordinator.update(material: material) 52 | context.coordinator.update(blendingMode: blendingMode) 53 | context.coordinator.update(state: state) 54 | } 55 | 56 | func makeCoordinator() -> Coordinator { 57 | Coordinator() 58 | } 59 | 60 | } 61 | 62 | class Coordinator { 63 | let visualEffectView = NSVisualEffectView() 64 | 65 | init() { 66 | visualEffectView.blendingMode = .withinWindow 67 | } 68 | 69 | func update(material: NSVisualEffectView.Material) { 70 | visualEffectView.material = material 71 | } 72 | 73 | func update(blendingMode: NSVisualEffectView.BlendingMode) { 74 | visualEffectView.blendingMode = blendingMode 75 | } 76 | 77 | func update(state: NSVisualEffectView.State) { 78 | visualEffectView.state = state 79 | } 80 | } 81 | } 82 | 83 | #endif 84 | -------------------------------------------------------------------------------- /Sources/VisualEffects/VisualEffectBlur-iOS.swift: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright © 2020 Apple Inc. 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | */ 10 | 11 | import SwiftUI 12 | 13 | #if os(iOS) 14 | public struct VisualEffectBlur: View { 15 | /// Defaults to .systemMaterial 16 | var blurStyle: UIBlurEffect.Style 17 | 18 | /// Defaults to nil 19 | var vibrancyStyle: UIVibrancyEffectStyle? 20 | 21 | var content: Content 22 | 23 | public init(blurStyle: UIBlurEffect.Style = .systemMaterial, vibrancyStyle: UIVibrancyEffectStyle? = nil, @ViewBuilder content: () -> Content) { 24 | self.blurStyle = blurStyle 25 | self.vibrancyStyle = vibrancyStyle 26 | self.content = content() 27 | } 28 | 29 | public var body: some View { 30 | Representable(blurStyle: blurStyle, vibrancyStyle: vibrancyStyle, content: ZStack { content }) 31 | .accessibility(hidden: Content.self == EmptyView.self) 32 | } 33 | } 34 | 35 | // MARK: - Representable 36 | 37 | extension VisualEffectBlur { 38 | struct Representable: UIViewRepresentable { 39 | var blurStyle: UIBlurEffect.Style 40 | var vibrancyStyle: UIVibrancyEffectStyle? 41 | var content: Content 42 | 43 | func makeUIView(context: Context) -> UIVisualEffectView { 44 | context.coordinator.blurView 45 | } 46 | 47 | func updateUIView(_ view: UIVisualEffectView, context: Context) { 48 | context.coordinator.update(content: content, blurStyle: blurStyle, vibrancyStyle: vibrancyStyle) 49 | } 50 | 51 | func makeCoordinator() -> Coordinator { 52 | Coordinator(content: content) 53 | } 54 | } 55 | } 56 | 57 | // MARK: - Coordinator 58 | 59 | extension VisualEffectBlur.Representable { 60 | class Coordinator { 61 | let blurView = UIVisualEffectView() 62 | let vibrancyView = UIVisualEffectView() 63 | let hostingController: UIHostingController 64 | 65 | init(content: Content) { 66 | hostingController = UIHostingController(rootView: content) 67 | hostingController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight] 68 | hostingController.view.backgroundColor = nil 69 | blurView.contentView.addSubview(vibrancyView) 70 | 71 | blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] 72 | vibrancyView.contentView.addSubview(hostingController.view) 73 | vibrancyView.autoresizingMask = [.flexibleWidth, .flexibleHeight] 74 | } 75 | 76 | func update(content: Content, blurStyle: UIBlurEffect.Style, vibrancyStyle: UIVibrancyEffectStyle?) { 77 | hostingController.rootView = content 78 | 79 | let blurEffect = UIBlurEffect(style: blurStyle) 80 | blurView.effect = blurEffect 81 | 82 | if let vibrancyStyle = vibrancyStyle { 83 | vibrancyView.effect = UIVibrancyEffect(blurEffect: blurEffect, style: vibrancyStyle) 84 | } else { 85 | vibrancyView.effect = nil 86 | } 87 | 88 | hostingController.view.setNeedsDisplay() 89 | } 90 | } 91 | } 92 | 93 | // MARK: - Content-less Initializer 94 | 95 | public extension VisualEffectBlur where Content == EmptyView { 96 | init(blurStyle: UIBlurEffect.Style = .systemMaterial) { 97 | self.init(blurStyle: blurStyle, vibrancyStyle: nil) { 98 | EmptyView() 99 | } 100 | } 101 | } 102 | #endif 103 | --------------------------------------------------------------------------------