In this SwiftUI tutorial, you’ll learn how to layout the UI by declaring and modifying views, and how to use state variables to update your UI. You’ll use Xcode’s new preview and live preview, and experience the joy of code and WYSIWYG layout that stay in sync.
I leave it up to you, how you want to do this: one way is to embed each of the 2 Text placeholders in a VStack, then modify each Stack to contain a Rectangle and one or 3 Text views.
The HStack containing the 2 color block Text placeholders was already there.
you can build and run SwiftUI apps in Xcode 11 beta on Mojave 10.14.5 — you just won’t see the previews; you’ll have to run in the simulator to see your UI
the tutorial has a link to Apple’s instructions for installing Catalina on a volume (not partition), so you don’t have to allocate a specific amount of space for it, and you can delete the volume when you don’t need it anymore. Scroll down to see the instructions for switching between Catalina an Mojave — I found these more reliable than holding down the Option key when restarting.
You can get size classes from Environment, which is the preferred way even in UIKit. If you absolutely need device orientation, you could grab it in SceneDelegate and insert it into the Environment so your SwiftUI code can retrieve it.
hi Prashant: the labels are just using their “intrinsic” size — they make themselves the right size for what they contain. When you move the sliders in live preview, the labels adjust to show the correct values.
In my sample project, I reset the values to 0.5, to center the sliders. This has the side effect of keeping the labels wide enough to fit 3 digits (127) for each color. It’s what the original BullsEye game does, to let the user start from the middle value. For this game, it makes the guess block gray instead of black.
Hi @audrey, This is a good introduction to SwiftUI.
Because it is a View, I tried extracting the ColorSlider into its own file and added a preview as follows:
#if DEBUG
struct ColorSlider_Previews: PreviewProvider {
static var previews: some View {
return ColorSlider(value: 0.5, textColor: .red)
}
} #endif
However, I get the error “Cannot convert value of type ‘Double’ to expected argument type ‘Binding<Double>’”. For the purpose of running a preview, how do you declare a Binding<Double> with a value of 0.5?
hi Vince, excellent question! I’m writing a UIViewRepresentable version that uses UISlider, and wanted to preview it like Tanu does in the WWDC video — notice she didn’t show the actual code for previewing her stars!
something like this gets rid of all the error messages:
<del>@State static var value = 0.5</del>
static var previews: some View {
ColorSlider(value: .constant(0.5), textColor: .red)
}
but the preview won’t refresh — it says the app may have crashed
I had a look through Mastering Xcode Previews, but didn’t see any solution. and he snuck in that .constant trick I’ve just updated in the code above. It works!
It doesn’t work with X11b5. I anticipated as much, however, you still should at the beta version number for Xcode 11 so people know which version the code works with. Better: update the code for the latest beta.
hi Adrian, thanks for the heads up! at this stage, SwiftUI is changing every couple of weeks, so I’ll wait until the final v1 release before updating the code.
Beta 5 is much less helpful than b4, which offered to make the necessary changes:
audrey, can you please tell me how I could restart the game? This is my first SwiftUI tutorial, I guess it must be something like reinitializing the whole view? Because when I try to change my target values somewhere the compiler tells me I cannot mutate anything because self is immutable…
EDIT:
Oh okay, changing the target color values to @State vars did the trick! For anybody else wondering: Call this func from within your Alerts Dismiss Button Action.