Dive deep with SwiftUI – Discover


What’s new in SwiftUI

It’s a SwiftUI party — and you’re invited! Join us as we share the latest updates and a glimpse into the future of UI framework design. Discover deep levels of customization, advanced techniques for layout, elegant strategies for sharing, and rock-solid structural approaches for designing an app…



Challenge: SwiftUI navigation hotdish – Discover


What’s piping hot, golden-crusted, and filled with mystery ingredients? A divine hotdish, you betcha! But this SwiftUI challenge doesn’t involve tater tots or cream of mushroom soup; in fact, we’re inviting you to throw away the recipe book and mix up your own ingredients for a new kind of navigation supper.

Prep your ChallengeContentView to create a hotdish of your own, mixing together SwiftUI navigation ingredients like stack view, multicolumn layout, and state restoration.

Begin the challenge

Before you become a SwiftUI hotdish chef, it’s important to understand the techniques behind a variety of recipes. Make sure to watch The SwiftUI Cookbook for Navigation from WWDC22 to get started on your culinary adventure.




The SwiftUI cookbook for navigation

The recipe for a great app begins with a clear and robust navigation structure. Join the SwiftUI team in our proverbial coding kitchen and learn how you can cook up a great experience for your app. We’ll introduce you to SwiftUI’s navigation stack and split view features, show you how you can…

For this dish, you’ll be cooking with the “Bringing robust navigation structure to your SwiftUI app” sample code. Download it to your device to start the challenge.

Bringing robust navigation structure to your SwiftUI app

You can get a feel for your SwiftUI ingredients by exploring and modifying StackContentView, TwoColumnContentView, or ThreeColumnContentView in the project.

Once you’re feeling ready, head to the ChallengeContentView, where you can mix and match any navigation ingredients you might need to craft a prize-winning hotdish! (You can even pick up a few new APIs from “What’s new in SwiftUI” to add some spice to your meal.) Incorporate your own app’s ingredients and voila! You’ve got a secret recipe for the ages. 




What’s new in SwiftUI

It’s a SwiftUI party — and you’re invited! Join us as we share the latest updates and a glimpse into the future of UI framework design. Discover deep levels of customization, advanced techniques for layout, elegant strategies for sharing, and rock-solid structural approaches for designing an app…

Explore #WWDC22Challenges on social media

Read the WWDC22 Challenges Terms and Conditions





Challenge: SwiftUI science fiction! – Discover


With its robots, spaceships, and occasional brains floating in jars, science fiction is the perfect playground for a creative challenge with SwiftUI. And so we’re inviting you to conceptualize or recreate a scene from your sci-fi dreams. Whether you use floating numbers, glowing monochrome code, or something from another universe, this is your chance to build the interface of your science-fiction dreams… or nightmares!

Begin the challenge

Set the scene and picture the science-fiction world you want to create. Are you in the near future? Part of an underground insurgency questioning the status quo? Inside a mysterious building, known only to those who work there? Floating out by a broken moon?

How would you interact with devices in this world? What sort of technology would you use? Your mission is to create a SwiftUI view in Xcode that brings that interface into our reality. For inspiration, try out SwiftUI tricks like layout and content transitions, which can help you peer through the fabric of spacetime (design-wise, at least).

Next steps

When you’ve finished your dystopian masterpiece, share it on Twitter with the hashtag #WWDC22Challenges, or share your work in the SwiftUI Study Hall. And if you’d like to discuss this or other SwiftUI topics, join the team at events all throughout the week at WWDC22.

Explore #WWDC22Challenges on social media

Read the WWDC22 Challenges Terms and Conditions





Challenge: Throwback Thursday with SwiftUI – Discover


Ready to add some chic retro styling to your SwiftUI views? In this challenge, we’re inviting you to create a SwiftUI view that reimagines your app or concept clothed in the interfaces of the past. Dress your UI up in the gorgeous grayscale of System 6, the linen of early iPhoneOS, or another time period entirely!

We also welcome you to visit the SwiftUI Study Hall to collaborate on this challenge. Ask questions, connect with other developers, and share your creations.

Begin the challenge

To get started, pick a year, era, or color scheme. Then, snap a screen from your app and take it back to those glory days. If you need a boost (or a challenge), use a random number generator to choose a year between 1984 and 2013 — or open up a Swift Playground:

