How to stop background from blocking other elements in Swift 4?

Question

I'm currently making a single view app in Swift 4 / Xcode 10 where there is an animated background and 6 buttons on the screen, with each button linking to a separate ViewController. When I run the app, the animated background seems to move to the front layer and blocks all of the buttons. How do I make it so that the buttons show up in front of the background?

The problem is, I did not create the buttons programatically, but instead dragged and dropped them from the objects library in the interface builder. This is why when I tried the solutions posted here and here, it didn't work, because I don't know if there is any actual code that references any of the buttons. For example, when I tried

view.bringSubview(toFront: theButton)

I wasn't sure what to put in place of theButton, or even where to put that snippet of code.

Below is the code I have on my 'home screen' view controller. My most pressing question is where I would insert code to move either the buttons to the front or the background to the back.

import UIKit
import AVFoundation
import AVKit

class ViewController: UIViewController {
    @IBOutlet weak var videoView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
    }
    private func setupView() {
        let path = URL(fileURLWithPath: Bundle.main.path(forResource: "Ocean_Waves_slow_motion_videvo", ofType: "mov")!)
        let player = AVPlayer(url: path)

        let newLayer = AVPlayerLayer(player: player)
        newLayer.frame = self.videoView.frame
        self.videoView.layer.addSublayer(newLayer)
        newLayer.videoGravity = AVLayerVideoGravity.resizeAspectFill

        player.play()
        player.actionAtItemEnd = AVPlayer.ActionAtItemEnd.none

        NotificationCenter.default.addObserver(self, selector: #selector(ViewController.videoDidPlayToEnd(_:)), name: NSNotification.Name(rawValue: "AVPlayerItemDidPlayToEndTimeNotification"), object: player.currentItem)
    }
    @objc func videoDidPlayToEnd(_ notification: Notification) {
        let player: AVPlayerItem = notification.object as! AVPlayerItem
        player.seek(to: CMTime.zero)
    }
}

Here is what my Main.storyboard looks like. If it helps, the hierarchy is currently:

View > Video View > View > Button Button Button Button Button Button

RajeshKumar R · Accepted Answer · 2019-05-19T04:39:09.277

0

1st View -> Video View -> buttonsBgView -> Button Button Button Button Button Button

Don't add the buttonsBgView as subview of Video View. Video View and buttonsBgView should be subview of 1st View.

1st View -> Video View

1st View -> buttonsBgView -> Button Button Button Button Button Button

Create a IBOutlet for the buttonsBgView, and bring that view to front

class ViewController: UIViewController {
    @IBOutlet weak var videoView: UIView!
    @IBOutlet weak var buttonsBgView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
        buttonsBgView.backgroundColor = .clear
        view.bringSubview(toFront: buttonsBgView)
    }
}

edited May 19 '19 at 04:39

answered May 19 '19 at 04:06

RajeshKumar R

15,445
2
38
70

Thank you for your fast response! I tried your solution and got [an unexpected nil value](https://i.imgur.com/MFTiplA.png). I think this could be because I didn't create the IBOutlet properly. The circle on line 14 is not filled in. Should I go to the Main.storyboard and drag a view from the objects library and place it on the view controller? – J. Wu May 19 '19 at 04:17
Sorry about that! Yes, I've fixed the IBOutlet but it's the same probably I originally had so now it no longer crashes. The animated background covers everything. I think I understand your logic, to put the buttons on a view, bring that view to the front and make the background transparent so that only the buttons show up. I have no idea why it's not working. Is there maybe something in the animated background code that brings it to the front as well? – J. Wu May 19 '19 at 04:33
Thank you so much for your help RajeshKumar! I can't figure out how to bring the buttonsBgView to the same level as videoView. I tried dragging it like you did in the gif, but it doesn't most. Should I delete it and create a new view? If so, how can I create it so it's not a subview of videoView? – J. Wu May 19 '19 at 04:48
@J.Wu Delete the old videoview and buttonsBgView. Drag and drop a view from object library. Now copy and paste the dropped view. Use one as video view, another one as buttonsBgView – RajeshKumar R May 19 '19 at 04:50
It worked! You have the patience of a saint. Thank you so much for your expertise! – J. Wu May 19 '19 at 05:05

How to stop background from blocking other elements in Swift 4?

1 Answers1