ARKit: How to add button to ARView in storyboard?

Question

I am brand new to ARKit (and a novice in swift) but I am trying to create a basic AR app. I am following this tutorial in which a simple scene is created essentially doing everything in reality composer apart from the addition of a simple start scene button which is added to the ARView in the storyboard - you can see that specific moment in the tutorial here. When I attempt to do the same however, the button element replaces the ARView entirely, rather than it being added as a child of the ARView as happens in this tutorial.

You can see below a grab of what is going on. Here is the storyboard before I add the button.

I then search for a button element, drag onto ARView, at which point it replaces it, rather than adding as child. See below the result.

My xcode version is 11.2.

Any advice is much appreciated, and if any more info is needed, please ask. Thank you.

Joey Cardenas · Accepted Answer · 2020-01-25T22:30:51.450

4

You must nest both the ARView and Button under a UIView. First, add a UIView as a direct child to the ViewController. Then, add an ARView under the UIView that you created before. Then, you can also add a UIButton under that same UIView.

Edit: After Viewing the tutorial video linked in your question, the "ARView" the tutorial has as the child of the ViewController is not an actual ARView but a UIView renamed to "ARView", to clarify.

edited Jan 25 '20 at 22:30

answered Jan 25 '20 at 20:47

Joey Cardenas

111
8

Hi, thank you. If I could follow up, the hierarchy of elements has been created automatically when I start an `augmented reality app project` I have not edited the code or storyboard beyond what is provided by default. Am I able to do what you suggest through the storyboard? Or do I need to do this in code in `ViewController.swift`. If I drag a UIView element onto the storyboard it does, the same, replacing the `AR View` element in my hierarchy and then the app just displays a white screen.. Conscious I am asking basic questions but I thought what I was trying to achieve was simple – Nick Jan 25 '20 at 21:55
@Nick Yes, no code is needed. First you replace your existing ARView ith a UIView. Then you add another UIView as a child to the UIView you just created if you want. Then you add a button as a child to the same existing UIView. Also, you must have a different version of XCode than me, because I do not get this layout when I choose "AR app" to start. Hope this helps! Also, In the tutorial, the "AR View" you see the tutorial has is actually a UIView renamed to an ARView. Sorry it took me so long to respond, I was away from my computer. – Joey Cardenas Jan 25 '20 at 22:26
@Nick I'm sorry, I meant add an ARView as a child to the UIView if you want, not add a UIView as a child! My bad, didn't catch this until later. Sorry if I'm explaining this in a confusing way, there's just a lot of steps but it's simple. – Joey Cardenas Jan 25 '20 at 22:40
Hi - no problem at all - thank you, that works! So this is essentially 2 views on top of one another, one handling AR and the other handling UI, makes sense. I still don't completely understand what has changed though, as prior to a recent update I was able to add buttons to the default ARView (or thats what I thought was going on) That youtube video also seems to suggest that is possible it seems as though they have a type of view which is both Ar View and UIView enabled - otherwise how are they able to have both the AR working, and a button within the same element? anyway, thank you – Nick Jan 25 '20 at 23:09

Andy Jazz · Answer 2 · 2022-10-18T13:25:31.543

Manually

in main.storyboard, delete current ARView
add UIView to empty controller
add new ARView
activate layout constraints
add buttons (and other views)

Programmatically

The easiest way to add buttons to RealityKit's ARView is to add them programmatically. Using this approach, you do not need to delete the current ARView. If you want to programmatically activate NSLayoutConstraints, read this post.

Here's a code.

import RealityKit
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var arView: ARView!
    
    override func viewDidLoad() {
        super.viewDidLoad()           
        let boxAnchor = try! Experience.loadBox()
        arView.scene.anchors.append(boxAnchor)
        
        let rect1 = CGRect(x: 50, y: 50, width: 100, height: 50)
        let rect2 = CGRect(x: 120, y: 50, width: 100, height: 50)
        
        // PLAY BUTTON
        let playButton = UIButton(frame: rect1)
        playButton.setTitle("Play", for: .normal)
        playButton.addTarget(self, action: #selector(play), for: .touchUpInside)
        
        // STOP BUTTON
        let stopButton = UIButton(frame: rect2)
        stopButton.setTitle("Stop", for: .normal)
        stopButton.addTarget(self, action: #selector(stop), for: .touchUpInside)

        self.view.addSubview(playButton)
        self.view.addSubview(stopButton)
        
        self.loadAudio()
    }       
    @objc func play(sender: UIButton!) {
        self.audioController?.play()
    }
    @objc func stop(sender: UIButton!) {
        self.audioController?.pause()
    }
}

score 3 · Answer 3 · answered Jul 23 '20 at 22:55

Joey's correct. For some reason Apple's AR Template does not include a UIView, and you end with what Nick describes. Here is the step by step process so you can get use Interface Builder with RealityKit:

Create a New Project
Select Augmented Reality App
Enter Product Name. Select RealityKit for Content Technology, and Storyboard for User Interface.
Select Main.storyboard.
Press '+' and add a UIVIew over the ARVIew
Now press '+' again to drag a RealityKit AR View
Connect the new ARView to the arView outlet in the View Controller.
Now you can add UI elements as well without the AR View being replaced.

ARKit: How to add button to ARView in storyboard?

3 Answers3

Manually

Programmatically