Is it possible to use custom iOS UI elements like UILabel in augmented reality app

Viewed 1982

I am wondering if I can use UI elements like UIButton, UILabel in an augmented reality app with ARKit.

5 Answers

Yes, you can use UIKit elements by adding them to a UIView that's positioned above the view displaying the AR scene (ARSKView or ARSCNView).

If you create a new project in Xcode and select the "Augmented Reality App" template, you can see that the AR content is just a view like any other UIKit view.

Yes you can place UI elements on top of the ARSKView or ARSCNView displaying the AR scene:

let scanningPanel = UIImageView()
scanningPanel.backgroundColor = UIColor(white: 0.33, alpha: 0.6)
scanningPanel.layer.masksToBounds = true
scanningPanel.frame = CGRect(x: -2, 
                             y: self.sceneView.frame.height-270, 
                         width: 178, 
                        height: 50)

scanningPanel.layer.cornerRadius = 10

let scanInfo = UILabel(frame: CGRect(x: 8, 
                                     y: self.sceneView.frame.height-268, 
                                 width: 160, 
                                height: 45))

scanInfo.textAlignment = .left
scanInfo.font = scanInfo.font.withSize(15)
scanInfo.textColor = UIColor.white
scanInfo.text = "SCAN A SURFACE"

Adding:

self.sceneView.addSubview(scanningPanel)
self.sceneView.addSubview(scanInfo)

Removing:

if(scanInfo.isDescendant(of: self.sceneView)) {
    scanInfo.removeFromSuperview()
}

What worked best for me in main.storyboard: - delete SceneView - add regular UIView - add ARKit SceneKit View on top of that - then you can add buttons, etc.

If you are also interested in transparency modes for that UIView subclasses try my sample https://github.com/erikhric/ar-menu

You can use different blending modes. I guess .alpha will work for your purposes.

Related