Create new instant visual feedback.
What are previews
- This is simply a code snippet to make and display a view, using new #Preview macro makes it easy
- Designed to iterate faster, the minimal code will be recompiled when you make changes in your code to redisplay the preview
- They don’t emulate your code.. they are code
Writing previews
- Start with the macro #Preview
- Add one or more trailing closures of content
- You can configure the preview – Name it, or pass values
- You can preview Views and Widgets
- For Views:
- For SwiftUI, you can place the view in other views, like List{ YourView() }
- You can pass a name and configuration traits
- You will not see the canvas unless there is a Preview in the file. In one of three modes see buttons on bottom left of the canvas window, Live, Selection (or static mode), and Variants (show multiple versions by types).
- Multi cursor editing via Cmd-Option-E
- You have a settings mode to change type size, dark mode, etc.
- For Widgets:
- There are two kinds, Timeline Provider (with individual entries)
- Timeline Provider
- Preview Widget, timeline provider, and families to use for previewing (this is a variadic list
- You get animations by default if you step thru the timelines
- You an craft specific entries to set the values you’d like to see
- At this point in the video, I stopped and went over to my app Wasted Time and changed the Widget previews to use this new configuration. I know I have a bug in my widget I’ve not been able to resolve yet, and figured by setting this up I would be able to debug better. Now, what I noticed is that I had to add .containerBackground( (some color), for: .widget) to my widget’s to get the previews to work.
- Now back to the session
- You can Pin a preview so that when you go to other views,
- Live Activities (just set attributes and pass in set of states to test)
- Check out Bring Widget to Life for more
Previews in your project
- Previewing in Libraries
- Library targets can be used in any project
- You need to have an example app to run previews, could be your app, or something else which can be derived from the active Scheme, or it can make an app called XCPreviewAgent to load your preview automatically.
- If you turn your app into libraries you can create more efficient schemes for build times.
- You can also create simple preview-only apps to specify needed entitlements, etc. (like needing the photo library entitlement). You will need to set a dependency and then embedded this app in your library
- Providing sample assets
- To add in data to your previews, you can add assists in your Preview Content Preview Assets library – by setting these as Assets for Development you can make sure that the build doesn’t include this in your product. To set this go to Build Settings of your project and filler on development assets, then. Add the path or drag the content folder to the pop over.
- Leveraging Devices
- You could leverage assets and data on an actual device for development. To do this, use the preview device picker at the bottom the canvas, under More you can see all similar devices you have added. You can pick my feature in the popup, if you plug in your device to your Mac, it will preview on that device. You will still have access to all the preview settings and configurations.