Elevate your windowed app for Spatial Computing


Spatial computing means your apps fit in the your surroundings

While SwiftUI is the focus, UIKit can take advantage of much of this content.

SwiftUI in the Share Space

  • Most of the system applications were written in SwiftUI – so you can see that it is similar to iPad apps but taking full advance of the environment 
  • This session updates the BackYard bird sample app, so until the VisionOS extensions are available you won’t be able code along.  Watch this session to become familiar for when they are available.
  • You need to add a new run definition for the “new platform”, if you use native vs. designed for iPad it will change to the new Glass background.  You don’t have to deal with light and dark

Polish your app

  • Updating your custom views, note that physical resolution may make some assets blurry, try updating your content assets with Vector assets.  If you use Bitmaps you may see blurring
    • Change you “Scales” parameter in the inspector of the asset and choose single scale for vectors, also select preserve vector data.
  • Change solid color backgrounds, as they will not change contrast with Glass.  Add “Vibrancy” to provide additional clarity on glass.  It’s there by default with standard controls.  So things like .foreground(.tertiary), etc.   You can remove color scheme check too.
  • Interactive targets should be reviewed to see how they work on the new platform.  If you have standard controls you should be ok, but if you’ve customized them, you will need to review your code.
    • There are hover effects to show focus. If you have customer controls you should add your hover effects – by default you can just use .hoverEffect() – but you can add a contentShape modifier to clean up the view.
    • By changing a view to a button, you get more appropriate changes.

Brand new concepts

  • Top level layout changes – you should use a TabView instead of a Sidebar – this will give you the side buttons that expand with titles when the user focuses on it.
    • This also gives more room for the content, it is called an ornament 
  • The bottom toolbar  is also a toolbar modifier of .bottomOrnament placement option.
    • You can build custom ornaments