print("Reimagine your app's interface like it's from the year (myCoolRetroYear)!")
let myCoolRetroYear = Int.random(in: 1984..<2013)

Wherever you land, think about the Apple Design Languages prominent during that era. If you’re newer to SwiftUI, experiment with Xcode Previews to see how much code the tools will write for you. If you have more experience, take this chance to play around. (And we love a reboot: If you joined us for the original 2021 SwiftUI Throwback Challenge, feel free to resurrect your 2021 project.)

Next steps

Share your time-machine masterpiece on Twitter with the hashtag #WWDC22Challenges, or share your work in the SwiftUI Study Hall. And if you’d like to discuss other SwiftUI topics, join the team at events throughout the remainder of the week at WWDC22.

Explore #WWDC22Challenges on social media

Read the WWDC22 Challenges Terms and Conditions





Challenge: Menu bar extras with SwiftUI – Discover


And now, a brief message from your friend, the Mac menu bar:

Hi! 👋🏻 I’m the menu bar! I always love making File → New Friends. We might have first met in the early 1980s, but I’ve only gotten more powerful and helpful (Format → Font → Humble Brag).

I’ve always had opinions. During the 90s, I was the one who told you you were exceptional every night (Special → Sleep). I have constant viewpoints about what time it is. And I don’t mean to Window → Minimize my contributions, but even Siri wants to hang out with me.

I have enjoyed capturing your full attention for some years. But now I’ve decided to share the Spotlight. Menu bar extras have arrived in SwiftUI!

So here’s your challenge: Build me a menu bar extra in SwiftUI that I’d wear with pride. I’d drop down with joy if you’d make a little utility for me, and I’d be a click above ecstatic if you gave me the honor of hosting a small portion of your app.

Begin the challenge

To help you build a menu bar extra and complete the Mac menu bar’s challenge, we’ve compiled a few resources to help you get started:




Bring multiple windows to your SwiftUI app

Discover the latest SwiftUI APIs to help you present windows within your app’s scenes. We’ll explore how scene types like MenuBarExtra can help you easily build more kinds of apps using SwiftUI. We’ll also show you how to use modifiers that customize the presentation and behavior of your app…

MenuBarExtra

Explore the Human Interface Guidelines for menu bar extras

We welcome you to visit the SwiftUI Study Hall to collaborate on this challenge! Ask questions, connect with other developers, and share your creations.

And to close out this challenge, one more note from the menu bar:

Make sure you File → Share with me what you did on Twitter with the hashtag #WWDC22Challenges. We hope you’ve had a great Edit → Select All → WWDC22!



Challenge: SwiftUI Animation Extravaganza! – Discover


Get your imagination ready for some high-quality visualization: We invite you to envision an animation and bring it to life using SwiftUI and Swift Playgrounds. Your animation can include text, shapes, colors, sounds, explosions, dancing cats — whatever brings you joy.

You could create a visualization that melts colors across an iPad screen as you tilt the device using CoreMotion, or code an animation that responds to environmental sounds from the microphone. Maybe your animation is generated by an AI; maybe it’s manually created through custom gestures.

Visit the Developer Tools Study Hall to collaborate on this challenge! Ask questions, connect with other developers, and share your creations.

Begin the challenge

To help get you started, check out the Animating Shapes project in Swift Playgrounds, which teaches you the basics of creating animations in SwiftUI and lets you browse a range of sample animations created using the framework. Use this as a jumping-off point for your own animation — or create a new project and start hacking from scratch.

Download Swift Playgrounds for macOS

Download Swift Playgrounds for iOS

Learn more about Swift Playgrounds

Need a bit of inspiration? Check out Animating Shapes, navigate to RollinRainbow.swift, and check out the wave effect applied across each column of a grid. Elsewhere, visit DancingDots.swift to see how you can use observable objects to animate a dynamic range of scale, color, and offset changes.

To find more resources, check out “Add rich graphics to your SwiftUI app” from WWDC21 or the web tutorial “Animating Views and Transitions.” And you can also explore using the SwiftUI Canvas to draw rich, dynamic graphics. Good luck!




Add rich graphics to your SwiftUI app

