How to blur what is bellow a view not inside

🎤 General Discussion Swift
1

Hello guys ;

I’m wondering how can I create an effect similar to Apple Music view where is the track name:

Unknown.jpg719×1280 93.4 KB

Here, when I scroll the main view, the content that pass below the track name view is blurred; I tried a lot of tutorials of blur effect in swift, but what they teach is to blur a view inside, not what I want. :confused:

Any suggestions?

2

Hi @chr0x and welcome to the forums!

What you are looking for is UIVisualEffectView, it’s a simple UIView subclass that will blur any content underneath it. I put together the following implementation that you can paste into a playground to experiment with:

import UIKit
import PlaygroundSupport

let view = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 200.0, height: 400.0))
view.backgroundColor = .lightGray

let scrollView = UIScrollView(frame: CGRect(x: 0.0, y: 0.0, width: 200.0, height: 400.0))
scrollView.contentSize = CGSize(width: 200.0, height: 700.0)
view.addSubview(scrollView)

let redView = UIView(frame: CGRect(x: 0.0, y: 300.0, width: 200.0, height: 400.0))
redView.backgroundColor = .red
scrollView.addSubview(redView)

let blurEffect = UIBlurEffect(style: .dark) // .light, .extraLight
let visualEffectView = UIVisualEffectView(effect: blurEffect)
visualEffectView.frame = CGRect(x: 0.0, y: 200.0, width: 200.0, height: 200.0)
view.addSubview(visualEffectView)

// scroll the top part to see the content move under the blur
PlaygroundPage.current.liveView = view

You can also check out this tutorial going a bit deeper into the API: https://www.raywenderlich.com/84043/ios-8-visual-effects-tutorial