{"id":801,"date":"2023-09-27T20:32:07","date_gmt":"2023-09-27T18:32:07","guid":{"rendered":"https:\/\/mic.st\/blog\/?p=801"},"modified":"2024-02-08T00:24:58","modified_gmt":"2024-02-07T23:24:58","slug":"swiftui-ornaments-modifier-for-visionos-app-on-vision-pro","status":"publish","type":"post","link":"https:\/\/mic.st\/blog\/swiftui-ornaments-modifier-for-visionos-app-on-vision-pro\/","title":{"rendered":"SwiftUI .ornaments modifier for visionOS App on Vision Pro"},"content":{"rendered":"\n

Currently, I am experimenting on a Vision Pro app as a side project. One thing I was not aware of for quite some time was this new paradigm with the fancy name Ornaments<\/em> only used on visionOS. I just happily added buttons near the bottom edge of my view. However, using an ornament is the way to go. It is basically a kind of elevated group of controls at the bottom of the view. You can read more on it in Apple’s Human Interface Guidelines (HIG): https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ornaments\/<\/a><\/p>\n\n\n\n

Using new SwiftUI features<\/h2>\n\n\n\n

If you want to learn about other new SwiftUI features you can use for making your visionOS app feeling “more home”, please checkout my other article:
https:\/\/mic.st\/blog\/develop-and-release-a-visionos-app-without-vision-pro\/<\/a><\/p>\n\n\n\n

How to implement ornaments<\/h2>\n\n\n\n

When I first tried implementing my ornament, it just did not work. And I could not really find any useful information on why it did not work. What I found out about after sleeping over it: Your scene must not be of window style must not be .volumetric<\/code> it has to be .automatic<\/code> (or plain). If it’s your initial screen also make sure to set UIWindowSceneSessionRoleApplication<\/code> for the key UIApplicationPreferredDefaultSceneSessionRole<\/code> inside of your info.plist.<\/p>\n\n\n\n

This means your info.plist should have this content:<\/p>\n\n\n

<dict<\/span>><\/span>\n<\/span><\/span>\t<key<\/span>><\/span>UIApplicationSceneManifest<\/key<\/span>><\/span>\n<\/span><\/span>\t<dict<\/span>><\/span>\n<\/span><\/span>\t\t<key<\/span>><\/span>UISceneConfigurations<\/key<\/span>><\/span>\n<\/span><\/span>\t\t<dict<\/span>\/><\/span>\n<\/span><\/span>\t\t<key<\/span>><\/span>UIApplicationPreferredDefaultSceneSessionRole<\/key<\/span>><\/span>\n<\/span><\/mark>\t\t<string<\/span>><\/span>UIWindowSceneSessionRoleApplication<\/string<\/span>><\/span>\n<\/span><\/mark>\t<\/dict<\/span>><\/span>\n<\/span><\/span><\/dict<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
And your initial WindowGroup<\/code> should look similar to this (so you can still set the view’s bounds if you want):<\/p>\n\n\n
WindowGroup<\/span>(id: someIDIfNeeded) {\n\tMyFunkyView<\/span>()\n}\n.windowStyle(.automatic) \/\/ or .plain<\/span>\n.defaultSize(Size3D<\/span>(width: 1.8<\/span>, height: 1<\/span>, depth: 0.1<\/span>), in<\/span>: .meters)<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
The following won’t work. Or at least the ornament will not be shown:<\/p>\n\n\n
WindowGroup<\/span>(id: someIDIfNeeded) {\n\tMyFunkyView<\/span>()\n}\n.windowStyle(.volumetric)\n.defaultSize(Size3D<\/span>(width: 1.8<\/span>, height: 1<\/span>, depth: 0.1<\/span>), in<\/span>: .meters)<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
As soon as you have this set up, you can just use the .ornaments<\/code> modifier e.g. on your NavigationStack<\/code> like this:<\/p>\n\n\n
.ornament(visibility: .visible, attachmentAnchor: .scene(.bottom), contentAlignment: .center) {\n\tHStack<\/span>(spacing: 16<\/span>) {\n\t\tText<\/span>(\"HELLO ORNAMENT \ud83d\ude80\"<\/span>)\n\t\tButton<\/span> {\n\t\t\tprint<\/span>(\"Tapped that!\"<\/span>)\n\t\t} label: {\n\t\t\tLabel<\/span>(\"Big Button\"<\/span>, systemImage: \"hare\"<\/span>)\n\t\t\t\t.padding(16<\/span>)\n\t\t}\n\t}\n\t.font(.extraLargeTitle)\n\t.padding(32<\/span>)\n\t.glassBackgroundEffect()\n}<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
Eventually, this is how the ornament above will look like:<\/p>\n\n\n
\n
\"Screenshot
Rendering of the code above inside of the Vision Pro simulator<\/figcaption><\/figure>\n<\/div>\n\n\n
Conclusion<\/h2>\n\n\n\n
If your ornament is not show, make sure you are showing it on an WindowGroup<\/code> using .plain<\/code> window style. Otherwise, it is just not shown for some reason.<\/p>\n\n\n\n
Happy Coding! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"
Currently, I am experimenting on a Vision Pro app as a side project. One thing I was not aware of for quite some time was this new paradigm with the fancy name Ornaments only used on visionOS. I just happily added buttons near the bottom edge of my view. However, using an ornament is the…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-801","post","type-post","status-publish","format-standard","hentry","category-ios-development"],"_links":{"self":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/comments?post=801"}],"version-history":[{"count":4,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/801\/revisions"}],"predecessor-version":[{"id":860,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/posts\/801\/revisions\/860"}],"wp:attachment":[{"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/media?parent=801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/categories?post=801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mic.st\/blog\/wp-json\/wp\/v2\/tags?post=801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}