Learn how you can bring your graphics to life with SwiftUI. We’ll begin by working with safe areas, including the keyboard safe area, and learn how to design beautiful, edge-to-edge graphics that won’t underlap the on-screen keyboard. We’ll also explore the materials and vibrancy you can use…

Animating Views and Transitions

Canvas

Share your SwiftUI animations on Twitter with the hashtag #WWDC22Challenges, or show off your work in the Developer Tools Study Hall. And if you’d like to discuss animation or other aspects of SwiftUI and Swift Playgrounds, join the teams at events throughout the remainder of the week at WWDC22.

Explore #WWDC22Challenges on social media

Read the WWDC22 Challenges Terms and Conditions





Challenge: Animated artistry in SwiftUI – Discover


Put trigonometry to good use and show us your artistic side by creating a stunning graphical animation in SwiftUI.

Begin the challenge

The SwiftUI canvas is a powerful new way to represent and animate graphics, while drawingGroup remains a great way to flatten and render views offscreen to create beautiful graphics. Explore both canvas and drawingGroup and create an awesome graphical animation that you can animate with animations or the new TimelineView. Add your creation to a view in your existing app project, or start an entirely new project in Xcode.




Add rich graphics to your SwiftUI app

Don’t forget to consider the accessibility and design implications of your concept. Have you made sure your animation is fully accessible to everyone? Do your awesome graphics follow the Human Interface Guidelines with regard to safe areas and contrast ratios? We’re excited to see what you can make in just a day using platform best practices!

Want to share your work-in-progress or collaborate with other developers? You can show off your finished animation in the Developer Forums.

Visit the Apple Developer Forums

Resources

Read the WWDC21 Challenges Terms and Conditions



SwiftUI &amp; UI Frameworks







Challenge: Throwback with SwiftUI – Discover


Pencil drawing a MacOS window

Whether you’ve been coding for 40 years, you’re new to the SwiftUI scene, or you’re a designer — everyone loves a good throwback. Give in to the nostalgia and imagine what your app might look like if designed for the Mac or iPhone interfaces of yesteryear. Are you a fan of the refreshing feel of 2000s-era Aqua? Perhaps you prefer the iconic grayscale of System 6. Or maybe you’ve been hoping for a return to the early days of iPhoneOS skeumorphism. Now’s your chance: Travel back in time with us and design a SwiftUI view that embraces that retro styling.

Begin the challenge

Before you travel through time, it’s important to choose your digital companion: are you designing a view for an existing app, or bringing an entirely new view idea along for the ride? Once you’ve decided, it’s time to fire up Xcode. Use your favorite random number generator to choose a year between 1984 and 2013 — or if you like, open up a Swift Playground to take you back in time:

let myCoolRetroYear = Int.random(in: 1984..<2013)
print("Reimagine your app's interface like it's from the year (myCoolRetroYear)!")

Once you’ve settled on a year, begin imagining your interface with the Apple Design Languages prominent during that time! For designers and those newer to the world of code, explore how much UI you can create with the help of Xcode Previews. And when it’s time to start adding code, see how simple and fun SwiftUI makes it. For seasoned code warriors, further your SwiftUI knowledge and explore the new features of SwiftUI that will take your recreated artifact to the next level.

Want to share your work-in-progress or collaborate with other developers? You can show off your finished design in the Developer Forums.

Visit the Apple Developer Forums

Resources




Introduction to SwiftUI

Read the WWDC21 Challenges Terms and Conditions



Challenge: Focus on Focus APIs in SwiftUI – Discover


Image showing three text fields with one in focus

With device input — as with all things in life — where you put your focus matters. Focus can help people move through your app, whether they’re using the keyboard, Siri Remote, Apple Watch Digital Crown, or accessibility features — and you can make that experience even better with SwiftUI’s Focus APIs.

Begin the challenge

Our challenge to you: Find a part of your app where you can use the SwiftUI Focus APIs to fine-tune that interaction. That could include testing a great new tvOS implementation, polishing keyboard-driven navigation, or crafting a great accessibility experience.

Need support, or want help from the community as you explore the Focus APIs? You can share your progress in the Developer Forums.

Visit the Apple Developer Forums

Resources




Direct and reflect focus in SwiftUI




SwiftUI Accessibility: Beyond the basics

Read the WWDC21 Challenges Terms and Conditions