iosswiftswiftuiuikitaudiokit

iOS - SwiftUI inside a UIKit View using AudioKit


I'm fairly new to Swift and MVVM, so my apologies if I misunderstand some of the architecture here and say something completely wrong.

I have an app written in Swift using UIKit with a main view controller that generates some sounds using AudioKit. I'd like to add a visualizer to that view, and it seems appropriate to use the AudioKitUI library to generate a visualization from the audio that my app is generating while in that storyboard view.

Most of the AudioKitUI stuff seems to be in SwiftUI on the backend. I've looked at using a UIHostingController but I get an error that the initializer is inaccessible due to internal protection level. If I copy/paste the SpectrogramView.swift from the AudioKitUI GitHub into a swift file, I am able to generate a preview successfully.

spectrogram view

I tried to put it into a UIHostingController inside a Container View, but I didn't exactly see how I should have the spectrogram read the audio node in real time if it's not in that view. So it put the UIHostingController inside my main view controller, added it as a child view, and added it as a subview to a blank UIView.

I'm not sure how to get this SwiftUI Visualization generator to work with UIKit, let alone inside one of my ViewController's sub views. Any tips or advice would be greatly appreciated.

This was my most recent attempt:

@IBOutlet var blankView: UIView!


override func viewDidLoad() {
    super.viewDidLoad()
    let spectroView = UIHostingController(rootView: SpectrogramView(node: sound.mixer))
    addChild(spectroView)
    blankView.addSubview(spectroView.view)
    }

Solution

  • It seems my code snippet in the original post wasn't far off. Here is the completed section to get the AudioKitUI Spectrogram View to work in a UIView.

     @IBOutlet weak var blankView: UIView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        //enable transport controls as buttons
        let spectroView = UIHostingController(rootView: SpectrogramView(node: sound.mixer))
        addChild(spectroView)
        spectroView.view.frame = blankView.bounds
        blankView.addSubview(spectroView.view)
        spectroView.didMove(toParent: self)
        }
    

    The spectrogram view now successfully appears in a subview of my main view controller. enter image description here